Angular CLI - добавьте аннотацию @NgModule при использовании последних

примечание: Я новичок в Angular, поэтому, пожалуйста, извините любую новую глупость здесь.

Подробнее

Я установил последнюю версию Angular CLI
Приложение по умолчанию загружается и работает отлично после "ng serve"

Вопрос

Я решил создать новый модуль и импортировать его в модуль приложения.
Это то, что я делал пару раз в Angular 2, и он работал отлично.
Однако, поскольку я запускал последнюю версию Angular CLI этим утром, импорт модуля прерывается, и я получаю следующую ошибку:

compiler.es5.js: 1689 Uncaught Error: Неожиданная директива 'ProjectsListComponent', импортированная модулем 'ProjectsModule'. Добавьте примечание @NgModule.

Модуль приложения

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

Ответ 1

Проблема заключается в импортировании ProjectsListComponent в ваш ProjectsModule. Вы не должны импортировать это, но добавьте его в массив экспорта, если хотите использовать его за пределами ProjectsModule.

Другие проблемы - это маршруты вашего проекта. Вы должны добавить их в экспортируемую переменную, иначе она не совместима с AOT. И вы должны -повторно импортировать BrowserModule в любом месте, кроме вашего AppModule. Используйте CommonModule, чтобы получить доступ к директивам *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 }
]