Why this error trying to split the routes related to a specific module in my Angular application?

Question

I am finding this problem following an Angular course. Basically the instructor it is showing how to split the routing from the app.module.ts file putting the route related to a specific module into the related module.

Basically I have an AuthModule that is related the authentication component of my app and the instructor is showing as to shift the authentication routes into this module. So this is my situation:

This is my AppModule class realted the main module of my application:

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    HeaderComponent,
    SidenavListComponent,
    StopTrainingComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    FlexLayoutModule,
    AngularFireModule.initializeApp(environment.firebase),
    TrainingModule,
    AuthModule
  ],
  providers: [AuthService,
              TrainingService,
              UIService
  ],
  bootstrap: [AppComponent],
  
})
export class AppModule { }

As you can see here I am importing my AuthModule module class that is this one:

@NgModule({
    declarations: [
        SignupComponent,
        LoginComponent,
    ],
    imports: [
        ReactiveFormsModule,
        AngularFireAuthModule,
        SharedModule,
        AuthRoutingModule
    ],
    exports: []

})
export class AuthModule {

    
} 

And as you can see this is importing this new module AuthRoutingModule containing the routing settings forn this authentication module, this one:

import { NgModule } from "@angular/core";
import { Route, RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

const routes: Route[
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AuthRoutingModule {

}

But doing in this way I am obtaining the following error when my application is compiled:

./src/app/auth/auth-routing.module.ts:4:12 - Error: Module parse failed: Unexpected token (4:12)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
| import * as i0 from "@angular/core";
| import * as i1 from "@angular/router";
> const routes, { path: , 'login': , component: LoginComponent };
| ;
| export class AuthRoutingModule {

Error: src/app/auth/auth-routing.module.ts:3:10 - error TS2440: Import declaration conflicts with local declaration of 'LoginComponent'.

3 import { LoginComponent } from "./login/login.component";
           ~~~~~~~~~~~~~~


Error: src/app/auth/auth-routing.module.ts:7:3 - error TS2538: Type '{ path: "signup"; component: SignupComponent; }' cannot be used as an index type.

7   { path: 'signup', component: SignupComponent },
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/auth/auth-routing.module.ts:7:49 - error TS1005: ']' expected.

7   { path: 'signup', component: SignupComponent },
                                                  ~


Error: src/app/auth/auth-routing.module.ts:8:10 - error TS2451: Cannot redeclare block-scoped variable '(Missing)'.

8   { path: 'login', component: LoginComponent }
           


Error: src/app/auth/auth-routing.module.ts:8:11 - error TS1003: Identifier expected.

8   { path: 'login', component: LoginComponent }
            ~~~~~~~


Error: src/app/auth/auth-routing.module.ts:8:18 - error TS1005: ':' expected.

8   { path: 'login', component: LoginComponent }
                   ~


Error: src/app/auth/auth-routing.module.ts:8:18 - error TS2451: Cannot redeclare block-scoped variable '(Missing)'.

8   { path: 'login', component: LoginComponent }
                   


Error: src/app/auth/auth-routing.module.ts:9:1 - error TS1128: Declaration or statement expected.

9 ];
  ~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Answer 1

You missed an = that might be the issue.

const routes: Route = [
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent }
];