Angular2 (Angular.io) AOT 部署到 IIS 8答案

【问题标题】：Angular2 (Angular.io) AOT deployment to IIS 8Angular2 (Angular.io) AOT 部署到 IIS 8
【发布时间】：2017-01-18 20:58:38
【问题描述】：

按照 Angular.io Tour of Heros 示例中概述的步骤，我已经为一个稍微简单的应用程序建模。

https://angular.io/docs/ts/latest/tutorial/

我也基于这个例子实现了AOT编译： https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

直接来自 Angular.io 网站的相当标准的东西。

在我的开发机器上，应用程序的 JIT 版本在 lite 服务器上运行良好。在我的开发机器上，应用程序的 AOT 版本在 lite 服务器上运行良好。

是啊！！！世界是有道理的！好的。现在是时候将应用程序移至我的 2012/IIS 8 开发服务器了。粗略地说，在 Angular.io 网站上没有执行此特定任务的说明，因此我必须做出一些假设。

我所要做的就是将 aot 文件夹的内容（基于 aot 示例）复制到我的开发服务器。
由于我不再使用lite服务器，我不需要复制bs-config.json文件。
包已转换为js、css和html文件。 IIS 将知道如何处理所有内容（我希望，我也看到了一些地图扩展。我很害怕）。

果然。我将文件移动到我的开发服务器。这没用。我不确定它是否是由于我需要完成某些步骤才能使 aot 在 IIS 上工作，是简单的还是两者兼而有之。我收到可怕的“意外令牌”错误。当我单击错误链接时，它会将我带到我的 index.html 中引用我的 build.js 文件的位置。

我认为这与 IIS 有关，因为它在我的本地计算机上使用 lite 服务器运行良好。

任何帮助或建议将不胜感激。

【问题讨论】：

所有东西都捆绑在 build.js 中，因此跨应用程序或 aot 文件夹复制是多余的。你真的只需要 index.html、build.js、shim.min.js、zone.min.js 和你的 css 文件。在我看来，汇总可能存在错误。您的 build.js 大小是否大于 0？
感谢您的回复：build.js 为 697KB。不确定它是否有帮助，但是，我可以使用 lite 服务器在本地机器上运行构建的应用程序。根据 aot 示例，构建过程不会报告任何错误，只是“'this'关键字”警告。

标签： angular iis-8 windows-server-2012 angular2-aot

【解决方案1】：

找到答案

我认为问题源于应用程序位于 Web 服务器上的虚拟目录中。它位于名为dashboard 的虚拟目录中。所以...我必须对 index.html 进行以下更改才能使其正常工作：将<base href="/"> 更改为<base href="/Dashboard">

将文件引用 <script src="dist/build.js"> 更改为 <script src="Dashboard/dist/build.js">

完整的 index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/Dashboard">
    <title>My Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Dashboard/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="dashboard/shim.min.js"></script>
    <script src="Dashboard/zone.min.js"></script>
    <script>window.module='aot';</script>
  </head>
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
  <script src="Dashboard/dist/build.js"></script>
</html>

希望这可以帮助其他一些可怜的失落的灵魂。问题还没有结束，现在我将处理刷新/未找到问题。好消息是似乎有很多关于这...

【讨论】：