"NG04014: Invalid configuration of route" when using router with exported variables

[Caliv0]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

Yes

Description

app-routing.module.ts:

const routes: Routes = [
  {
    path: SecondRoutes.Module,
    loadChildren: () =>
      import('./second/second.module').then((m) => m.SecondModule),
    pathMatch: 'prefix',
  },
];

second.routing.ts

export enum SecondRoutes {
  Module = 'second',
  CodeParam = 'code',
}

const routes: Routes = [
  {
    path: `:${SecondRoutes.CodeParam}`,
    component: SecondComponent,
    pathMatch: 'full',
  },
  { path: '**', redirectTo: '/' },
];

This configuration in itself is okay, the is caused in SecondComponent. Note the SecondRoutes enum, it's also part of the problem.

second.component.ts

export class SecondComponent implements OnInit {
  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
  ) {}
  ngOnInit(): void {
    // Causes Bug
    //console.log(this._route.snapshot.paramMap.get(SecondRoutes.CodeParam));
    // Causes Bug too
    //this._router.navigate(['/', SecondRoutes.Module]);
    // Using ThirdRoutes works again
    this._router.navigate(['/', ThirdRoutes.Module]);
  }
}

This works fine too. Note ThirdRoutes.Module which is an enum from a different module.

second.component.ts

export class SecondComponent implements OnInit {
  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
  ) {}
  ngOnInit(): void {
    // Causes Bug
    console.log(this._route.snapshot.paramMap.get(SecondRoutes.CodeParam));
    // Causes Bug too
    this._router.navigate(['/', SecondRoutes.Module]);
    // Using ThirdRoutes works again
    //this._router.navigate(['/', ThirdRoutes.Module]);
  }
}

This causes the bug. I get this error in the console when I try to activate the route:

Note SecondRoutes.CodeParam and SecondRoutes.Module hardcoding them solves the issue.

Please provide a link to a minimal reproduction of the bug

https://github.com/Caliv0/angular-routing-bug

Please provide the exception or error you saw

app-routing.module.ts:9 ERROR Error: NG04014: Invalid configuration of route 'second/:code'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren
    at validateNode (router.mjs:2843:13)
    at validateConfig (router.mjs:2790:5)
    at router.mjs:4341:56
    at map.js:7:37
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
    at Subscriber2.next (Subscriber.js:34:18)
    at mergeInternals.js:25:28
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
    at Subscriber2.next (Subscriber.js:34:18)
    at innerFrom.js:61:28

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 20.12.2
Package Manager: npm 10.6.0
OS: linux x64

Angular: 17.3.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.5

Anything else?

No response

[atscott]

Transferring issue to the CLI repo. This appears to be a build issue. The SecondComponent variable is not defined at the time the routes variable is read. The error coming from the Router is correct as far as the router is concerned or able to determine.

[alan-agius4]

This is due to a cyclic dependency second.routing.ts <> second.component.ts. You can solve this by moving the SecondRoutes enum to a separate file.