After deployment to IIS I found out that none of my routes work, Hence I researched then found this question in which says that you have to add a rewrite to web.config, which I did and routes are working now.

Here is some of my routes that work in development mode, but in production :

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

And what I did in 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>

So what the actual problem is? The problem raises when I refresh/redirect the page. After an hour research found out that the rule I wrote in web.config always returns index.html and that's why I get Uncaught SyntaxError: Unexpected token < in the following files :

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

What do you suggest to fix this?

Update: By removing manage from routes fixed the problem for routes without parameter, but the problem is still there for routes containing parameter.

After deployment to IIS I found out that none of my routes work, Hence I researched then found this question in which says that you have to add a rewrite to web.config, which I did and routes are working now.

Here is some of my routes that work in development mode, but in production :

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

And what I did in 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>

So what the actual problem is? The problem raises when I refresh/redirect the page. After an hour research found out that the rule I wrote in web.config always returns index.html and that's why I get Uncaught SyntaxError: Unexpected token < in the following files :

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

What do you suggest to fix this?

Update: By removing manage from routes fixed the problem for routes without parameter, but the problem is still there for routes containing parameter.

• javascript
• angular
• iis
• deployment
• unexpected-token

Share Improve this question Follow edited Jan 15, 2018 at 7:13 Hooman L asked Jan 15, 2018 at 5:38 Hooman LHooman L 16122 silver badges99 bronze badges 6

• After an hour research found out that the rule I wrote in web.config always returns index.html - well, don't do that – Jaromanda X Commented Jan 15, 2018 at 5:39
• @JaromandaX so what should I do to make my routes work if I don't do that? – Hooman L Commented Jan 15, 2018 at 5:43
• can't see what you did, you probably did it wrong – Jaromanda X Commented Jan 15, 2018 at 5:44
• @JaromandaX I've added my routes, please take a look. – Hooman L Commented Jan 15, 2018 at 5:46
• Have you seen this configuration for IIS(conditions)? angular.io/guide/deployment#production-servers – yurzui Commented Jan 15, 2018 at 5:53

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Had this same problem. Fixed by changing my base href tag in index.html to the fully qualified base url.

Before:

<!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>

After:

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

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="http://MyUrl./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>

Not 100% clear why exactly, but it appears the way IIS rewrites urls changes how the base root gets passed which was breaking the relative path "/" base-href.