在部署中提供 Angular2 应用程序（由 Angular CLI 构建）答案

【问题标题】：Serving the Angular2 app (built by Angular CLI) in deployment在部署中提供 Angular2 应用程序（由 Angular CLI 构建）
【发布时间】：2016-09-17 06:33:32
【问题描述】：

我使用 Angular CLI 构建了一个 Angular2 应用程序，其中包含许多路由。该应用程序运行良好。我可以使用链接、使用 URL 或使用路由器的导航功能导航到所有路由。我可以随时在任何路线的浏览器中刷新页面。

但是，当我尝试使用单独的 Web 服务器（在 dev 上的 IDE 服务器或生产中的 express/nginx/apache2 中的括号）从 dist/index.html 为我的应用程序提供服务时，应用程序路由行为是不同的。

应用程序流程运行良好，但是当涉及直接点击 URL（对于任何路由）或在任何路由应用程序上刷新页面时显示 Cannot GET /dashboard 错误。这里 dashboard 是我的路线名称。在任何现有路由页面上刷新页面时，我都会遇到相同的错误。

我猜应用程序仅从 index.html 正确引导，而不是从应用程序中的任何位置引导。

我做错了什么请帮忙。

index.html

 <script>
        System.import('system-config.js').then(function () {
          System.import('main');
        }).catch(console.error.bind(console));
      </script>

main.ts

bootstrap(NgUnityAppComponent, [ HTTP_PROVIDERS， ROUTER_PROVIDERS ]);

ng-unity.component.ts 文件

 import { Component } from '@angular/core';
    import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
    import {APP_ROUTES} from './ng-unity.routes';
    import { NavbarComponent, FooterComponent, AboutUsComponent } from './shared/index';
    import {NavbarService} from './shared/navbar/navbar.service';
    @RouteConfig(APP_ROUTES)
    @Component({
        moduleId: module.id,
        selector: 'ng-unity-app',
        templateUrl: 'ng-unity.component.html',
        styleUrls: ['ng-unity.component.css'],
        directives: [ROUTER_DIRECTIVES, NavbarComponent, FooterComponent],
        providers:[NavbarService]
    })
    export class NgUnityAppComponent {

    }

我做错了什么？请帮忙。

【问题讨论】：

stackoverflow.com/questions/31415052/…这说明了原因和解决方法。

标签： angular angular2-routing

【解决方案1】：

确保将其放置在 index.html 的 head 元素中：

Angular2 路由和导航文档中的示例在头部使用以下代码（他们在文档的实时示例注释中解释了原因）：

document.write('');

当您刷新页面时，这会将基本 href 动态设置为您当前的 document.location。

【讨论】：