Angular 4路由

Question

難道人們不再建議這個帖子被標記爲angular-4 routing？我知道那個標籤。然而，我的問題並不是做了 與Angular 4的路由 - 這是一個錯誤的問題，因爲我不知道當時正在發生什麼。這裏的解決方案不會幫助那些想要獲得實際的Angular 4路由幫助的人，所以我不同意它應該被標記爲這樣，我會一直拒絕這種改變。我重申：嘗試使用標準託管軟件包啓動角度網絡應用程序是不對的，因爲它沒有先理解PHP，nodejs，dist文件夾和其他一些東西。我看到很多人犯類似的錯誤，但他們需要知道這不是路由問題，而是一個不知道的網站問題，他們應該像我一樣做，並扣下來，學習東西。

我的角度4路由不起作用。

• Angular 4的路由與Angular 2不同。請只能遇到類似Angular 4評論的用戶。似乎有很多變化，我遵循2017年指南設置了路線。下垂老的解決方案，這只是混亂和無能 - 尤其是我新的角度和僅有的4經驗，我不想使用HashLocationStrategy *

我可以瀏覽到我的域名，然後用我的菜單組件在頁面之間導航，但是當我輸入mydomain/home時，我看到一個空白頁面。看起來像其他人問過有關以前版本的Angular的類似問題，但我無法看到任何具有較新設置的人。

我

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

在app.module.ts在app.router.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); 

我怕我很新以角度！

這些都是在Chrome檢查錯誤：

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

我的Angular代碼證明沒問題。問題是與我的託管服務提供商的服務器。我需要在dist包中包含一個.htaccess文件

Answer 2

你需要使用@NgModule裝飾和進口路線有

如

@NgModule（{

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

}）

下面的語句將無法正常工作， 出口const routes：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

如果它不工作，讓我知道在評論中。