componentes - crear proyecto angular 6

Angular 2 Component no es parte de ningún NgModule

Question

Estoy actualizando mi proyecto Angular 2 de RC5 a 2.0.0. Me sale este error

Rechazo de promesa no controlado: el componente LoginComponent no forma parte de ningún NgModule o el módulo no se ha importado a su módulo. ; Zona: Tarea: Promise.then; Valor: Error: Componente

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

Iniciar sesión @Componente:

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

¿Qué está mal?

Answer 1

Asegúrese de incluir su nuevo componente tanto en la referencia de app.routing.ts como en app.module.ts.

Answer 2

El error mencionado se produce cuando no incluye componentes asociados en la sección principal del "módulo" del componente respectivo. Así que asegúrese de que el componente se menciona allí en el módulo.

Answer 3

El mismo problema aquí y lo resolví.

1) Usted crea su componente

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

2) Debería declararlo en app.module.ts

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

Y el problema está solucionado.

Answer 4

En mi caso, el problema fue con la diferencia de mayúsculas en app.routing.ts y app.module.ts . Necesitamos asegurarnos de tener la misma ruta con el mismo caso especificado en ambas ubicaciones.

Más temprano

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

Solución

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

Tenga en cuenta que el cambio en el caso de la carpeta denominada "Componentes"

Answer 5

En mi caso, estaba usando el diálogo de material angular. He olvidado incluir el diálogo en NgModule. El diálogo debe estar presente tanto en NgModule como en entryComponents.

Answer 6

Tuve el mismo problema al pasar de RC5 a Final y me tomó un poco encontrar mi respuesta. Finalmente encontré mi respuesta después de recordar que estaba recibiendo mensajes de advertencia "NgModule AppModule usa LoginComponent a través de" LoginComponent "pero no fue declarado ni importado. Esta advertencia se convertirá en un error después de la final". Cuando finalmente busqué ese mensaje de error, encontré mi respuesta, que podría ser similar a la tuya. Encontré mi respuesta here .

En lo que esta publicación me dio pistas fue que en mi archivo app.module.ts había declarado mis componentes de la siguiente manera:

app.module:

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

Pero en mi archivo de rutas fue el siguiente:

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

Por lo tanto, las rutas piensan que está cargando un componente diferente al módulo debido a las diferencias en la capitalización, lo que significa que los que fueron arrastrados a las rutas no eran los mismos que el módulo.

Espero que pueda ayudar.

Answer 7

Yo tenía el mismo error. Tenía muchos componentes y me había perdido algunos en app.module.ts, pero no estaba seguro de cuáles.

Lo descubrí agregando una declaración de registro a ...

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

La declaración de registro le muestra qué componente olvidó agregar a app.module.ts ... simplemente haga clic en la salida de la declaración de registro en la pestaña de la consola del navegador para obtener detalles.

Elimine la instrucción de registro cuando haya terminado.

NOTA: Asegúrese de estar utilizando compiler.umd.js (NO compiler.umd.min.js) en su archivo de configuración de SystemJS.