I'm Using nested modules in my project

.
└─ AppModule
    ├─ MallModule
    ├─ OtherModule
    └─ ...

In the main route I only configured top-level routes:

app-routing.module.ts

const routes: Routes = [
  { path: '',   redirectTo: '/', pathMatch: 'full' },
  { path: 'login', ponent: LoginComponent},
  { path: 'register', ponent: RegisterComponent },

  { path: '404', ponent: NotfoundComponent },
  { path: '**', redirectTo: '404' }, // Added
]

Separately, I configured routes separately in each sub-modules, like:

mall-routing.module.ts

const routes: Routes = [
  {
    path: '', 
    ponent: MallComponent,
    children: [
      {
        path: '',
        ponent: HomeComponent,
      },
      {
        path: 'about',
        ponent: AboutComponent,
      },
      ...
    }
]

The result is, because that no other routes are defined in the main routing configs, all requests other than login/register/404 will be redirected to 404.

Is there anyway I can use a correct 404 redirection but keep the current route file structure? I don't hope to gather all route configs together.

Thanks!

I'm Using nested modules in my project

.
└─ AppModule
    ├─ MallModule
    ├─ OtherModule
    └─ ...

In the main route I only configured top-level routes:

app-routing.module.ts

const routes: Routes = [
  { path: '',   redirectTo: '/', pathMatch: 'full' },
  { path: 'login', ponent: LoginComponent},
  { path: 'register', ponent: RegisterComponent },

  { path: '404', ponent: NotfoundComponent },
  { path: '**', redirectTo: '404' }, // Added
]

Separately, I configured routes separately in each sub-modules, like:

mall-routing.module.ts

const routes: Routes = [
  {
    path: '', 
    ponent: MallComponent,
    children: [
      {
        path: '',
        ponent: HomeComponent,
      },
      {
        path: 'about',
        ponent: AboutComponent,
      },
      ...
    }
]

The result is, because that no other routes are defined in the main routing configs, all requests other than login/register/404 will be redirected to 404.

Is there anyway I can use a correct 404 redirection but keep the current route file structure? I don't hope to gather all route configs together.

Thanks!

• javascript
• angular
• typescript

Share Improve this question Follow asked Mar 5, 2019 at 8:53 DarklizardDarklizard 37744 silver badges1717 bronze badges 4

• 1 You need to import the modules in the root module OR use lazy-loading to load other modules and use their routes – Sachin Gupta Commented Mar 5, 2019 at 8:54
• @SachinGupta yes they are working fine currently, I just want to add a 404 page. I did not use lazy-loading because the breadcrumb is not working with that. – Darklizard Commented Mar 5, 2019 at 8:57
• @JasonWhite Is { path: '**', redirectTo: '404' } equals to your catch-call route? how should I config it? thanks. – Darklizard Commented Mar 5, 2019 at 9:11
• Please add the code for the imports array of the AppModule (root) – Sachin Gupta Commented Mar 5, 2019 at 9:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

import the 'Other' modules in your app modules, this will allow the routes defined in those modules to be used.

The updated code should look something like this:

imports: [
  MallModule,
  OtherModule
  RouterModule.forRoot([ // Add the configuration here, which is not a part of other module ])
]

I arrived in at this question after one module worked fine with the routing but another gave 404 for all its subpages.

The problem for me was the order in app.modules.ts. I had the submodules after the import of AppRoutingModule in the list of imports. Once I moved that last, than the routing of submodules and 404 page worked fine.

In app.module.ts.

  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    SubModule,
    AuthorizationModule,
    CommonModule,
    FontAwesomeModule,
    ProfileModule, // this was previously defined after AppRoutinModule
    AppRoutingModule // this must be last in list for routing with 404 to work
  ]

and in app-routing.modules.ts.

const routes: Routes = [
    // https://angular.io/guide/router
    { path: 'help', ponent: HelpComponent },
    { path: 'terms', ponent: TermsComponent },
    { path: 'contact', ponent: ContactComponent},
    { path: '404', ponent: PageNotFoundComponent},
    { path: '**', ponent: PageNotFoundComponent}
];

in routing load your modules like below

  // MallModule
  {
    path: "path",
    canLoad: [AuthGuard],
    loadChildren: "./modules/MallModule.module#MallModule",

  },