Angularny interfejs CLI - należy dodać adnotację @NgModule, gdy jest używana najnowsza

Question

uwaga: Jestem nowy w Angular, więc proszę przepraszam za nową głupotę.

Szczegóły

• Mam zainstalowaną najnowszą wersję Kątowymi CLI
• domyślnej aplikacji i obciążeń przebiega perfekcyjnie po 'ng służyć'

Issue

• Zdecydowałem się utworzyć nowy moduł i zaimportować go do modułu aplikacji
• To jest coś, co zrobiłem kilka razy w Angular 2 i działało idealnie dobrze
• Ponieważ jednak uruchomiłem najnowszą wersję Angular CLI rano importowania przerw modułu i pojawia się następujący błąd:

moduł

compiler.es5.js:1689 Uncaught Error: Unexpected directive 'ProjectsListComponent' imported by the module 'ProjectsModule'. Please add a @NgModule annotation.

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

Projekty Moduł

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

Proces Wziąłem na ustawienie modułu w górę nie było inaczej, kiedy używałem 2. Jednakże kątowe , po problemach ze zgodnością między Angular Cli, firebase i kątowym ogniem, zdecydowałem, że dziś rano otrzymam najnowsze informacje.

Każda pomoc w tej sprawie byłaby masowo doceniona, gdy trafiłem w mur z moim zrozumieniem tego wszystkiego.

Dziękuję.

Answer 1

Problem polega na imporcie ProjectsListComponent w twoim ProjectsModule. Nie powinieneś importować tego, ale dodaj go do tablicy eksportu, jeśli chcesz go użyć poza swoim ProjectsModule.

Inne problemy to trasy projektu. Powinieneś dodać je do zmiennej do eksportu, w przeciwnym razie nie jest kompatybilna z AOT. I powinieneś - zawsze - importować BrowserModule gdziekolwiek indziej, ale w swoim AppModule. Użyj CommonModule aby uzyskać dostęp do dyrektyw *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 } 
]