CLI angulaire - Veuillez ajouter une annotation @NgModule lors de l’utilisation de la dernière

Question

note: je suis nouveau sur Angulaire, de sorte s'il vous plaît excusez toutes les nouvelles recrues de la bêtise ici.

Détails

• J'ai installé la dernière version de Angulaire de la CLI
• Le défaut d'application des charges et fonctionne parfaitement bien après " ng servir

Question

• J'ai décidé de créer un nouveau module d'importation dans l'application du module
• C'est quelque chose que j'ai fait une couple de fois dans Angulaire 2 et ça fonctionne parfaitement bien
• Cependant, depuis que j'ai couru la dernière version Angulaire de la CLI de ce matin, l'importation d'un module de pauses, et je reçois le message d'erreur suivant:

compilateur.es5.js:1689 Uncaught Error: Unexpected directive "ProjectsListComponent' importé par le module "ProjectsModule'. S'il vous plaît ajouter un @NgModule annotation.

App Module

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

Module Projets

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

Le processus que j'ai prises pour le réglage du module n'a pas été toute différente quand j'ai été en utilisant Angulaire 2. Cependant, après avoir eu des problèmes avec la compatibilité entre Angulaire de la Cli, firebase et angulaire de feu, j'ai décidé d'obtenir la plus récente de tout ce matin.

Toute aide à ce que l'on serait massssssively apprécié que je l'ai frappé un mur de briques avec ma compréhension de tout cela.

Je vous remercie.

Answer 1

Le problème, c'est l'importation d' ProjectsListComponent votre ProjectsModule. Vous ne devriez pas l'importer, mais de l'ajouter à l'exportation de tableau, si vous voulez l'utiliser à l'extérieur de votre ProjectsModule.

D'autres questions sont votre projet routes. Vous devez ajouter ces pour une exportable variable, sinon c'est pas AOT compatible. Et vous devriez-jamais - importer l' BrowserModule n'importe où d'autre, mais dans votre AppModule. Utiliser l' CommonModule pour obtenir l'accès à l' *ngIf, *ngFor...etc directives:

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

export class ProjectsModule {}

projet.les itinéraires.ts

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