Angular 2 组件不是任何 NgModule 的一部分

Posted 2023-02-18

【中文标题】Angular 2 组件不是任何 NgModule 的一部分

【英文标题】：Angular 2 Component is not part of any NgModule

【发布时间】：2017-01-24 11:03:10

【问题描述】：

我正在将我的 Angular 2 项目从 RC5 升级到 2.0.0。我收到此错误

未处理的 Promise 拒绝：组件 LoginComponent 是 不是任何 NgModule 的一部分，或者该模块还没有被导入到你的 模块。 ;区域：;任务：Promise.then；值：错误：组件

Main.ts：

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';

import  AppModule  from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

应用模块：

import  NgModule       from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule    from '@angular/forms';
import  AppComponent   from './app.component';
import RouterModule from "@angular/router";
import AppsAdminComponent from './AppsAdmin/AppsAdmin.component';
import AppsManagerComponent from './AppsManager/AppsManager.component';
import LoginComponent from './Login/Login.component';
import LogoutComponent from './Logout/logout.component';
import  Routing   from './App.routing';
import HttpModule from '@angular/http';
//import AppsManagerService from './Service/AppsManager.service';
import GlobalService from './Service/GlobalService';
import Webservice from './Service/Webservice';

@NgModule(
    declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        AppsAdminComponent,
        AppsManagerComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        Routing
    ],
    providers: [
        GlobalService,
        Webservice

    ],
    bootstrap: [
        AppComponent
    ]
)
export class AppModule 

登录@组件：

@Component(
    selector: 'Login',
    templateUrl: 'App/Login/Login.html',
    providers: [LoginService],
    styleUrls: ['App/Login/Login.css']
)

怎么了？

【问题讨论】：

您能添加 LoginComponent 吗？至少这个组件的@Componentannotation，不需要粘贴整个组件。

我添加了@component

能否添加app.routing.ts文件？

【参考方案1】：

我在从 RC5 迁移到 Final 时遇到了同样的问题，我花了一些时间才找到答案。在记得我收到警告消息“NgModule AppModule 通过“LoginComponent”使用 LoginComponent 但它既没有声明也没有导入！这个警告在最终之后将成为错误之后，我终于找到了答案。”当我最终查看该错误消息时，我发现我的答案可能与您的相似。我找到了我的答案here。

这篇文章让我明白的是，在我的 app.module.ts 文件中，我将我的组件声明如下：

app.module:

import AccountComponent, AccountDetails from './account/index'; import LoginComponent, ResetPasswordComponent from './login/index';

但在我的路线文件中是这样的：

import AccountComponent, AccountDetails from './Account/Index'; import LoginComponent, ResetPasswordComponent from './Login/Index';

因此，由于大小写不同，路由认为它加载的组件与模块不同，这意味着被拉入路由的组件与模块不同。

希望它可能会有所帮助。

【讨论】：

或无效路径，就像我的情况一样。

在我的情况下，我只是将其添加到某些模块列表中，但似乎我在您的回答中得到了指导，谢谢。

如果组件不用于路由，该怎么办。

【参考方案2】：

同样的问题，我解决了。

1) 你创建你的组件

            import  Component  from '@angular/core';
            @Component(
              moduleId:module.id,
              selector: 'page-home',
              templateUrl:'HomeComponent.html',
            )
            export class HomeComponent   

2) 你应该在 app.module.ts 中声明它

            import HomeComponent  from './Components/Pages/Home/HomeComponent';
            ...
            declarations: [ 
                AppComponent,
                HomeComponent
            ],

问题解决了。

【参考方案3】：

我有同样的错误。我有很多组件，在 app.module.ts 中遗漏了一些组件，但我不确定哪些组件。

我是通过在..中添加一个日志语句发现的

/node_modules/@angular/compiler/bundles/compiler.umd.js

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

日志语句显示您忘记将哪个组件添加到 app.module.ts .. 只需单击浏览器控制台选项卡中日志语句的输出即可了解详细信息。

完成后删除日志语句。

注意：确保您在 SystemJS 配置文件中使用的是 compiler.umd.js（不是 compiler.umd.min.js）。

【参考方案4】：

当您没有在相应组件的主要“模块”部分中包含关联组件时，会产生上述错误。因此，请确保在模块中提到了该组件。

【参考方案5】：

确保在引用 app.routing.ts 和 app.module.ts 中都包含新组件。

【参考方案6】：

就我而言，问题在于app.routing.ts 和app.module.ts 的大小写差异。我们需要确保在两个位置指定相同大小写的相同路径。

之前

app.routing.ts => import HomeComponent from './components/home.component'; app.module.ts => import HomeComponent from './Components/home.component'

解决方案

app.routing.ts => import HomeComponent from './Components/home.component'; app.module.ts => import HomeComponent from './Components/home.component'

注意，文件夹名为“组件”

的变化

【参考方案7】：

就我而言，我使用的是角度材质对话框。我忘记在 NgModule 中包含对话框。 Dialog 需要在 NgModule 和 entryComponents 中都有。

【参考方案8】：

如果您的应用或功能模块未导入应用中正在使用的所有其他模块，也会发生此错误。

【参考方案9】：

确保您的组件已导入 app.module.ts。在我的情况下，这是原因 我忘了在声明中包含组件

@NgModule(
  declarations: [
    AppComponent,
    HomeComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
)

另外，请确保在添加新模块和组件时重新启动服务器，而 ng serve 它也是出现此问题时的原因。 所以，基本的解决办法是退出服务器，重新ng服务。