How and what to deploy Angular2 to IIS - iis

Question

Take for instance angular2-quickstart. What files need to be deployed and what settings need to be set to launch this web app from IIS?
This is a Typescript tutorial that I have opted to compile to JavaScript.

Answer 1

Setting up Angular 2 for me was quite an issue because the HTML5 routes (without a hashbang) weren't working.
To get an Angular2 project working on an IIS environment without serving it using the Angular-CLI (you still need it to build it!):
After you're finished with development on your project, you'll need to build (or compile) it to a different environment. If you need to set that up, read this.
The shortest build command you need is:
ng b
In your build folder (if you didn't add an external/different folder, this will be the 'dist' folder in your project), copy the contents to your IIS server.
Ensure the folder of your IIS server has the needed permissions for the IIS_IUSRS group and IUSR user to access it. (Right click on the folder -> Properties -> Security -> Edit -> Add, and type those in. You can click the 'Check Name' button to ensure it's the correct ones you're typing in)
The next issue you need to tackle is getting a web.config file to put in your server folder to fix routing issues.
If we were working with Apache, we would need an .htaccess, but for IIS, we're using a web.config. The one found here worked for me if your application is routing from the root directory of your server.
(Note: As reminded by #Demortes, this will require an additional module to be added to your IIS environment called URLRewrite)
This (web.config) file goes in the root directory of your server.
Hope this helps anyone who had similar issues to me :)
Cheers.

Answer 2

Download and install IIS rewrite plugin https://www.iis.net/downloads/microsoft/url-rewrite
Create application under default website.
Create a folder in c:\inetpub\wwwroot to host the application
After step 8 copy dist folder contents to c:\inetpu\wwwroot\
Before build in index.html change base href="/" to base href="//"
To skip steps 1,2 and 3 for every new build check out step 9 as alternative to step 8
Web config structure.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" >
<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="/<appname subfolder>/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Note: Create a Web.config in src folder and add a reference to it in angular-cli.json in assets section so that it gets copied over during each build. -
Otherwise you will have manually create this file every time ng build is used.
not applicable
In angular-cli.json put web.config in assets block
"assets": [
"assets",
"favicon.ico",
"Web.config"
],
In angular-cli.josn put custom css path example so that it will be packaged in styles..bundle.cs
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/site.css",
"assets/page.css",
"assets/menu.css",
"styles.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
],
If you have custom scripts put those path under scripts section example
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"index.js"
],
ng build --prod
Note: ng build --prod starts AOT (ahead of time compilation) by default in latest version of angular-cli
Note: ng build command deletes dist folder and recreates that folder every time you ng build command
Alternative build command:
ng build --prod --output-path 'C:\inetpub\wwwroot\<appname subfolder>' --base-href /<appname subfolder>'/
a- if you don't want to manually update base-href in index.html
b- if you don't want to copy dist folder and wwwroot folder of app.
Note1: Following command will only work if you open visual code (or any terminal app) with administrative privileges. Otherwise mkdir command to create output folder in wwwroot will fail.
Note2: You still need to update Web.config with . See step 4
Note3: Checkout slash / at both starting and end of --base-href /'/
Check direct quote from one of the posting. Not sure if changing security privileges of IIS_IUSRS group and IUSR user for ...wwwroot\
as described in one of the web links is required. May be it is not required but I am highlighting it over here for you to keep in mind.
Direct quote from another use : " Ensure the folder of your IIS server has the needed permissions for the IIS_IUSRS group and IUSR user to access it. (Right click on the folder -> Properties -> Security -> Edit -> Add, and type those in. You can click the 'Check Name' button to ensure it's the correct ones you're typing in)"
References :
- How and what to deploy Angular2 to IIS
- https://www.youtube.com/watch?v=K0XORWxG11k

Answer 3

The webapp itself needs no server intelligence, as it is just static files - web assets ( *.js, *.html files etc). The static files are what angular2-quickstart generates as output of its build process, which you run in your dev environment (probably locally on your personal computer). The dev environment will need node (+ npm). And infact, you can test this tutorial on your local dev environment without the need for any external server.
edit:
If u look in the package.json u can see it has lite-server:
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
Lite server is a small server that simulates a simple (web) file server.
Lightweight development only node server that serves a web app, opens
it in the browser, refreshes when html or javascript change, injects
CSS changes using sockets, and has a fallback page when a route is not
found.
To give you an answer, to serve your app with IIS, you only need http://docs.asp.net/en/latest/fundamentals/static-files.html

Answer 4

I have created a small github project that has Angular2 current as of today (10/13/2016) that runs in IIS 7.5 with routing and under ng serve.
It does use the hash based URL strategy.
It uses angular-cli, the read me has details on how to setup under IIS or ng serve.
https://github.com/howserss/Angular2-IIS-sample-app

Answer 5

Angular 2 routing (with hash) will work without any issue on IIS. Just create default URL rewrite rule which will redirect all the requests to index.html file of your angular app. Rule will redirect all requests to index.html except for required js files and actual angular app urls (i.e. index.html or index.html#/{route-value}.
EX:
<rules>
<rule name="Default">
<match url="(.* ).js|index.html(.*)" negate="true" />
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
Angular 2 routing (without hash) will not work with IIS.
In case of pure HTML application IIS will be routing the incoming request and it will redirect the request to error page if such page does not exist at that location.
In case of .Net MVC application you can create a default route to handle all the incoming request url's and redirect it to your angular index view.
Ex Route for MVC application:
routes.MapRoute(
name: "Angular",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new { url = new AppFeatureUrlConstraint() }
public class AppFeatureUrlConstraint : IRouteConstraint
{
public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
{
if (values[parameterName] != null)
{
var url = values[parameterName].ToString();
if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
return true;
else
return false;
}
return false;
}
}

Answer 6

Here is a nice and detailed explanation for deploying angular app in IIS. The summarized steps for publishing as a separate website are as follows:-
Create a web site in IIS, lets say the physical path you provided for this web application is C:\Publish.
publish you angular app using the below command:-
ng build --prod
After the application is built successfully copy and paste the contents of dist folder to C:\Publish folder.
Add web.config file to folder C:\Publish with following contents:-
<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>
All done, now just go to IIS and browse your web-site, you will see it working.

Answer 7

after you build it, copy all files in dist fold put in a fold in your IIS server, it only contains html, css and js files, so just host it like a static website.
It works for any web server, no matter Apache, IIS or nginx.