标签: angular2-modules

我决定将LoginComponent,AuthService,LoggedInGuard放在一个名为AuthModule的模块中:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthComponent } from './auth.component';
import { LoginComponent } from './components/login/login.component';

import { AuthService } from './services/auth/auth.service';
import { StorageService } from './services/storage/storage.service';
import { RequestService } from './services/request/request.service';

import { LoggedInGuard } from './guards/logged-in.guard';

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [AuthService, LoggedInGuard],
  declarations: [AuthComponent, LoginComponent],
  exports: [AuthService, LoggedInGuard]
})
export class AuthModule { }

我想在Application的其余部分中仅使用AuthService方法.和LoggedInGuard保护非公共路线.

所以我尝试在AppModule中导入它们:

import { AuthModule } from './core/auth/auth.module';

@NgModule({
  declarations: [AppComponent, …

如别人在做我可以动态加载本地模块plunker这里.但是我如何加载一个外部模块,让我们说另一个服务提供服务的另一个包js.在示例plunker中,src/app.ts具有:

  constructor(private viewref: ViewContainerRef,
      private resolver: ComponentFactoryResolver,
      private loader: SystemJsNgModuleLoader,
      private compiler: Compiler){
        this.module = new ModuleNode();
        //can I make this a non-local script reference somehow?
        //like to http://example.net/external.module.bundle.js
        this.module.modulePath = "src/dynamic.module#DynamicModule";
        this.module.componentName = "TestComponent";
      }

有没有办法实现这个目标？

编辑:澄清一下,情景是一组微服务(独立构建,部署等)正在制作spa.所以我的微服务想要从另一个微服务提供的bundle.js动态加载组件/模块.这就是我在编译时没有模块/包的原因.两个微服务之间唯一的合同是bundle文件的url.如果他们更新组件/模块,硬刷新应反映更改,而无需重新部署我的微服务.

当我尝试加载我的角度2.0应用程序时,我收到以下错误:(索引):21错误:错误:模块'AppModule'导入的意外值'[object Object]'

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { searchComponent }      from './search.Component'; 
import { landingComponent }     from './landing.Component'; 

export const routes: Routes = [
{
    path: '',
    component: searchComponent
},
{
    path: 'search',
    component: searchComponent
}];
export const routedComponents = [searchComponent, landingComponent];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

的AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule } …

我收到以下错误,不知道该怎么做:

(SystemJS)ViewerComponent模块导入的意外指令GalleryModule

感谢您提供有关可能导致错误的任何帮助.在主应用程序中,它导入库模块.gallery组件将查看器组件作为子组件.

图库组件:

import {Component, NgZone, ViewChild, ElementRef} from '@angular/core';
import {Http, Response} from '@angular/http';
import { ViewerComponent } from '../viewer/viewer.component';
import 'rxjs/Rx';

interface IImage {
  url: string;
  thumbnail: string;
  date: string;
  width: number;
  height: number;
}

@Component({
  selector: 'sd-gallery',
  templateUrl: 'gallery.component.html',
  styleUrls: ['gallery.component.css']
})
export class GalleryComponent {;
  @ViewChild('galleryContainer') galleryContainer: ElementRef;
  @ViewChild('asyncLoadingContainer') asyncLoadingContainer: ElementRef;

  thumbnailBasePath = 'assets/img/gallery/preview_xxs/';
  currentIdx: number = 0;
  galleryBasePath: string = 'assets/img/gallery/';
  showBig: boolean = false;
  images: any[] = [{ url: '' …

我有一个要求,我需要根据数据加载不同的版本模块.

像月度数据这样的东西,如果我当前月份的模块代码发生了一些变化,那么上个月页面的视图/逻辑不应该有任何变化,数据也是如此,因此视图也是如此.

我打算为每个模块创建自定义库.有了这个,我可以用模块版本映射我的数据.

由于我的应用程序很大并涉及如此多的模块和版本,因此我无法将所有版本的模块/库带到客户端.

有人可以提出更好的方法来处理这个要求吗？

是否有有关模块生命周期的信息。目前 Angular 内部组件的生命周期有很好的文档记录，我们有诸如 、 等钩子ngOnInit()方法ngDoCheck()。

我们是否有类似的 Angular 模块生命周期钩子？我在哪里可以读到这方面的内容？

我有一个Angular 2应用程序(RC7),它作为单个组件开始,但很快就会以各种不同(有时甚至是完全不相关)的方式在整个项目中使用.

因此,单个NgModule引导所有组件似乎是一个可怕的想法,有大量的膨胀.我正在努力寻找一种方法来拥有多个模块(模块A将包含组件A,模块B将包含组件B等),并且仍然允许在单个页面上引导多个A2应用程序.

在实践中,我想要实现的是:

Page 1 bootstraps模块A - 这是有效的.

Page 2 bootstraps模块B - 这是有效的.

Page 3 bootstraps模块A和模块B - 这不起作用.

的index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script>
<script src="/angular2/systemjs.config.js"></script>


<script type="text/javascript">
    System.import('appOne').catch(function(err){ console.error(err); });
    System.import('appTwo').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            'npm:': '/angular2/node_modules/'
        },
        map: {
            appOne: '/angular2/',
            appTwo: '/angular2/',
        },
        packages: {
            appOne: {
                main: './appOne.main.js',
                defaultExtension: 'js'
            },
            appTwo: {
                main: './appTwo.main.js',
                defaultExtension: 'js'
            },
        }
    });
})(this);

