{"id":11665,"date":"2017-06-14T14:00:00","date_gmt":"2017-06-14T14:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=11665"},"modified":"2019-02-20T09:57:09","modified_gmt":"2019-02-20T16:57:09","slug":"tips-for-running-an-angular-app-in-iis","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/tips-for-running-an-angular-app-in-iis\/","title":{"rendered":"Tips for Running an Angular app in IIS"},"content":{"rendered":"

Laurie Atkinson<\/a>, Premier Developer Senior Consultant,<\/strong> A few tweaks are necessary to take an Angular app and move it to IIS. Here is a list of changes required to get everything running smoothly.<\/p>\n

\n

Using the Angular-CLI to generate an Angular SPA is an excellent way to scaffold out a well-organized application. This tool also includes a production build step that should allow you to xcopy<\/em> your application to the web server of your choice. \u00a0We\u2019ll start here and discuss the necessary modifications to successfully run your application in IIS.<\/p>\n

Use the Angular-CLI to create a production package<\/h2>\n

First decide whether the application will be located at the root in IIS (e.g. http:\/\/server-name<\/a>) or in a path below the root (e.g. http:\/\/server-name\/my-app<\/a>).<\/p>\n

If deploying to the root, run the Angular CLI build<\/em> command:<\/p>\n

\"cid:image003.jpg@01D2D304.8DBDECD0\"<\/p>\n

If deploying to a path beneath the root, run the Angular CLI build<\/em> command with the base-href<\/em> option set to the name of application directory.<\/p>\n

\"cid:image004.jpg@01D2D304.8DBDECD0\"<\/p>\n

The base-href<\/em> option modifies the base element in the index.html<\/em>, so it looks as follows. This is required for routing to work correctly.<\/p>\n

\"cid:image005.jpg@01D2D304.8DBDECD0\"<\/p>\n

Create an IIS web application<\/h2>\n

Add the web site, or application, or virtual directory to IIS and set the physical path to the location of the dist<\/em> folder created by the Angular CLI.<\/p>\n

\"cid:image006.jpg@01D2D304.8DBDECD0\"<\/p>\n

Any one of these three options shown below will work.<\/p>\n

\"cid:image007.jpg@01D2D304.8DBDECD0\"<\/p>\n

Install the URL Rewrite Module into IIS<\/h2>\n

This next step is required to support deep-linking, which is the capability for the user to navigate directly to a page by typing the route into the address bar instead of using the Angular routing. Deep-linking causes a problem for IIS because the URL that the user attempts to access is not known to the server and therefore the user receives a 404 response. The solution is for the server to always return the root of the application, even if the user requests a path within the application.<\/p>\n

Get the URL Rewrite Module installer here: https:\/\/www.iis.net\/downloads\/microsoft\/url-rewrite<\/a><\/p>\n

After installing you should see a new icon in the IIS Manager.<\/p>\n

\"cid:image008.jpg@01D2D304.8DBDECD0\"<\/p>\n

Add web.config file with a URL Rewrite rule<\/h2>\n

All requests to this web application that are not for files or folders should be directed to the root of the application. For an application or virtual directory under the default web site, the URL should be set to the alias, (e.g. \u201c\/MyApp\/\u201d). For a web site at the root of the server, the URL should be set to \u201c\/\u201d.<\/p>\n

<configuration><\/code><\/p>\n

<system.webServer><\/code><\/p>\n

\u00a0 <rewrite><\/code><\/p>\n

\u00a0\u00a0\u00a0 <rules><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0 <rule name=\"Angular Routes\" stopProcessing=\"true\"><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <match url=\".*\" \/><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <conditions logicalGrouping=\"MatchAll\"><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" negate=\"true\" \/><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <add input=\"{REQUEST_FILENAME}\" matchType=\"IsDirectory\" negate=\"true\" \/><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/conditions><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <action type=\"Rewrite\" url=\"\/MyApp\/\" \/><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <!--<action type=\"Rewrite\" url=\"\/\" \/>--><\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0 <\/rule><\/code><\/p>\n

\u00a0\u00a0\u00a0 <\/rules><\/code><\/p>\n

\u00a0 <\/rewrite><\/code><\/p>\n

<\/system.webServer><\/code><\/p>\n

<\/configuration><\/code><\/p>\n

Troubleshooting<\/h2>\n

Problem:<\/em><\/strong> Navigating directly to a route results in a 404.<\/p>\n

Solution:<\/em><\/strong> Make sure the web.config<\/em> is correct and the URL property in the web.config<\/em> matches both the base href<\/em> in the index.html<\/em> and the web application or virtual directory alias if necessary.<\/p>\n

Problem:<\/em><\/strong> Navigating directly to a route results in a 500 or an error message related to the web.config<\/em>.<\/p>\n

Solution:<\/em><\/strong> Install the URL Rewrite module.<\/p>\n

Problem:<\/em><\/strong> Navigating directly to a route displays a broken page and network\/console errors show 404 results for js<\/em> and css<\/em> requests.<\/p>\n

Solution:<\/em><\/strong> Verify that the base href<\/em> in the index.html<\/em> exactly matches the URL in the rewrite rule and that the slashes surrounding the name are not missing.<\/p>\n","protected":false},"excerpt":{"rendered":"

Laurie Atkinson, Premier Developer Senior Consultant, A few tweaks are necessary to take an Angular app and move it to IIS. Here is a list of changes required to get everything running smoothly. Using the Angular-CLI to generate an Angular SPA is an excellent way to scaffold out a well-organized application. This tool also includes […]<\/p>\n","protected":false},"author":582,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[122],"tags":[51,242,109,52],"class_list":["post-11665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-iis","tag-javascript","tag-laurie-atkinson"],"acf":[],"blog_post_summary":"

Laurie Atkinson, Premier Developer Senior Consultant, A few tweaks are necessary to take an Angular app and move it to IIS. Here is a list of changes required to get everything running smoothly. Using the Angular-CLI to generate an Angular SPA is an excellent way to scaffold out a well-organized application. This tool also includes […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/11665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=11665"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/11665\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=11665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=11665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=11665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}