Angular 2 Componente no es parte de ningún NgModule

Question

Angular 2 Componente no es parte de ningún NgModule

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

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

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á mal?

50

angular upgrade

Author: Renan, 2016-09-16

Source

6 answers

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) Debes declararlo en app.módulo.ts

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

Y el problema está solucionado.

30

Author: roll,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-14 01:20:45

Tuve el mismo error. Tenía un montón de componentes y había perdido algunos en aplicación.módulo.ts pero no estaba seguro de cuáles.

Me enteré agregando una instrucción log 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 instrucción log le muestra qué componente olvidó agregar a la aplicación .módulo.ts .. simplemente haga clic en la salida de la instrucción log en la pestaña browser console para obtener más detalles.

Elimine la instrucción log cuando han terminado.

NOTA: Asegúrese de que está utilizando el compilador.umd.js (NO compilador.umd.min.js) en su archivo de configuración SystemJS.

11

Author: danday74,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-21 14:36:48

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

7

Author: Dila Gurung,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-26 04:54:21

Asegúrese de incluir su nuevo componente tanto en la aplicación de referencia.enrutamiento.ts, así como la aplicación.módulo.ts.

4

Author: Richard Bown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-18 11:57:41

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

Antes

App.enrutamiento.ts => import { HomeComponent } from './components/home.component';
app.módulo.ts => import { HomeComponent } from './Components/home.component'

Solución

App.enrutamiento.ts => import { HomeComponent } from './Components/home.component';
app.módulo.ts => import { HomeComponent } from './Components/home.component'

Tenga en cuenta, el cambio en el caso de la carpeta llamada "Componentes"

2

Author: Manthan Devani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-08 16:37:08

score 72 · Accepted Answer

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 final."Cuando finalmente miré ese mensaje de error, encontré mi respuesta que podría ser similar a la tuya. Encontré mi respuesta aquí.

Lo que este post me dio a conocer fue eso en mi aplicación.módulo.ts file Había declarado mis componentes de la siguiente manera:

App.módulo:

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

Pero en mi archivo de rutas era lo siguiente:

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

Así que las rutas piensan que su carga de un componente diferente que el módulo debido a las diferencias en la capitalización, lo que significa que los que se tiran en las rutas no eran los mismos que el módulo.

Espero que pueda ayudar.