Почему маршруты с лениво загруженным модулем не доступны напрямую из адресной строки браузера? - PullRequest
Новая
       13

Почему маршруты с лениво загруженным модулем не доступны напрямую из адресной строки браузера?

0 голосов
/ 22 января 2020

Моя цель состояла в том, чтобы создать функциональный модуль, который я бы лениво загружал при активации определенного маршрута. Однако, следуя официальной документации Angular и добавив несколько дополнительных маршрутов для моего лениво загруженного модуля, я не смог получить к ним доступ напрямую из адресной строки, но сумел сделать это с помощью stati c routerLink в html.

Мой функциональный модуль, PatientModule 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PatientRoutingModule } from './patient-routing.module';
import { PatientHomepageComponent } from './patient-homepage/patient-homepage.component';
import { PatientProfileComponent } from './patient-profile/patient-profile.component';

@NgModule({
  declarations: [ 
        PatientHomepageComponent, 
        PatientProfileComponent   
  ],
  imports: [ 
        CommonModule, 
        PatientRoutingModule   
  ]})
  export class PatientModule { }

Его модуль маршрутизации, PatientRoutingModule 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PatientHomepageComponent } from './patient-homepage/patient-homepage.component';
import { PatientProfileComponent } from './patient-profile/patient-profile.component';


const routes: Routes = [
  { path: 'homepage', component: PatientHomepageComponent },
  { path: 'profile', component: PatientProfileComponent },
  { path: '', redirectTo: 'homepage', pathMatch: 'full' }
];

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

Мой root модуль, AppModule 

import { AppComponent } from './app.component';

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

И мой root модуль маршрутизации, AppRoutingModule 

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

const routes: Routes = [
  { path: 'patient', loadChildren: './patient/patient.module#PatientModule' }
];

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

Навигация в моем браузере на localhost: 4200 / Patient / Profile выдает мне кучу ошибок в консоли браузера, в которых говорится, что WDS отключен и что некоторые типы MIME неверны . Однако переход на localhost: 4200 / пациента перенаправил меня на localhost: 4200 / пациента / домашней страницы , как и ожидалось изначально, но также localhost: 4200 / пациента / странно не работает. Видя, что я только начал изучать Angular, я подумал, что сделал что-то не так и потратил почти 4 часа на то, чтобы попробовать разные способы, как это сделать, и наконец я попытался создать ссылки внутри моего AppRootComponent следующим образом: 

...
<main>
    <a routerLink='/patient'>No slash</a>
    <br>
    <a routerLink='/patient/'>Slash</a>
    <br>
    <a routerLink='/patient/homepage'>Homepage</a>
    <br>
    <a routerLink='/patient/profile'>Profile</a>
    <router-outlet></router-outlet>
</main>
...

А навигация по этим ссылкам загружает правильные компоненты и обновляет адресную строку.

Я запутался, почему маршрутизатор не обнаруживает изменение адресной строки и загрузку ожидаемого компонента. Я установил Augury в браузер Mozilla и вижу, что все эти маршруты существуют. Я нигде не могу найти объяснение этому поведению.

...