web-dev-qa-db-ja.com

Angular 2ルーティングが空白のページを返し、エラーなし

私はSPAコードベースをangular 2.0.0から2.4.10（Angular router 3.4.10）にアップグレードしているところです。しかし今、最も奇妙なことが起こっています：いくつかのルートが機能します問題ありませんが、一部のルートは何も返さず（空白のコンポーネントなど）、デバッグのどのフロントにもエラーはまったく記録されません。

これが私たちの実装の蒸留バージョンです：メインの「サブ」ルートは遅延ロードされますが、次の子ルートはロードされたモジュールによって熱心にロードされます

例：

www.hostname.com/clients <- Lazy load
www.hostname.com/clients/details <- Eager loaded by the "Clients" module

メインのアプリルート（src/app/app.routing.ts）に次のコードがあります。

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

const appRoutes: Routes = [
  { path: 'clients', loadChildren: () => System.import('../clients/clients.module').then(m => m['ClientsModule']) },
  ...moreRoutes
];

export const appRouting = RouterModule.forRoot(appRoutes);

そして、（src /クライアント/clients.routing.ts）で：

import { Routes, RouterModule } from '@angular/router';
import { Clients } from './'; // I have a index.ts file that exports the component plus some more stuff, so loading from this relative path works just fine

const clientRoutes: Routes = [
  { path: 'test', component: Clients }, // for testing porpuses
  { path: '', component: Clients }, // "Normal" route that should work like in all my other modules
  ...MoreRoutes
];

export const clientsRouting = RouterModule.forChild(clientRoutes);

次に、clientsRou​​ting constがClientsModuleにインポートされ、imports：[]デコレータに渡されます。

これで、ルートwww.hostname.com/clientsは空白のコンポーネントのみを返します。ただし、ルートwww.hostname.com/clients/testは正常に機能します

今、私は何が悪いのか全くわかりません。 2つの異なるが類似したモジュール（1つは機能し、もう1つは機能しない）を比較しましたが、コーディングに大きな違いはありませんでした。

プロジェクト内のすべてのコンポーネントはこのように実装され、Angular 2.0.0で正常に動作します

編集：いくつかの詳細情報：

  • 私はいくつかのプラグインでwebpackを使用して、醜い、糸くず、その他のマイナーな調整を行っています。開発中は、webpack-dev-server（2.9.6）を使用して、本番環境と開発環境の両方の構成でコードをリッスンして再コンパイルします。この問題が発生します。低レベルの依存関係があるため、最初にWebpackを通過せずにアプリを実行することはできませんが、ここではWebpackが問題になるとは思わないので、念のために言及します。
  • このバグが発生してもリダイレクトは発生せず、（文字通り）何も起こらなかったように、そこにとどまります。
  • 私の主な焦点ATMは、testサブルートが''ルートと同じモジュールを指していることです。これは機能しますが、直接の''ルートは機能しません。 { enableTracing: true }を使用してルートをトレースしても、2つの間に違いはありません。
angularangular2-routinglazy-loadingupgrade
3
Leo Bottaro

エラーが見つかりました：

Clientsモジュール内にインポートしていたモジュールの1つは、''ルートを空のコンポーネント、つまり空白ページに上書きする別のルーティングモジュールをインポートしていました。

私がそれを見つけた方法：

Augury 、a chrome拡張機能をデバッグAngularアプリに使用すると、ルーターツリーが登録されるべきではないものであることがわかりました。 t。他のモジュールのルートを削除した瞬間、すべてが修正されました。

少し時間を取って、助けてくれたすべての人に感謝したいと思います。ここで得たヒントについては、すべて非常に役に立ちました。ありがとうございました！

7
Leo Bottaro

要するに（ただのヒントですが）

私は同様の問題に直面しました（アップグレード後もAngular BTW）、この単純な事実のために： インポート順序が重要です！ アップグレード中に整頓しようとするのは悪い考えです依存関係。

詳細

私のベースルーティングモジュールは次のようになっているため

@NgModule({
  imports: [RouterModule.forRoot([{ path: '**',   redirectTo: ''}])],
  exports: [RouterModule]
})
export class AppRoutingModule {}

インポートで他の機能モジュールの前に移動したとき、リクエストは自動的に ''にリダイレクトされ、コンポーネントをロードしませんでした。エラーなし。

@NgModule({
  imports: [
    AppRoutingModule,  // <= need to move that one at the end
    SomeFeatureModule,
  ],
  // more stuff ...
})
export class AppModule {}

もちろん、これはあなたのケースで何がうまくいかなかったのかを示すヒントにすぎません。コード全体を見ないと、はっきりとはわかりません。

0
Arnaud P

私の場合、index.htmlの基本要素のhrefが正しくありませんでした。 <base href="/">に修正し、機能しました。

0
Muizz Mahdy

私の問題は、ルーターのボタンがクリックされるまでCSSを非表示に設定していたことでした。コンテンツをフェードインするように設定する方法を変更する必要がありました。

0
Caleb Grams

これは誰かを助けるかもしれません：私は自分のウェブサイトをPHPからAngularに移動する過程にあり、同じ問題、つまり空白のページを経験しました。問題はPHP私のページのコードです。最後のビットが削除されるとすぐに、空白のページが消えました。

0
Milan