Angular 2 Компонент не является частью какого-либо NgModule

Я обновляю свой проект Angular 2 с RC5 до 2.0.0. Я получаю эту ошибку

Отказ от необработанного обещания: компонент LoginComponent не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль.; Зона:; Задача: Promise.then; Значение: Ошибка: Компонент

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 {
}

Вход в систему @Component:

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

Что не так?

Ответ 1

У меня была такая же проблема, как переход от RC5 до Final, и мне потребовалось немного, чтобы найти мой ответ. Наконец, я нашел свой ответ после того, как вспомнил, что получаю предупреждающие сообщения. "NgModule AppModule использует LoginComponent через" LoginComponent ", но он не был ни объявлен, ни импортирован! Это предупреждение станет ошибкой после финала". Когда я наконец просмотрел это сообщение об ошибке, я нашел свой ответ, который может быть похож на ваш. Я нашел свой ответ здесь.

В этом сообщении мне было сказано, что в моем файле 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.. просто нажмите на вывод инструкции журнала на вкладке консоли браузера для деталей.

Удалите оператор журнала, когда вы закончите.

ПРИМЕЧАНИЕ. Убедитесь, что вы используете compiler.umd.js(NOT compiler.umd.min.js) в конфигурационном файле SystemJS.

Ответ 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. Диалог должен присутствовать как в NgModule, так и в entryComponents.