Angular 4 路由

Question

Could people stop suggesting this post be tagged with angular-4 routing? I am aware of that tag. My problem, however, was not to do with the routing of Angular 4 - it was kindof a mistake question coz I didn't understand what was going on at the time. The solution here will not help people who want help with actual Angular 4 routing so I disagree that it should be tagged as such and I will keep rejecting that alteration. I reiterate: It was a mistake to try to launch an angular web-app using a standard hosting package without first understanding PHP, nodejs, the dist folder and a whole bunch of other stuff. I see a lot of people making similar mistakes, but they need to know it is not routing problem so much as a not-knowing-about-websites problem, and they should just do as I did and buckle down and learn stuff.

我的 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

事实证明，我的 Angular 代码没有问题。问题出在我的托管服务提供商的服务器上。我需要在我的 dist 包中包含一个 .htaccess 文件