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: '', component: HomeComponent },
{ path: 'manage', component: ManageComponent },
{ path: 'manage/products', component: ProductComponent },
{ path: 'manage/products/:action/:id', component: ProductComponent },
{ path: 'manage/companies', component: 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.
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.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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With