Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

最後に

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

yusukeito58
■25歳時に異業種からWeb系企業に転職、現在はフリーランスとして活動■ECサイトの開発が得意■バックエンド(PHP、Ruby、Python)がメイン、フロントエンドも少々■筋トレ、ゴルフ、読書が趣味■エンジニアとしてのキャリア、アプリ開発、書評をメインに発信しています。経歴や実績、お仕事のお問い合わせ👉 http://i-yusuke.com/portfolio/
http://i-yusuke.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away