web-dev-qa-db-fra.com

Angular CLI - Ajoutez une annotation @NgModule lors de l'utilisation de la dernière

note: Je suis un nouveau venu dans Angular, alors s'il vous plaît, excusez toute stupidité nouvelle venue ici.

Détails

  • J'ai installé la dernière version de Angular CLI
  • L'application par défaut se charge et fonctionne parfaitement après "ng serve"

Problème

  • J'ai décidé de créer un nouveau module et de l'importer dans le module d'application.
  • C’est quelque chose que j’ai fait plusieurs fois dans Angular 2 et qui a parfaitement fonctionné
  • Cependant, depuis que j'ai exécuté la dernière version de Angular CLI ce matin, l'importation d'un module est interrompue et le message d'erreur suivant s'affiche:

compiler.es5.js: 1689 Erreur non capturée: directive 'ProjectsListComponent' inattendue importée par le module 'ProjectsModule'. Veuillez ajouter une annotation @NgModule.

Module App

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

La procédure de configuration du module n’a pas été différente de celle utilisée lorsque j’utilisais Angular 2. Cependant, après des problèmes de compatibilité entre Angular Cli, Firebase et angular feu, j'ai décidé de tout savoir ce matin.

Toute aide concernant celui-ci serait grandement appréciée car je me suis heurté à un mur de briques avec ma compréhension de tout cela.

Je vous remercie.

angulartypescriptangular-cliangularjs-ng-model
39
MegaTron

Le problème est l'importation de ProjectsListComponent dans votre ProjectsModule. N'importez pas cela, mais ajoutez-le au tableau d'exportation si vous voulez l'utiliser en dehors de votre ProjectsModule.

Les autres problèmes sont les itinéraires de votre projet. Vous devriez les ajouter à une variable exportable, sinon elle n'est pas compatible AOT. Et vous devriez toujours importer la BrowserModule ailleurs que dans votre AppModule. Utilisez CommonModule pour accéder aux directives *ngIf, *ngFor...etc:

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

export class ProjectsModule {}

project.routes.ts

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