Description In an Angular 14 application, one of my pages/components works as expected if I don't set the "**" route in app-routing.module . But if I configure the "**" route in app-routing.module that page/component always directs to the 404 page.

Code

I have trimmed down and anonymised the application. (The application is almost empty now and the problem still happens.) :

• Stackblitz'* link: https://stackblitz.com/edit/angular-ivy-4uhljr
• GitHub link (not linked to the Stackblitz link): https://github.com/TT10/Debug20220804

'* (Please note that I have not been able to run anything on Stackblitz, it looks like compilation takes eternity. I had to recreate all the folders and them drop files in each of them manually so I can't guarantee that the Stackblitz code works. I am only using this to share code.)

Current structure

/AppModule/AppComponent --> OK

//StuffModule --> OK

///MainStuffComponent --> OK

////Component1A --> OK

////Component1B --> OK

///OtherStuffComponent --> 404 page (if "**" route is configured)

How to observe the "bug"

To observe the bug, launch the application and click on the Go to other stuff where 404 happens link.

Structure description

At launch it should boot on the main-stuff.component in the stuff.module. main-stuff.components itself is a holder for component1A and component1B. component1B contains a link to component other-stuff.component. Ideally I would have liked the other-stuff.component to be a child component of main-stuff.component too, but that didn't go well as I wanted it to use different route (a part of these are requirements and not my own choices). The 404 redirection happens when going to other-stuff.component ( route: otherStuff/:id)

I'm also not 100% sure if I'm misusing nested components yet as this is all rather new for me.

CodePudding user response：

You are not using the created module as a lazy loaded module, that was the issue.

Before:

const routes: Routes = [
    { path: '', component: MainStuffComponent },
    { path: '**', component: NotFoundComponent }
];

After:

const routes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('./stuff/stuff.module').then((m) => m.StuffModule),
  },
  { path: '**', component: NotFoundComponent },
];

stackblitz

CodePudding user response：

The order of routes is important because the Router uses a first-match wins strategy when matching routes.

You could create new NotFoundModule and configure with parent module instead of adding inside parent routes config.

app.routing-module.ts

const routes: Routes = [{ path: '', component: MainStuffComponent }];

not-found.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { NotFoundComponent } from './not-found.component';

const COMPONENT = [NotFoundComponent];
@NgModule({
  declarations: [...COMPONENT],
  imports: [
    BrowserModule,
    RouterModule.forChild([{ path: '**', component: NotFoundComponent }]),
  ],
  exports: [RouterModule],
})
export class NotFoundModule {}

app.module.ts

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

Forked Working Example