来自Angular2的最新版本抱怨:NgModule DynamicModule通过"entryComponents"使用HomeComponent

Question

由于切换到Angular 2的最新版本(即在github,master上),我收到有关我所有组件的警告:

NgModule DynamicModule通过"entryComponents"使用HomeComponent,但既未声明也未导入!最终结束后,此警告将成为错误.

除了以外,我得到了所有组件的相同错误消息HomeComponent.

有人可以提供有关这些的信息吗？

Answer 1

这也引诱了我.显著变化RC5到您路线的方式,引导与一个显著的依赖app.module.ts和@NgModule装饰.文档更新如下:https://angular.io/docs/ts/latest/和更改日志:https://github.com/angular/angular/blob/master/CHANGELOG.md

路由文件的主要更改是对import和export语句的更改.一个简单的例子是,低于该图示有两个组成部分,AppComponent并且HomeComponent,用作HomeComponent从 index.html:

文件:app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    }
];

export const routing = RouterModule.forRoot(appRoutes);`

然后,您需要使用NgModule文件:

文件:app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { HomeComponent } from './home.component';

import { routing }        from './app.routing';

@NgModule({
    imports:      [ BrowserModule, routing ],
    declarations: [ AppComponent, HomeComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后你需要使用它AppModule来main.ts引导和引导.

文件:main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);`

此模式不会生成控制台警告消息.

Answer 2

关于这个警告还有另外一件要小心的事情.

我收到它,即使我实际上是在我的模块中声明组件,它正在把我推到墙上,因为一切看起来都是正确的.

所以我逐步完成了生成警告的compiler.umd.js,我注意到我得到错误的组件在这里被添加到指令数组中两次:

 if (force || !transitiveModule.directivesSet.has(dirMeta.type.runtime)) {
            transitiveModule.directivesSet.add(dirMeta.type.runtime);
            transitiveModule.directives.push(dirMeta);
            declaredDirectives.push(dirMeta);
            this._addTypeToModule(dirMeta.type.runtime, moduleType);
            return true;
        }

基本上,即使组件已经在directivesSet中,transitiveModule.directivesSet.has(dirMeta.type.runtime)也会被评估为false,因此它会再次添加,其中一个会导致出现警告.

事实证明,我的路由文件和我的模块文件中的import语句略有不同.一个大写了路径中目录的第一个字母,而在另一个目录中全部是小写,如下所示:

//in routing
import { SomeComponent } from './Directory/some.component';

//in app module
import { SomeComponent } from './directory/some.component';

一旦我改变了路径匹配,警告消失了.其他一切似乎与不匹配的套管一起正常运作.

Answer 3

您还需要将路径中的每个组件添加到NgModule声明中.很多样板.请参阅角度问题https://github.com/angular/angular/issues/10472