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

时间:2018-07-09 09:15:15

标签: angular iis aspnetboilerplate

我正在尝试在IIS上部署Angular应用程序。当我在IIS中执行站点->右键单击->选择添加网站作为mywebapp时,它可以正常工作。但是,如果我在IIS中做为默认网站->右键单击->选择添加应用程序作为mywebapp,则无法使用。

在第一种情况下,应用程序的网址为http://localhost

第二种情况下,应用程序的网址为http://localhost/mywebapp

在第二种情况下,它在浏览器控制台中显示错误。

  

获取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>

部署应用的步骤:

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

1 个答案:

答案 0 :(得分:2)

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

在您的情况下,您已将基本路径设置为网站根目录(/,因此浏览器将尝试从inline.bundle.js({{1 }},因为您在IIS中使用localhost主机名。

如果要将应用程序托管在IIS的虚拟目录中,则需要将domain/inline.bundle.js元素设置为指向虚拟目录-在您的情况下为http://localhost/inline.bundle.js (请注意:结尾的正斜杠重要)。如果您使用的是Angular CLI,则可以使用<base>参数通过<base href="/mywebapp/">进行此操作。

请注意,如果以此方式设置基本路径,则只会影响用相对路径引用的资源,因此,必须使用不以ng build开头的路径来引用所有资产。对于Angular应用程序,这通常意味着路径应该是CSS和JavaScript的裸文件名,对于资产文件夹中发布的所有文件,其开头应为--base-href