[SOLVED] Angular Router outlet not rendering

Angular Router outlet not rendering

Having issues with router-outlet not rendering the page.

The app.module imports RouterModule and RouterOutlet.

The app-routing.module.ts consists of the following code.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', pathMatch: 'full', redirectTo: 'home' }
];

export default routes;

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

The problem comes when I put in app.component.html. It throws an error saying that

"Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead."

I can link to the app-home component and it works just fine. What am I missing?

Solution

BrowserModule or BrowserAnimationsModule should be imported once in app.module. In submodules or components, you need to remove the BrowserModule or BrowserAnimationsModule from imports.