Search code examples
angularcomponentsurl-routingangular11

Angular Routes Array Can't Be Detected

I'm trying to use routing in my Angular project that contains 2 components: contact & about. I follow the documentation & a youtube video on how to do this but I'm having trouble understanding this error I'm getting. I don't understand why routingComponents can't be found even though I already imported in app.module.ts. I read some questions that had a similar problem but the solutions I saw didn't work for me. Can someone please explain this? Here is my code below with an image of the error

Picture of Errors

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './second/second.component';

const routes: Routes = [
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
]; 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export routingComponents = [AboutComponent, ContactComponent]

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, routingComponents],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<h1>Routing & Nagivation</h1>

<nav>
  <a routerLink="/contact">Contact</a>
  <a routerLink="/about">About</a>
</nav>
<!-- Router View goes here -->
<router-outlet></router-outlet>

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portfolio2</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>
Solution

  • The problem is in app-routing.module.ts. You are missing const:

    Change this:

    export routingComponents = [AboutComponent, ContactComponent]

    To this:

    export const routingComponents = [AboutComponent, ContactComponent]