Почему мои маршруты не загружают нужного ребенка?

Question

В настоящее время я изучаю Angular (CLI v7.1.0), и я немного запутался с маршрутизацией / модулями.Я создаю тестовое приложение, в котором мне нужны публичные и административные компоненты в разных модулях.Вот как выглядит мое приложение:

(все URL-адреса приведены только для пояснения)

Публичный модуль должен быть видимымлюбой, кто обращается к http://mywebsite.com,, должен получить доступ к модулю администратора через http://mywebsite.com/admin. Каждый модуль имеет компонент с именем WrapperComponent (который мне нужен, чтобы обернуть общие компоненты, такие как заголовки, панели навигации и т. д....) и он будет перемещаться по всем страницам в модуле администратора, в результате чего router-outlet будет необходимо в его HTML-файле.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from './modules/admin/admin.module';
import { PublicModule } from './modules/public/public.module';

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

app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'public',
    loadChildren: './modules/public/public.module#PublicModule'
  },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

public.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicRoutingModule } from './public-routing.module';
import { WrapperComponent } from './wrapper/wrapper.component';
import { HomeComponent } from './pages/home/home.component';

@NgModule({
  declarations: [HomeComponent, WrapperComponent],
  imports: [CommonModule, PublicRoutingModule]
})
export class PublicModule { }

public-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WrapperComponent } from './wrapper/wrapper.component';
import { HomeComponent } from './pages/home/home.component';

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

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

admin.module.ts и admin-routing.module.ts выглядят почти так же, какобщедоступный модуль.Я не буду добавлять его здесь, чтобы не расширять вопрос, но он доступен на GitHub .

Проблема

Я пытался сделать path: '', redirectTo: '/public'в app-routing.module.ts , но он не перенаправляет на общедоступный модуль.Когда я удалил этот маршрут из моего массива, загрузились обе оболочки (public и admin).Мне нужно сделать, как я объяснил выше, но я немного растерялся.Я читал некоторые другие вопросы здесь и Угловые документы для отложенной загрузки + Угловые документы для маршрутизации и навигации .

Заранее спасибо ~

Answer 1

В основном проблема в том, что вам нужно использовать lazy loading (это более простой способ, но если вы не хотите использовать lazy loading, это также возможно ) - и это свойство loadChildren вrouting module.

Так что app-routing.module.ts должно выглядеть так (проверьте правильные пути).

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'public',
    pathMatch: 'full'
  },
  {
    path: 'public',
    loadChildren: './modules/public/public.module#PublicModule'
  },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule'
  }
];

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

А также уберите PublicModule и AdminModule из imports в app.module.ts

Есть простой понятный примерленивых загрузочных модулей.