Angular 2组件不是任何NgModule的一部分
我正在将我的Angular 2项目从RC5升级到2.0.0。 我得到这个错误
未处理的Promise拒绝:组件LoginComponent不是任何NgModule的一部分,或者模块没有被导入到你的模块中。 ; 区域:; 任务:承诺。 值:错误:组件
Main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
的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 { }
login@组件:
@Component({ selector: 'Login', templateUrl: 'App/Login/Login.html', providers: [LoginService], styleUrls: ['App/Login/Login.css'] })
哪里不对?
我有同样的问题从RC5移动到最终,我花了一点find我的答案。 我终于在记得我收到警告消息后find了我的答案:“NgModule AppModule通过”LoginComponent“使用LoginComponent,但是它既没有声明也没有导入!这个警告在最后会变成错误。 当我终于看到这个错误信息,我发现我的答案可能类似于你的答案。 我在这里find了我的答案。
这个post提到我的是,在我的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';
因此,由于大小写不同,路由会认为它加载了一个不同的组件,然后是模块,这意味着被拉入路由的模块与模块不一样。
希望它可以帮助。
同样的问题在这里,我解决了它。
1)你创build你的组件
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 ],
而问题是固定的。
我有同样的错误。 我有很多组件,并错过了一些在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的哪个组件。只需在浏览器控制台选项卡中单击日志语句的输出即可获取详细信息。
完成后删除日志语句。
注意:确保你的SystemJSconfiguration文件中使用了compiler.umd.js(不是compiler.umd.min.js)。
如果不在相应组件的主“模块”部分中包含关联的组件,则会出现上述错误。 所以确保组件在模块中提到。
在我的情况下,问题是在app.routing.ts
和app.module.ts
的大小写差异。 我们需要确保我们有相同的path在两个位置指定相同的情况。
前
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'
请注意,如果文件夹名称为“组件”
确保在引用app.routing.ts和app.module.ts中包含新组件。