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

时间:2016-08-03 16:39:23

标签: angular

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

  

NgModule DynamicModule通过" entryComponents"使用HomeComponent。但它   既没有宣布也没有进口!此警告将成为错误   在决赛之后。

除了HomeComponent之外,我的所有组件都收到了相同的错误消息。

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

5 个答案:

答案 0 :(得分:28)

这也引起了我的注意。 RC5对路由和引导方式的重大更改非常依赖于app.module.ts@NgModule装饰器。此处的文档已更新:https://angular.io/docs/ts/latest/和此处的更改日志:https://github.com/angular/angular/blob/master/CHANGELOG.md

路由文件的主要更改是对importexport语句的更改。下面举例说明了一个简单的示例,它包含两个组件AppComponentHomeComponent,它们从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);`

此模式不会产生控制台警告消息。

答案 1 :(得分:10)

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

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

所以我逐步完成了生成警告的 compiler.umd.js ,我注意到我收到错误的组件被添加到指令数组中两次:< / p>

 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';

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

答案 2 :(得分:7)

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

答案 3 :(得分:4)

我有同样的问题,但在测试部分。

  

警告:'NgModule DynamicTestModule中的组件RootCmp使用BlankCmp   通过“entryComponents”但它既没有声明也没有导入   模块!最终结束后,此警告将成为错误。'

如何设置DynamicTestModule?

答案 4 :(得分:1)

如果您要升级大型代码库,那么这些答案都不会告诉您忘记添加哪个组件 app.module.ts

最接近的答案(如果这是你的问题)由@doubletriplezero

提供

他提到 compiler.umd.js 有一些有用的信息。

实际上,这可以告诉您忘记导入哪个组件。参见

Angular 2 Component is not part of any NgModule

获得更全面的答案