{"id":717,"date":"2022-08-07T12:37:34","date_gmt":"2022-08-07T12:37:34","guid":{"rendered":"https:\/\/turtleflyblog.com\/?p=717"},"modified":"2022-08-07T12:59:54","modified_gmt":"2022-08-07T12:59:54","slug":"deploy-angular-app-to-iis","status":"publish","type":"post","link":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/","title":{"rendered":"Deploy Angular App to IIS"},"content":{"rendered":"\n

Steps<\/strong><\/p>\n\n\n\n

1. Before deploying angular app to IIS, don\u2019t forget to download IIS URL Rewrite module. This will solve Angular app\u2019s route problems.<\/p>\n\n\n\n

2. When you deploy angular app to IIS server, type the command below in cmd console<\/p>\n\n\n\n

ng build –base-href “\/AngularTest\/” \u2013prod(<\/em>you can use any other name other than AngularTest)<\/em>. If the command executes successfully, there will be a folder named dist created in your Angular project. The folder includes all the files you need to deploy to IIS.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Create a new folder, copies the files generated in dist folder and moves these to the new folder. This new folder will be your new IIS application\u2019s source path. However, you can just make the dist folder to be the new application\u2019s source path. The reason for creating a new folder is that each time you run the deploy command, you may renew the web.config file\u2019s content in dist folder. Whereas, if you make the new folder to be your IIS application\u2019s source path, you can avoid the problem.<\/p>\n\n\n\n

4. Create a new application in your local IIS. Keep in mind that your IIS application\u2019s name need to be the same to the cli base href. For example in this article, I named AngularTest to be the name for base href, then the IIS application\u2019s name shall be the same too. Then choose the path that you want to be the source path of the application. It can be dist folder or other location path as well.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

5. Add URL rewrite role below in your web.config<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The diagram shown below is the figure you shall be able to see after successfully deployed.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Steps 1. Before deploying angular app to IIS, don\u2019t forget to download IIS URL Rewrite module. This will solve Angular app\u2019s route problems. 2. When you deploy angular app to IIS server, type the command below in cmd console ng build –base-href “\/AngularTest\/” \u2013prod(you can use any other name other than AngularTest). If the command […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-717","post","type-post","status-publish","format-standard","hentry","category-programming-2"],"yoast_head":"\nDeploy Angular App to IIS - Who said turtle cannot fly<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Deploy Angular App to IIS - Who said turtle cannot fly\" \/>\n<meta property=\"og:description\" content=\"Steps 1. Before deploying angular app to IIS, don\u2019t forget to download IIS URL Rewrite module. This will solve Angular app\u2019s route problems. 2. When you deploy angular app to IIS server, type the command below in cmd console ng build –base-href “\/AngularTest\/” \u2013prod(you can use any other name other than AngularTest). If the command […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/\" \/>\n<meta property=\"og:site_name\" content=\"Who said turtle cannot fly\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-07T12:37:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-07T12:59:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png\" \/>\n<meta name=\"author\" content=\"Joseph\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joseph\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/\",\"url\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/\",\"name\":\"Deploy Angular App to IIS - Who said turtle cannot fly\",\"isPartOf\":{\"@id\":\"https:\/\/turtleflyblog.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png\",\"datePublished\":\"2022-08-07T12:37:34+00:00\",\"dateModified\":\"2022-08-07T12:59:54+00:00\",\"author\":{\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172\"},\"breadcrumb\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#breadcrumb\"},\"inLanguage\":\"en-AU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png?fit=553%2C190&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png?fit=553%2C190&ssl=1\",\"width\":553,\"height\":190},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/turtleflyblog.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Deploy Angular App to IIS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/turtleflyblog.com\/#website\",\"url\":\"https:\/\/turtleflyblog.com\/\",\"name\":\"Who said turtle cannot fly\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/turtleflyblog.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-AU\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172\",\"name\":\"Joseph\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g\",\"caption\":\"Joseph\"},\"sameAs\":[\"https:\/\/turtleflyblog.com\/\/\"],\"url\":\"https:\/\/turtleflyblog.com\/author\/joseph\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Deploy Angular App to IIS - Who said turtle cannot fly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/","og_locale":"en_US","og_type":"article","og_title":"Deploy Angular App to IIS - Who said turtle cannot fly","og_description":"Steps 1. Before deploying angular app to IIS, don\u2019t forget to download IIS URL Rewrite module. This will solve Angular app\u2019s route problems. 2. When you deploy angular app to IIS server, type the command below in cmd console ng build –base-href “\/AngularTest\/” \u2013prod(you can use any other name other than AngularTest). If the command […]","og_url":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/","og_site_name":"Who said turtle cannot fly","article_published_time":"2022-08-07T12:37:34+00:00","article_modified_time":"2022-08-07T12:59:54+00:00","og_image":[{"url":"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png"}],"author":"Joseph","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joseph","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/","url":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/","name":"Deploy Angular App to IIS - Who said turtle cannot fly","isPartOf":{"@id":"https:\/\/turtleflyblog.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage"},"image":{"@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage"},"thumbnailUrl":"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png","datePublished":"2022-08-07T12:37:34+00:00","dateModified":"2022-08-07T12:59:54+00:00","author":{"@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172"},"breadcrumb":{"@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/"]}]},{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#primaryimage","url":"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png?fit=553%2C190&ssl=1","contentUrl":"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2022\/08\/Angular1-3.png?fit=553%2C190&ssl=1","width":553,"height":190},{"@type":"BreadcrumbList","@id":"https:\/\/turtleflyblog.com\/en\/2022\/08\/07\/deploy-angular-app-to-iis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/turtleflyblog.com\/en\/"},{"@type":"ListItem","position":2,"name":"Deploy Angular App to IIS"}]},{"@type":"WebSite","@id":"https:\/\/turtleflyblog.com\/#website","url":"https:\/\/turtleflyblog.com\/","name":"Who said turtle cannot fly","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/turtleflyblog.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-AU"},{"@type":"Person","@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172","name":"Joseph","image":{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g","caption":"Joseph"},"sameAs":["https:\/\/turtleflyblog.com\/\/"],"url":"https:\/\/turtleflyblog.com\/author\/joseph\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/comments?post=717"}],"version-history":[{"count":4,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/717\/revisions"}],"predecessor-version":[{"id":745,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/717\/revisions\/745"}],"wp:attachment":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/media?parent=717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/categories?post=717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/tags?post=717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}