Get I.T. Going: Deploying angular 4 application in IIS

There are 2 ways for deploying an angular app in IIS, one is as a separate web application and the other as a sub application to an existing web site(Default Web Site in this tutorial). Both of these methods are illustrated below one by one:-

Deploying as a separate web application :-

Note that this post assumes that you already knows how to create and run an angular 4(+) application and you are already having an angular application that you intend to deploy, if not then follow this tutorial on the angular site to get started with. So now as the first step of deployment we need to add a Website in IIS. For that open IIS on your system then right click on server name under the Connections tab then select Add Website (highlighted in the below image).
On the pop-up that opens up enter a Site name, then enter or browse to the physical path where you will keep the published angular files, then change the Port or you can leave it to default if it is not occupied by some other site and then click OK. After that you will see that a new website has been added to Sites list with the Site name that you entered in the pop-up.
Now the next step is to build your angular application in production mode, below is the command for that:-

ng build --prod --env=prod

It might be possible that your application will not build successfully with the above command (although it was building successfully with "ng build" command) and give errors like "Property 'X' is private and only accessible within class 'XYZComponent'" and "Property 'X' does not exist on type 'XYZComponent'" this is because --prod meta-flag uses Ahead of Time (AOT) compilation (to know what else --prod meta-flag does follow the link) which requires that all the members (properties, methods, injected services etc.) of a component that are accessed by its template must be public.

So if you intend to use AOT compiler then go on make the members of the components public or if you are fine with JIT (Just in Time) compilation then you can leave your code as it is and use the below command :-

ng build --prod --aot=false --env=prod
After the application is built successfully copy the contents of dist folder of the application to the folder whose physical path you provided in Step 2.

Now we need to add a web.config file to the application folder (the one whose physical path you provided in IIS). So create a web.config file in the application folder and copy the following content to it.
```
<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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>
```
The reason we added this web.config file is because of the URL Rewrite rule that tells the server to redirect all the requests to this web application (except those that are for files or folders). For an application that is hosted as a separate website the rewrite URL should be set to "/".

All set to go, now again go to IIS and then right click on the Website that you added under Sites in steps 1 and 2 then go to Manage Website and then click on Browse as is shown in the image below.
It might be possible that you get an error when you try to navigate through specific sections of the website by typing the url into the address bar instead of navigating through the site using the angular routing. In that case installing the URL Rewrite module extension to IIS will resolve the issue. You can download URL rewrite module extension from here.

Deploying as a sub application to an existing web site :-

Deploying the angular app as a sub application is quite similar to deploying it as a separate website with a few small changes, the detailed steps are as follows. First of all we need to add an application in IIS. For that open IIS on your system then go to Sites > Default Web Site right click on Default Web Site then select add application (highlighted in the below image).
On the pop-up that opens up enter an Alias (let it be "AngularApp") and then enter or browse to the physical path where you will keep the published angular files, then click OK. After that you will see that a new application has been added to Default Web Site list with the alias name that you entered in the pop-up.

Now the next step is to build the application in production environment, below is the command for that :-

ng build --prod --base-href=/AngularApp/ --env=prod

Note that the above command is similar to the one used while publishing as a standalone website except that we have used an additional --base-href build flag, the --base-href build flag sets the href of base tag in index.html to "/AngularApp/" i.e. the alias of the application that you added in IIS in previous step. To get an idea of what base tag does follow the link.

Again as was the case with separate website deployment, if you intend to use AOT compiler then make the members of the components public or if you are fine with JIT (Just in Time) compilation then just use the below command :-

ng build --prod --base-href=/AngularApp/ --aot=false --env=prod
After the application is built successfully copy the contents of dist folder of the application to the folder whose physical path you provided in Step 2.

Now again add a web.config file to the application folder (the one whose physical path you provided in IIS). So create a web.config file in the application folder and copy the following content to it.

<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="/AngularApp/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Notice that this time the rewrite URL is set to the application alias ("AngularApp") that you provided in step 2 (unlike separate website deployment where we set rewrite URL to "/" ).

All set to go, now again go to IIS and then right click on the application that you added under Default Web Site in steps 1 and 2 then go to Manage Application and then click on Browse (same as we did with separate website deployment).

Deploying angular 4 application in IIS

Deploying as a separate web application :-

Deploying as a sub application to an existing web site :-

1 comment: