我在Angular 6中遇到了一个关于路由处理的微小变更问题

这是关于在开发过程中遇到的一个故事,基于Angular5的示例程序进行开发。
在Angular5转换为Angular6时,遇到了一些微小的更改问题,让我们陷入了困境。

编程

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

import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list/user-list.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', loadChildren: 'app/users/users.module#UsersModule' }
];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: 'list', component: UserListComponent },
  { path: 'detail/:user_id', component: UserDetailComponent }
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class UsersRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: 'list', component: UserListComponent },
  { path: 'detail/:user_id', component: UserDetailComponent }
];

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

错误内容

拒绝:错误:找不到模块”app/users/users.module”

点击链接时,浏览器控制台会输出错误,并且无法进行页面跳转的现象会发生。
※在Angular5中可以正常工作。

解决方案

通过将路径从app/users/更改为./user/,问题得到了解决。

  { path: 'users', loadChildren: './users/users.module#UsersModule' }

最终

在进行简单的修正时,由于先入为主地认为之前是正常工作的,所以陷入了困境。
虽然听说在主要版本升级中有重大的变更,但在信息充分显示之前,最好不要轻易使用新版本。至少希望保留一些兼容性……。

广告
将在 10 秒后关闭
bannerAds