Uncaught SyntaxError: Unexpected token < in inline.bundle.js:1 - Angular v4答案

【问题标题】：Uncaught SyntaxError: Unexpected token < in inline.bundle.js:1 - Angular v4Uncaught SyntaxError: Unexpected token < in inline.bundle.js:1 - Angular v4
【发布时间】：2018-06-23 18:10:03
【问题描述】：

部署到 IIS 后，我发现我的路由都不起作用，因此我研究然后发现 this question 其中说您必须添加对 web.config 的重写，我这样做了，并且路由现在正在运行。

这是我在开发模式下工作的一些路线，但在生产中：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'manage', component: ManageComponent },
  { path: 'manage/products', component: ProductComponent },
  { path: 'manage/products/:action/:id', component: ProductComponent },
  { path: 'manage/companies', component: CompanyComponent },
];

以及我在web.config 中所做的事情：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*"/>
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
        </conditions>
        <action type="Rewrite" url="/"/>
      </rule>
    </rules>
  </rewrite>
</system.webServer>

那么真正的问题是什么？当我刷新/重定向页面时会出现问题。经过一个小时的研究发现我在web.config 中编写的规则总是返回index.html，这就是我在以下文件中得到Uncaught SyntaxError: Unexpected token < 的原因：

inline.bundle.js:1
polyfills.bundle.js:1
styles.bundle.js:1
vendor.bundle.js:1
main.bundle.js:1

你建议如何解决这个问题？

更新：通过从路由中删除manage 解决了无参数路由的问题，但包含参数的路由问题仍然存在。

【问题讨论】：

After an hour research found out that the rule I wrote in web.config always returns index.html - 好吧，不要那样做
@JaromandaX 如果我不这样做，我应该怎么做才能让我的路线正常工作？
看不到你做了什么，你可能做错了
@JaromandaX 我已经添加了我的路线，请看一下。
您是否看到过 IIS（条件）的这种配置？ angular.io/guide/deployment#production-servers

标签： javascript angular iis deployment unexpected-token

【解决方案1】：

遇到了同样的问题。通过将 index.html 中的基本 href 标记更改为完全限定的基本 url 来修复。

之前：

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

之后：

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="http://MyUrl.com/MySubApp/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

不是 100% 清楚为什么，但似乎 IIS 重写 url 的方式改变了通过基本根目录的方式，这破坏了相对路径“/”base-href。

【讨论】：

我有同样的问题，这解决了它......但我只把我的应用程序的目录放在 IIS 服务器上。我现在在构建 Angular 6 应用程序时调用 ng build --configuration=prodcution --base-href='/app_folder/'。
我感觉上面的代码如果你只用<base href="/MySubApp/">就可以了