Angular 4 路由

Question

人们可以停止建议用 angular-4 标记这篇文章吗 路由？我知道那个标签。然而，我的问题是不做 使用 Angular 4 的路由 - 这是一个错误的问题，因为我没有 了解当时的情况。这里的解决方案不会 帮助需要实际 Angular 4 路由帮助的人，所以我不同意 应该这样标记，我将继续拒绝这种改变。我重申：在没有首先了解 PHP、nodejs、dist 文件夹和一大堆其他东西的情况下尝试使用标准托管包启动 Angular Web 应用程序是错误的。我看到很多人犯了类似的错误，但他们需要知道这与其说是路由问题，不如说是不了解网站问题，他们应该像我一样做，然后好好学习。

我的 Angular 4 路由不起作用。

• Angular 4 路由与 Angular 2 不同。请仅遇到与 Angular 4 类似问题的人发表评论。似乎发生了很多变化，我按照 2017 年指南设置了我的路由。标记旧的解决方案只是令人困惑和无益 - 特别是因为我是 Angular 的新手并且只有 4 的经验。我不想使用 HashLocationStrategy *

我可以导航到我的域，然后使用我的菜单组件在页面之间导航，但是当我输入 mydomain/home 时，我看到一个空白页面。看起来其他人对以前版本的 Angular 提出了类似的问题，但我看不到任何使用较新设置的人。

我有

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);

在 app.router.ts 中

恐怕我对 Angular 很陌生！

这些是 Chrome Inspector 中的错误：

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

您需要使用 @NgModule 装饰器并在那里导入您的路线

例如

@NgModule({

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

})

以下语句将不起作用， 导出常量路由：ModuleWithProviders = RouterModule.forRoot(router);

Answer 2

方法 - 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

如果它不起作用，请在 cmets 中告诉我。

Answer 3

我的 Angular 代码结果很好。问题出在我的托管服务提供商的服务器上。我需要在我的 dist 包中包含一个 .htaccess 文件