How to Upload Angular App to Internet
Getting your Angular Router application really working in a non-root binder on Cyberspace Information Services
The Angular Router is a fantastic module for Single Folio Apps. Even so, to deploy it in a Production scenario you will typically need to do some configuration to make information technology work. This article details the steps necessary to deploy an Athwart Router application anywhere on Internet Information Services (IIS).
Hither is a quick overview of what is covered in this article:
- Use the Athwart Tour of Heroes every bit a sample Angular Router awarding.
- Install IIS with the URL Rewrite Module .
- Deploy Tour of Heroes to the web root in IIS.
- Deploy Tour of Heroes to a specific sub-folder in IIS using the base-href flag.
- Use a spider web.config file to leverage the Athwart Router when deploying to a sub-folder in IIS.
Case: Tour of Heroes
For a physical example of the steps involved I volition use the Angular Tour of Heroes tutorial application. Yous can download a complete version from the Introduction page. Extract information technology to a folder called toh.
Go to your toh folder and exercise an: npm install
Because we are deploying to IIS, I assume you probably also want this to work on Internet Explorer. So, you have a few extra steps here. You need to open the file: toh\src\polyfills.ts and un-comment all the imports in at that place. Annotation: in the comments in that location are some extra npm installs:
<> Copy
npm install --save classlist.js npm install --save web-animations-js
Once this completes we can exam our Tour of Heroes awarding in our development environment by running:
<> Copy
ng serve
Point your browser at:
http://localhost:4200
You should run across the Tour of Heroes awarding in all its glory.
Tour of Heroes uses the Angular Router so you tin can click on Dashboard and Heroes and come across the view modify in the application. Observe that even though this is a Single Folio App, the URL in the browser is getting updated to match our view. Refreshing, clicking the back push, and even copying and pasting a link direct into another tab all piece of work because the Athwart Router takes care of all the heavy lifting for us.
Setup Internet Data Services
To mimic a Production Environment we volition deploy our Tour of Heroes awarding to IIS and so:
- Install Cyberspace Data Services.
- Install the URL Rewrite Module
If you lot are only interested in deploying your application to the Web root, you tin skip this step.
Simple Deployment
Of course in production yous won't utilize ng serve, then let's do a product build using:
<> Copy
ng build --prod
This builds your application and outputs it to your outDir defined in .angular-cli.json. By default this will exist toh\dist.
You can take the contents of this folder and drop it into the root of your Web server and everything volition work only fine. For example, on my system IIS is installed in C:\inetpub and hence the default web root is C:\inetpub\wwwroot. After edifice: deploy your application by copying the contents of your toh project's dist binder into the wwwroot folder.
Signal your browser at: http://localhost and you should encounter the Tour of Heroes dashboard once more. Discover this fourth dimension we don't include the port in the URL because past default IIS runs on port 80.
That was easy! Just, what if nosotros want to deploy to a sub-folder in our Web Server?
Deploying into a Sub-folder
Unfortunately, deploying an Angular Router app to a web folder other than the root requires a bit more effort.
To avert confusion, remove all the files from your IIS wwwroot. At present permit's create a folder in our web root called toh. Mine looks like this: C:\inetpub\wwwroot\toh. Re-create the contents of of your projection's toh\dist folder to your IIS wwwroot\toh folder.
At present if we try to apply the Bout of Heroes application by going to http://localhost/toh/alphabetize.html we will get a 404 error in the console.
The base-href Flag
In the Athwart Deployment page it discusses the base of operations tag. The base tag tells our Angular application where it will exist deployed. Later in this commodity we will explore ways to make our deployments more flexible, only for now let's build our Bout of Heroes application again. Except, this fourth dimension we will apply the
base-href flag to tell ng build that we volition be deploying to the toh folder in our web server:
<> Copy
ng build --base-href "/toh/" --prod
When that completes, copy the contents of of your project's toh\dist folder into your IIS wwwroot\toh folder. Now if you go to http://localhost/toh/index.html
you should run into the application and be able to follow the router links by clicking on Dashboard and Heroes .
However, we aren't home yet. If yous attempt to refresh the folio, past striking F5 for example, yous will get an error. That'due south because our web server is getting Angular Router URLs that it isn't set up to handle. So, we need to add some configuration that tells our spider web server how to fallback to our index.html folio so the Angular Router can handle those URLs for the states.
Server Configuration with web.config
The configuration necessary is somewhat documented on the angular Deployments folio in the Server Configuration section. Unfortunately, it is rather light on the details. We will get through footstep by stride instructions to get this working.
In our project in toh\src we need to create a web.config file with the following content:
<> Copy
<?xml version="1.0" encoding="utf-eight"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" stopProcessing="true"> <match url=".*" /> <weather condition logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <activity blazon="Rewrite" url="./index.html" /> </rule> </rules> </rewrite> </arrangement.webServer> </configuration>
Note there isn't anything specific to the Tour of Heroes application in there except that our main fallback file is alphabetize.html. So, this will work for any Athwart application.
We want this to get included with our build so nosotros can deploy it with our Bout of Heroes application. And then, allow's add it to the assets in our project'southward
.angular-cli.json file similar this:
<> Copy
"avails": [ "avails", "favicon.ico", "web.config" ],
Permit's build again:
<> Copy
ng build --base of operations-href "/toh/" --prod
We verify that web.config is getting copied to our dist folder. Now deploy our awarding by copying the contents of dist to our IIS wwwroot\toh folder. In the browser go to http://localhost/toh/index.html
At present our Bout of Heroes awarding routes correctly and we can refresh. Also, if nosotros copy a URL and paste it into another browser window information technology works only fine. And so, we tin run into that our Angular Router awarding is supporting deep links similar we intended.
Summary
The Angular Router is a powerful library for enabling Single Folio Apps. Deploying applications to the web root is footling. With some configuration we tin additionally support flexible deployments to anywhere in our IIS web server.
Source: https://indepth.dev/posts/1239/deploy-an-angular-application-to-iis
Post a Comment for "How to Upload Angular App to Internet"