Deploy Angular Application on IIS Part 2.
In this post, I am talking about deployment of angular 5 application on Internet Information Service.
NOTE: Your Angular Application is working in the Non-root folder on IIS
In our application usually, we are using Angular Router module for purpose of single page application.
While deploying it to production you will need to do some configuration.
this Article explain you steps required to deploy an Angular Router application On IIS.
What will be covered in this Article
l Create a new Angular CLI example project.
l Install URL Rewrite Module on IIS.
l Add web.config with URL rewrite rule.
l Publish application code using the base-href flag.
l Deploy application.
Create a new Angular CLI example project.
ng new hello-word
and simple run ng serve --open in localhost
It’s just a testing that generated Cli code is working fine.
Install URL Rewrite Module on IIS.
Add Web.config with URL Rewrite rule.
<configuration>
<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" />
</conditions>
<action type="Rewrite" url="/helloword/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I Added Url base as helloword it means our base URL will be
<action type="Rewrite" url="/helloword/" />
Now we want it to get included in our build folder so we can deploy it with our application. Let’s add it to the .angular-cli.json
"assets": [
"assets",
"favicon.ico",
"web.config"
],
Publish application code using the base-href flag
<base href="/">
This generated page will not work as it router will use “/” as the base for composing navigation URL’s and static assets will be looked in the current directory.
To resolve this problem here we use base-href flag with and the flag will get available in Index.html.
ng build --base-href /helloword/ --prod
Look into your Dist folder there is index.html file and web.config
Both files have the same URL “/helloword/”.
<base href="/helloword/">
<action type="Rewrite" url="/helloword/" />
Deploy Application
Give it to alias name and select your build (dist) folder path.
Now Simply Run And test your hosted application from
Manage Application > Browse