私のアプリケーションでAngular2 Rc5を使用していて、NgModuleでのルーティングに固執しました。角度2 NgMdouleとレイジーロードされたルーティングの問題
私のアプリケーションにはproductListComponenentとProductDetailComponenetという2つのコンポーネントがある製品モジュール(遅延ロードモジュール)というモジュールが1つあります。私もウェルカムページを持っています。
私がアプリケーションを起動すると、ウェルカムページが表示され、そこで製品ページに移動できます。そこから製品をクリックすると、製品の詳細ページに移動できます。
私が直面している問題は、ProductDetailページに直接ナビゲートできないことです。たとえば、このURLを参照できません。
http://localhost:58248/products/1
以下のようにルーティングするためのコードです。
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'products', loadChildren: 'app/products/product.module' }
];
export const appRoutingproviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);
product.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';
const appRoutes: Routes = [
{ path: '', component: ProductListComponent},
{ path: ':id', component: ProductDetailComponent },
];
export const routing = RouterModule.forChild(appRoutes);
私は直接それは私にエラーを与える詳細URLを参照します。添付の画像を参照ください。
どのようにWebサーバーを実行していますか?それは 'lite-server'のようなローカルサーバであるか、これは別のシステムによって提供されていますか?サイトを提供しているサイトはルートポイント(index.html)からサイトをロードしていないので、必要なJSファイルをロードしないようです。 別の例を挙げれば、私は自分のプロジェクト(開発側だけ)に 'gulp-serve'を使っています。パスを認識できなかった場合、 'index.html'をロードするためにフォールバックプロパティを設定に置かなければなりませんでした。そうすることで、他のパスにナビゲートしようとする前に、必要なJSをすべて読み込むことができます。 –
私はVisual Studio 2015を使用しており、IIS上でアプリケーションをホストしています。また、私は直接このURLを参照してもうまく動作します。 「http:// localhost:58248/products」 しかし、私は詳細ページの問題に直面しています。 –
ルートが正しくないようです。どちらの子供も同じルートを持っています。コードの重要な部分でプランナーを使って、もっと詳しく見ることができますか? – DeborahK