Вложенная угловая маршрутизация с компонентами, вложенными в модули

Question

Я пытаюсь создать роутер «родитель-потомок», используя этот подход к структуре папок. Прежде всего, я хочу прояснить, подходит ли эта структура папок с наличием компонентов внутри модулей или я должен что-то изменить.

Если это выглядит нормально, у меня возникли проблемы с созданием вложенного маршрутизатора, который мне нужен для fi. Проблема, объясненная ниже, с неработающим и работающим примером ниже?

Структура папок

│   app.component.css
│   app.component.html
│   app.component.ts
│   app.module.ts
│   app.routing.ts
│
├───login
│       login.component.css
│       login.component.html
│       login.component.spec.ts
│       login.component.ts
│
└───user                                        //This is a module
    │   user.module.ts
    │   user.routing.ts
    │
    ├───create-user                             //This is a component
    │       create-user.component.css
    │       create-user.component.html
    │       create-user.component.spec.ts
    │       create-user.component.ts
    │
    ├───list-user                               //This is a component
    │       list-user.component.css
    │       list-user.component.html
    │       list-user.component.spec.ts
    │       list-user.component.ts
    │
    └───view-user                               //This is a component
            view-user.component.css
            view-user.component.html
            view-user.component.spec.ts
            view-user.component.ts

У моего app.routing есть это

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: 'admin',
    component: FullComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

Мой user.router содержит это

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: 'view',
    component: ViewComponent
  },
  {
    path: 'list',
    component: ListComponent
  }
];

Теперь, когда я пытаюсь получить доступ к URL http://localhost:4400/login, он прекрасно работает

Но когда я пытаюсь сделать то же самое с http://localhost:4400/admin/user/create, мой маршрут не работает. Мне нужна помощь с этим.

Следующий подход работает для меня хорошо, я хочу следовать что-то вроде выше.

Текущая процедура.

app.routing

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: '',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

user.routing

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create-user',
    component: CreateComponent
  },
  {
    path: 'view-user',
    component: ViewComponent
  },
  {
    path: 'list-user',
    component: ListComponent
  }
];

Следующий URL работает нормально http://localhost:4400/login http://localhost:4400/create-user

Answer 1

только добавить хеш (#) в app.router export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' });

Answer 2

Вы уверены, что импортировали все модули?

Вы должны импортировать RouterModule.forChild (UserRoutes) в UserRoutingModule, затем импортируйте UserRoutingModule в UserModule

Вы должны подтвердить правильный URL

например:

const routes: Routes = [
  { path: 'login', component: AppComponent },
  {
    path: 'admin',
    component: AppComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      }
    ]
  }
];

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

const userRoutes: Routes = [
  { path: 'create', component: CreateUserComponent },
  { path: 'list', component: ListUserComponent },
];

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

Answer 3

Я думаю, что проблема в том, что у вас не было пустого пути - поскольку в случае, если вы перенаправляете на маршрут admim, ваш маршрут не будет совпадать, потому что угловые маршруты будут искать пустой маршрут в маршрутах children, так как у вас его нет, он не будет соответствовать маршруту

Попробуйте что-то вроде этого

  {
    path: 'admin',
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      },
      {
        path:''
        component:FullComponent
      } 
    ]
  }

Теперь, когда вы попытаетесь перейти к admin, ваш FullCompoment будет визуализирован, и если вы попытаетесь /admin/user, он будет лениво загружать ваш пользовательский модуль

Точно так же добавьте пустой путь к вашему user-routing-module.ts

{
    path: '',
    redirectTo: 'create',
    pathMatch : 'full'
  }

Скорее всего, это решит вашу проблему - наконец, убедитесь, что вы импортировали свою маршрутизацию в соответствующие модули - надеюсь, это поможет - Удачного кодирования:)

Answer 4

Группировка тесно связанных компонентов в функциональном модуле - это путь!

То, что вы пытаетесь сделать, называется модуль отложенной загрузки . Проверьте угловую документацию по этой теме: https://angular.io/guide/lazy-loading-ngmodules.

Вам не хватает объявления UserRoutingModule внутри user.routing.ts (я предлагаю переименовать файл в user-routing.module.ts, чтобы следовать соглашению). Тогда вам просто нужно импортировать UserRoutingModule в UserModule;)

Кстати, когда вы используете ленивую загрузку модуля, вы должны скомпилировать / обслуживать ваше приложение с флагом --aot (досрочно). Подробнее об этом вы можете прочитать здесь: https://angular.io/guide/aot-compiler.

Ура!