Just a heads up: I'm diving into Angular for the first time, so bear with me if I make some rookie mistakes.
The Lowdown
- I've got the latest version of Angular CLI up and running
- The default app loads without a hitch after 'ng serve'
The Problem at Hand
- I decided to create a new module and import it into the app module
- This was a smooth process in Angular 2, but things went haywire when I tried it with the latest version of Angular CLI this morning
- Upon importing the module, I encountered this error message:
compiler.es5.js:1689 Uncaught Error: Unexpected directive 'ProjectsListComponent' imported by the module 'ProjectsModule'. Please add a @NgModule annotation.
The 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 { }The Projects Module
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 { }The way I set up the module is pretty much unchanged from my Angular 2 days. However, due to compatibility issues with Angular CLI, firebase, and angular fire, I decided to update everything earlier today.
If anyone can help shed light on this one, I would be eternally grateful. My understanding seems to have hit a roadblock.
Thanks in advance.