What is wrong here? I'm trying to make it work but I get that error in the header. I have included the <router-outlet></router-outlet>
in the app.component.html
that is being templateUrl
called by the app.component.ts
, still no luck.
app.module.ts:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { TopnavComponent } from './components/navbars/topnav/topnav.component'; import { LeftnavComponent } from './components/navbars/leftnav/leftnav.component'; import { LeftnavsecondaryComponent } from './components/navbars/leftnav-secondary/leftnav-secondary.component'; import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component'; @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ], declarations: [ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
app-routing.module.ts:
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component'; const appRoutes: Routes = [ { path: 'worldofwacraft', component: WorldofwarcraftComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
The error message is caused by some element of your @NgModule declarations: [ /* ... */ ] to be undefined ( … declared by the module … in the error message should be taken literally, it’s in the declarations !). For example, if you have a @NgModule declaration like this:
It has to do with barrels and not with angular or the cli directly. If you try to log out the values you are importing into your app module I bet they are undefined.
Another possible cause of this error is if one of the values in declarations is undefined. For example if you have an import statement like in your module file, and, for some reason, MyComponent is undefined, this will cause the same error message to appear.
So in the browser Angular is not able to recognize your fresh entries in app module because build is required to register them properly. So for development mode kill the current server and use ng serve. In my case it was class name diffrent and the name i.e in between { name } exported in app.mdoule.ts was diffrent
I got the same error , sometimes this issue occur and you only need to re-run the server using ng serve
or whatever CLI you use , as mentioned here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With