【问题标题】:Latest builds from Angular2 complain with: NgModule DynamicModule uses HomeComponent via "entryComponents"Angular2 的最新版本抱怨:NgModule DynamicModule 通过“entryComponents”使用 HomeComponent
【发布时间】:2016-08-03 16:39:23
【问题描述】:

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

NgModule DynamicModule 通过“entryComponents”使用 HomeComponent 但它 既没有申报也没有进口!此警告将变为错误 决赛之后。

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

谁能提供有关这些的信息?

【问题讨论】:

标签: angular


【解决方案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,它们服务于来自 index.html 的 HomeComponent:

文件: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);`

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

【讨论】:

  • 有效吗?你应该在 app.routing.ts 中得到错误, HomeComponent 没有导入?
  • 为我工作。 5 Min Tutorial 已经跟上了这些变化的步伐。作为最近关注它的人,我不得不重新访问它以了解与NgModule 相关的更多更改。谢谢!
  • MrJSingh - 你是对的,在 HomeComponent 的缺失导入语句中添加了。
  • 重要的是声明与此消息有关的组件!声明:[ AppComponent ],
【解决方案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,因此它被再次添加,其中之一导致出现警告。

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

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

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

一旦我改变了路径匹配,警告就消失了。如果外壳不匹配,其他一切似乎都可以正常工作。

【讨论】:

  • 我希望我能支持这个 * 1000。这个问题让我在我的代码周围跑了一整天。谢谢!
  • 谢谢,这绝对是一个让我非常沮丧的棘手问题。从那以后,我发现了一个完全避免该问题的好方法是使用“--forceConsistentCasingInFileNames”TypeScript 编译选项。这将在引起问题之前揭示任何大小写不一致。 (如果您在 VS 中工作,项目文件中编译选项的 msbuild 版本将为 True)。
【解决方案3】:

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

【讨论】:

  • 我知道你是对的,但我真的认为这是退一步。所以最后我导入了在那里路由所需的每个模块?我认为这会很快变得混乱。如果你有 20 条路线怎么办。这样的可维护性甚至比Angular 1.x还要差。
【解决方案4】:

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

WARN: 'NgModule DynamicTestModule 中的组件 RootCmp 使用 BlankCmp 通过“entryComponents”,但既没有声明也没有导入 模块!这个警告在final之后会变成错误。'

如何设置 DynamicTestModule ?

【讨论】:

    【解决方案5】:

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

    @doubletriplezero 给出了最接近的答案(如果这是您的问题)

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

    事实上,这可以准确地告诉您忘记导入哪个组件。见

    Angular 2 Component is not part of any NgModule

    获得更全面的答案

    【讨论】:

      猜你喜欢
      • 2016-02-16
      • 1970-01-01
      • 2023-03-22
      • 2017-05-03
      • 2017-02-06
      • 2021-06-20
      • 2018-01-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多