LoginSignup
2
0

More than 5 years have passed since last update.

Angular6の地味な変更でRouting処理にハマった話し

Last updated at Posted at 2018-07-07

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' }

最後に

簡単な修正でしたが、以前は正常に動いていたという先入観からドハマりしました。
メジャーバージョンアップで壊滅的な変更があると聞いていましたけど、情報が出揃うまでは気軽に新バージョンを利用しないほうが良さそうです。せめて互換性は残しといてほしいかな・・・。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0