无法在 IIS 上部署 Angular 应用程序答案

【问题标题】：Cannot deploy Angular application on IIS无法在 IIS 上部署 Angular 应用程序
【发布时间】：2018-07-09 09:15:14
【问题描述】：

我正在尝试在 IIS 上部署 Angular 应用程序。当我在 IIS 中执行 Sites -> RightClick -> Select Add Web Site as mywebapp 时，它会起作用。但是，如果我在 IIS 中执行 Default Web Site -> RightClick -> Select Add Application as mywebapp，则它不起作用。

第一种情况，应用的Url是http://localhost。

在第二种情况下，应用程序的 URL 是 http://localhost/mywebapp

在第二种情况下，它会在浏览器控制台中出现错误。

GET http://localhost/scripts.bundle.js 404（未找到）

所以错误理解为我的应用程序正在尝试访问http://localhost/scripts.bundle.js，但它不存在，它应该在第二种情况下访问http://localhost/mywebapp/scripts.bundle.js。

启动页Index.html的HTML。

<!doctype html>
<html lang="en" dir="ltr" style="height:100%">
<head>
    <meta charset="utf-8">
    <title>mywebapp</title>
    <base href="/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="author" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.dataTables.net/1.10.15/css/jquery.dataTables.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="theme-red">
    <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

部署应用的步骤：

在命令提示符下从 Angular 文件夹运行 ng build。
将 dist 文件夹文件复制到某个 abc 文件夹中。
将 abc 文件夹添加为虚拟目录。

【问题讨论】：

标签： angular iis aspnetboilerplate

【解决方案1】：

当您的标记中有标签时，这是一条指示浏览器始终尝试加载资源使用相对路径引用相对于在href 元素中指定的绝对路径<base> 元素，而不是将这些相对路径视为相对于当前 URL 的默认行为。

在您的情况下，您将基本路径设置为站点根目录 (/)，因此浏览器将尝试从 domain/inline.bundle.js (http://localhost/inline.bundle.js) 加载相对路径 inline.bundle.js，因为您正在使用本地主机IIS 中的主机名）。

如果要将应用程序托管在 IIS 的虚拟目录中，则需要将 <base> 元素设置为指向虚拟目录 - 在您的情况下，<base href="/mywebapp/"> 在部署到虚拟目录时（注意：尾部正斜杠重要）。如果您使用的是 Angular CLI，则可以通过 ng build 使用 --base-href 参数来执行此操作。

请注意，如果您以这种方式设置基本路径，它只会影响使用相对路径引用的资源，因此所有资源都必须使用不以/ 开头的路径进行引用。对于 Angular 应用程序，这通常意味着路径应该是 CSS 和 JavaScript 的裸文件名，对于资产文件夹中发布的任何文件，路径都应以 assets/ 开头。

【讨论】：

重要的最后评论。如果我使用 3rd 方框架并且它在其 CSS 中的任何地方都使用“/assets/...”路径而不是“assets/...”，我需要做什么，所以当我的 Angular 应用程序时找不到相应的图像是否作为 Web 应用程序发布到 IIS？是否有一些设置可以一次覆盖它？