for - CLI angular: agregue una anotación @NgModule cuando use la última versión

manual angular 6

Question

nota: soy nuevo en Angular, así que disculpe la estupidez de un recién llegado aquí.

Detalles

• He instalado la última versión de Angular CLI
• La aplicación predeterminada se carga y funciona perfectamente bien después de ''ng serve''

Problema

• Decidí crear un nuevo módulo e importarlo al módulo de la aplicación
• Esto es algo que he hecho un par de veces en Angular 2 y ha funcionado perfectamente bien.
• Sin embargo, desde que ejecuté la última versión de Angular CLI esta mañana, al importar un módulo se rompe y recibo el siguiente error:

compiler.es5.js: 1689 Error no detectado: Directiva inesperada ''ProjectsListComponent'' importada por el módulo ''ProjectsModule''. Por favor agregue una anotación @NgModule.

Módulo de aplicaciones

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import { AngularFireModule } from ''angularfire2'';
import { AngularFireDatabaseModule } from ''angularfire2/database'';
import { AngularFireAuthModule } from ''angularfire2/auth'';
import { environment } from ''../environments/environment'';
import { ProjectsModule } from ''./projects/projects.module'';
import { HttpModule } from ''@angular/http'';


@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ProjectsModule,
    AngularFireModule.initializeApp(environment.firebase, ''AngularFireTestOne''), // imports firebase/app needed for everything
    AngularFireDatabaseModule, // imports firebase/database, only needed for database features
    AngularFireAuthModule // imports firebase/auth, only needed for auth features
  ],

  declarations: [AppComponent],

  bootstrap: [AppComponent]

})

export class AppModule { }

Módulo de Proyectos

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { ProjectsListComponent } from ''./projects-list.component'';
import { RouterModule } from ''@angular/router'';

@NgModule({

    declarations: [
        ProjectsListComponent
    ],


  imports: [
    BrowserModule,
    ProjectsListComponent,
    RouterModule.forChild([
      { path: ''projects'', component: ProjectsListComponent }
    ])
  ]
})

export class ProjectsModule { }

El proceso que tomé para configurar el módulo no ha sido diferente a cuando estaba usando Angular 2. Sin embargo, después de tener problemas con la compatibilidad entre Angular Cli, Firebase y Angular Fire, decidí obtener lo último de todo esto. Mañana.

Cualquier ayuda con esta sería apreciada masivamente, ya que he golpeado una pared de ladrillos con mi comprensión de todo esto.

Gracias.

Answer 1

El problema es la importación de ProjectsListComponent en su ProjectsModule . No debe importar eso, sino agregarlo a la matriz de exportación, si desea usarlo fuera de su ProjectsModule .

Otras cuestiones son las rutas de su proyecto. Debe agregarlos a una variable exportable, de lo contrario no es compatible con AOT. Y usted debería -nunca- importar el BrowserModule ningún otro lugar que no sea su AppModule . Use CommonModule para obtener acceso a las *ngIf, *ngFor...etc :

@NgModule({
  declarations: [
     ProjectsListComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(ProjectRoutes)
  ],
  exports: [
     ProjectsListComponent
  ]
})

export class ProjectsModule {}

proyecto.rutas.ts

export const ProjectRoutes: Routes = [
      { path: ''projects'', component: ProjectsListComponent }
]