Angular Routes Array Can't Be Detected

Question

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

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>

Try terminating your dev server process and run `ng serve` again. — BizzyBob, Jul 18 '21 at 21:34
I tried multiple times but I still get the same error @BizzyBob — , Jul 18 '21 at 21:35
It's an array of components I put in the app-routing.module.ts file. In the video that I watched they mentioned components being imported in both app.module.ts & app-routing.module.ts files. Thats why I created the array so only one file needs to be changed and then you can just import that array in app.module.ts. @BizzyBob — , Jul 18 '21 at 21:40
@BizzyBob around 6:25 : https://www.youtube.com/watch?v=Nehk4tBxD4o — , Jul 18 '21 at 21:42

score 1 · Accepted Answer · answered Jul 18 '21 at 22:02

1

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]

answered Jul 18 '21 at 22:02

BizzyBob

12,309
4
27
51

Angular Routes Array Can't Be Detected

1 Answers1