web-dev-qa-db-fra.com

Angular 2 Component ne fait partie d'aucun module NgModule

je suis en train de mettre à niveau mon projet Angular 2 de RC5 à 2.0.0. Je reçois cette erreur

Rejet de la promesse non gérée: le composant LoginComponent ne fait pas partie d'un module Ng ou le module n'a pas été importé dans votre module. ; Zone:; Tâche: Promise.then; Valeur: Erreur: Composant

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:

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

Qu'est-ce qui ne va pas?

angularupgrade
55
Lyror

J'avais le même problème en passant de RC5 à Final et cela m'a pris un peu pour trouver ma réponse. J'ai finalement trouvé ma réponse après m'être souvenu que je recevais des messages d'avertissement "NgModule AppModule utilise LoginComponent via" LoginComponent "mais il n'a été ni déclaré ni importé! Cet avertissement deviendra une erreur après la version finale." Lorsque j’ai enfin jeté un œil à ce message d’erreur, j’ai trouvé ma réponse qui pourrait être semblable à la vôtre. J'ai trouvé ma réponse ici .

Ce message m'a appris que, dans mon fichier app.module.ts, j'avais déclaré mes composants comme suit:

app.module:

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

Mais dans mon fichier de routes, c'était la suivante:

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

Ainsi, les routes pensent que leur chargement est un composant différent de celui du module en raison de différences de capitalisation, ce qui signifie que celles qui sont entraînées dans les routes ne sont pas les mêmes que le module.

J'espère que ça pourrait aider.

76
Joe W

Même problème ici et je l'ai résolu.

1) Vous créez votre composant

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

2) Vous devriez le déclarer dans app.module.ts

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

Et le problème est résolu.

31
roll

J'ai eu la même erreur. J'avais beaucoup de composants et j'en avais manqué dans app.module.ts mais je ne savais pas lesquels.

J'ai découvert en ajoutant une déclaration de journal à ..

/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.");

L'instruction de journal vous indique le composant que vous avez oublié d'ajouter app.module.ts .. Il vous suffit de cliquer sur la sortie de l'instruction de journal dans l'onglet de la console du navigateur pour obtenir des détails.

Supprimez l'instruction du journal lorsque vous avez terminé.

REMARQUE: Assurez-vous que vous utilisez compiler.umd.js (PAS compiler.umd.min.js) dans votre fichier de configuration SystemJS.

11
danday74

L'erreur mentionnée est générée lorsque vous n'incluez pas de composants associés dans la section "module" principale du composant correspondant. Assurez-vous donc que le composant y est mentionné dans le module.

8
Dila Gurung

Assurez-vous d'inclure votre nouveau composant dans les fichiers de référence app.routing.ts et app.module.ts.

5
Richard Bown

Dans mon cas, le problème était lié à la différence de capitalisation dans app.routing.ts et app.module.ts. Nous devons nous assurer que nous avons le même chemin avec le même cas spécifié dans les deux emplacements.

Plus tôt

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

Solution

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

Remarque, le changement en cas de dossier nommé "Composants"

2
Manthan Devani

Dans mon cas, j’utilisais le dialogue de matériau angular. J'ai oublié d'inclure le dialogue dans NgModule. Le dialogue doit être présent dans NgModule et entryComponents.

0
heeraj123