AppOne和AppTwo的模块只是引导相关组件(componentOne&componentTwo).但是,两者不会同时在同一页面上呈现.我在控制台中没有错误,但是最后在systemjs.config.js文件中列出的最新软件包是唯一要加载的软件包.

谁能明白为什么它可能不起作用？或者推荐另一种方法来构建我的模块.我宁愿没有列出所有组件,服务等的父模块 …

这是场景.我有一个UserConsoleModule和ShoppingCartModule.我有一个名为MyProfileComponent的组件.当你转到/ user-console时,你会看到MyProfileComponent,因此我把它放在UserConsoleModule的声明中.现在在/ shopping-cart/profile中,当用户退房时,我正在显示他的个人资料以确保每个信息都正常.所以我重用并将MyProfileComponent放在那里并在ShoppingCartModule中声明该组件.现在它说,组件是两个模块的一部分.我不知道为什么它有两个模块.他们是独立的.无论我重用哪些组件,我都声明在那个特定的模块中,我认为我很好,就像RC 5之前的声明一样.这个模块很好,但实际上却产生了很多混乱.

另一个问题是路线.我有一个AdminConsoleModule,我重用了UserConsoleModule和ShoppingCartModule.我做的是我在AdminConsoleModule的导入中导入了ShoppingCartModule.我/购物车重定向到/ shopping-cart/cart.因此,只要管理员控制台加载,它就会重定向到/ admin-console/cart.虽然它应该在路由器插座中加载UserResults.路由器很困惑.我在这里做错了吗？

作为解决方案的一部分,我制作了一个共享模块,它只包含购物车组件,其目的是在shopping-cart.module中导入shared-shopping-cart.module.ts和shopping-cart.routing.ts. ts,因此它仍然是分离的.但共享模块抛出一个错误,说路由器插座不称为我的shopping-cart.component.ts有路由器插座.

我的admin-console.routing.ts

const AdminConsoleRoutes: Routes = [
    {path: '',   component: AdminConsoleComponent,
        children: [
            {path: '',  component:UserResultsComponent},
            {path: 'search',  component:UserResultsComponent},
            {path: 'user-messages',  component: MyMessagesComponent},
            {path: 'user-profile',  component: MyProfileComponent },
            {path: 'user-progress',  component: MyProgressComponent},
            {path: 'user-receipts',  component: MyReceiptsComponent},
            {path: 'user-courses',   component: MyCoursesComponent},
            {path: 'group-membership',   component: GroupMembershipComponent},
        ]
    }
];

@NgModule({
    imports:[RouterModule.forChild(ManageUserRoutes)],
    exports:[RouterModule]
})

export class AdminConsoleRoutingModule{}

我的AdminConsoleModule:

@NgModule({
    imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule,  AdminConsoleRoutingModule],
    declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
    exports:[]
})

export class AdminConsoleModule{}

我没有导入my-profile和一切,因为UserConsole有这些组件.

UserConsoleModule

@NgModule({ …

我有一个主模块和一些子模块.我想在它们之间指定一些不平凡的路由.

我更喜欢在子模块中定义子模块的路径.例如:

@NgModule({
    imports: [
        /*...*/
        RouterModule.forChild([
            { path: 'country', redirectTo: 'country/list' },
            { path: 'country/list', component: CountryListComponent },
            { path: 'country/create', component: CountryCreateComponent },
            /*...*/
        ])
    ],
    declarations: [/*...*/],
    exports: [
        RouterModule,
    ],
})
export class CountryModule {}

我想用自己的内部路由导入这个模块,但我想让它的整个路由前缀.

const appRoutes = [
    { path: '', component: HomeComponent },
    /*... (basic routes)*/
];

@NgModule({
    imports: [
        /*...*/
        RouterModule.forRoot(appRoutes),
        CountryModule, // <- how to make its routing prefixed??
    ],
    declarations: [
        /*...*/
        AppComponent,
    ],
    bootstrap: [ AppComponent ]
})
export …

错误:尝试查找引导代码,但指定静态可分析引导代码或将entryModule传递给插件选项.

main.ts

getHttp().get('/assets/config.json').toPromise()
 .then((res: Response) => {
 let conf = res.json();
 platformBrowserDynamic().bootstrapModule(createAppModule(conf));
})

我正在使用angular-cli.使用角度v2.3.1,此代码工作正常.

我想获取json并将其传递给@Ngmodules提供程序

{ provide: Config, useValue: conf }