角度4のルーティング

Question

この記事には角度4のタグが付いていますか？ ルーティング？私はそのタグを認識しています。私の問題は、角度4のルーティングと を行うことではなかった - それは私がしなかった間違いの質問cozであった その時に起こっていたことを理解しています。ここの解決策は 実際の角度4ルーティングに役立つ人を助けないので、 にそのようにタグ付けする必要があり、私はその変更を拒否し続けることに同意しません。私は繰り返し述べます：PHP、nodejs、distフォルダ、そして他のものを一切理解せずに、標準のホスティングパッケージを使用して角ウェブアプリケーションを起動しようとするのは誤りです。私は多くの人が似たような間違いを犯しているのを見ていますが、ウェブサイトの問題としてあまり知られていないほどルーティングの問題ではないことを知っておく必要があります。

角度4ルーティングが機能しません。

• 角度4のルーティングは角度2とは異なります。角度4のコメントで同様の問題に遭遇したことのある人のみ可能です。多くの変更があったように見え、2017年のガイドラインに従ってルーティングを設定しました。これに古いソリューションにフラグを付けることは、単に混乱と役に立たないです - 私は、私が使用したくない角度に新しいですし、唯一の4の経験を持っている、特にとしてHashLocationStrategy *

私は自分のドメインに移動し、使用することができます

私のメニューコンポーネントはページ間を移動することができますが、mydomain/homeを入力すると空白のページが表示されます。以前のバージョンのAngularについても同様の質問が他の人に聞こえていたようですが、新しい設定の人はいません。

私は非常に新しいんだ怖いapp.router.ts

で

import { routes } from './app.router'; 

app.module.tsで

と

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

import { HomeComponent } from './home/home.component'; 
import { ArtComponent } from './art/art.component'; 
import { MusicComponent } from './music/music.component'; 
import { EventsComponent } from './events/events.component'; 

export const router: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'art', component: ArtComponent }, 
    { path: 'music', component: MusicComponent }, 
    { path: 'events', component: EventsComponent } 
]; 

export const routes: ModuleWithProviders = RouterModule.forRoot(router); 

を持っています角に！

これらはクロームインスペクタでエラーです：

polyfills.71b130084c52939ca448.bundle.js:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. 
(anonymous) @ polyfills.71b130084c52939ca448.bundle.js:1 
firebug-lite.js:30396 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. 
getMembers @ firebug-lite.js:30396 
home Failed to load resource: the server responded with a status of 404() 

私はここと同様のビルドで問題に至るまで、この問題を縮小している：https://github.com/angular/angular-cli/issues/5113

はに満足のいく答えがあるように思えません。その質問 - もし私のビルド作業を行うために私の--base-hrefを指す場所を教えてもらえますか？

Answer 1

私の角のコードは問題ないと判明しました。問題は、私のホスティングプロバイダのサーバーにありました。 distパッケージに.htaccessファイルを含める必要がありました

Answer 2

あなたは@NgModuleデコレータとそこ輸入あなたのルート

例えば

@NgModule文では動作しません、次の（{

imports: [ 
    RouterModule.forRoot(routes)// provide your routes array here 
] 

}）

、 エクスポートを使用する必要がありますconstルート：ModuleWithProviders = RouterModule。forRoot（ルーター）;

Answer 3

方法 - 1

でapp.module.ts

. . . 

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




imports: [ 
RouterModule.forRoot([ 
{ 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
}, 
{ 
    path: 'home', 
    component: HomeComponent 
} , 
{ 
    path: 'art' , 
    component: ArtComponent 
} 

. . . 


]), 

法-2 がapp.router ::

. . . 
export const router: Routes = [ 
{ path: '', redirectTo: 'home', pathMatch: 'full'}, 
{ path: 'home', component: HomeComponent }, 
{ path: 'art', component: ArtComponent }, 
{ path: 'music', component: MusicComponent }, 
{ path: 'events', component: EventsComponent } 
]; 
. . . . 

わずか以下追加あなたのやり方であなたのapp.module.ts

import { routes } from './app.router'; 
. . . 
imports : [ 
RouterModule.forRoot(routers) 
] 

リファレンス:: Angular Routing and Navigation

それが動作しない場合は、私がコメントで知らせてください。