Routing when there is multiple routing modules-CodePudding

I'm trying to create a blog using Angular 13. I want to separate admin from the main page. I have 3 routing modules. app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  //blog routes
  {
    path: '',
    redirectTo: '/blog',
    pathMatch: 'full' //means path needs to be full match with what has been configured.
  },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) //() means Function
    //we use loadChildren when we want to use lazy loading. The other option is 'children'.
  },
  //auth routes
  {
    path: '',
    redirectTo: '/auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  }
];

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

blog-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from '../layout/blog/blog.component';
import { FocusContentComponent } from '../layout/blog/focus-content/focus-content.component';

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];

auth-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from '../layout/auth/auth.component';

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

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

The problem is that there is routing problem when I use http://localhost:4200/blog/mainpost. The console says that

cannot match any routes. URL Segment: 'blog/mainpost'

blog.component.html is:

<!DOCTYPE html>
<html lang="en" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Hugo 0.88.1" />
    <title>Science Blog</title>
  </head>

  <body>
    <app-header></app-header>

    <main >
      <app-focus-content></app-focus-content>

      <app-important-content></app-important-content>

      <div >
        <div >
          <!-- <app-main-body> -->
          <router-outlet name="post"></router-outlet>
          <!-- </app-main-body> -->
        </div>

        <div >
          <app-history-pannel></app-history-pannel>
        </div>
      </div>
    </main>
    <app-footer></app-footer>
  </body>
</html>

How can I fix this problem?

CodePudding user response：

in app module you have

{
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
}

which is the route /blog.

Then in your blog module you have

  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }

Which are the routes /blog/blog and /blog/blog/mainpost.

Try moving the children in the route above

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];