Deploy Dotnet Core API and Angular 5 on IIS - PART 2

Deploy Dotnet Core API and Angular 5 on IIS - PART 1

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.

l If you did not install IIS on your system then Install Internet Information Services.

l Install The URL Rewrite Module 

Add Web.config with URL Rewrite rule.

The server configuration requirement is documented on the Angular Deployments page in the Server configuration section    

<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

http://localhost/helloword/index.html, and the rest of the routes will be open with this.

  <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

Angular Deployment page is explaining the Base Tag

<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

Deploy Dotnet Core API and Angular 5 on IIS - PART 1