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 {}
エラー内容
rejection: Error: Cannot find module "app/users/users.module"
リンクをクリックとブラウザのコンソールにエラーが出力され、画面遷移できない現象が発生します。
※Angular5では正常に動作します。
解決策
該当箇所のパスが悪いようでapp/users/~
を./user/~
に変更することで解決しました。
{ path: 'users', loadChildren: './users/users.module#UsersModule' }
最後に
簡単な修正でしたが、以前は正常に動いていたという先入観からドハマりしました。
メジャーバージョンアップで壊滅的な変更があると聞いていましたけど、情報が出揃うまでは気軽に新バージョンを利用しないほうが良さそうです。せめて互換性は残しといてほしいかな・・・。