How do you deploy Angular apps?

Question

How do you deploy Angular apps once they reach the production phase?

All the guides I've seen so far (even on angular.io) are counting on a lite-server for serving and browserSync to reflect changes - but when you finish with development, how can you publish the app?

Do I import all the compiled .js files on the index.html page or do I minify them using gulp? Will they work? Do I need SystemJS at all in the production version?

Envious

Answer 1

You are actually here touching two questions in one.

The first one is How to host your application?.
And as @toskv mentioned its really too broad question to be answered and depends on numerous different things.

The second one is How do you prepare the deployment version of the application?.
You have several options here:

1. Deploy as it is. Just that - no minification, concatenation, name mangling, etc. Transpile all your ts project copy all your resulting js/css/... sources + dependencies to the hosting server and you are good to go.

2. Deploy using special bundling tools, like webpack or systemjs builder.
   They come with all the possibilities that are lacking in #1.
   You can pack all your app code into just a couple of js/css/... files that you reference in your HTML. systemjs builder even allows you to get rid of the need to include systemjs as part of your deployment package.

3. You can use ng deploy as of Angular 8 to deploy your app from your CLI. ng deploy will need to be used in conjunction with your platform of choice (such as @angular/fire). You can check the official docs to see what works best for you here

Yes you will most likely need to deploy systemjs and bunch of other external libraries as part of your package. And yes you will be able to bundle them into just couple of js files you reference from your HTML page.

You do not have to reference all your compiled js files from the page though - systemjs as a module loader will take care of that.

I know it sounds muddy - to help get you started with the #2 here are two really good sample applications:

SystemJS builder: angular2 seed

WebPack: angular2 webpack starter

Lampe

I would also recommend JSPM (jspm.io): info here gist.github.com/robwormald/429e01c6d802767441ec and seed project here github.com/madhukard/angular2-jspm-seed – Larentia

After 6 months when Angular2 is in rc5 and will be released soon, this answer is still relevant because it references angular2 seed project. Great project, lot of contributors! – Guilder

Well this starter kit is exactly what I needed - github.com/antonybudianto/angular2-starter – Guilder

I have done like you say, using gulp, i have created my distribution, and with npm i had only installed the modules that i needed, but i have a problem with the f5(refreshing browser). When i am on a component i would like that the app redirect me to the first view, how could i do that? – Chowchow

I am still massively confused with point (1). What does deploy 'AS IS' mean? Does that mean copying all 50000 node_module files as well? I am trying to deploy the HEROES example and not sure what to add as script source in the index file. – Anecdotage

Yes - it means copying all your dependencies, this include the ones from node_modules as well. Note - you should copy only dependencies required for the program to run. Do not copy deps that are used for development only (for example gulp/grunt/etc). – Lampe

how am i suppsoed to know which JS files i need? Are they all the files listed in systemjs.config.js? – Anecdotage

Yes. In that file system.js is instructed what are and where to load from all your dependencies. – Lampe

Hi @Lampe i'm so new on Angular 2, i'm totally lost on where to build my systemjs app. Can you please help me? Can i get all my generated js files on every folder, clone this folder structure but with the js files and "xxxx.component.html" files and will work? I have a open question #43335467 – Piker

your point 1 and point 2 is conflicting. Angular cli creates a bundle of single file. Second, lazy load does not work since its a single bundle js file bundled using webpack (cli uses webpack). if i dont use vendor bundle option it still combines the whole app as one single app file. angular2 at time sucks in the way it build for production. – Tedmann

Please update your answer SystemJS builder: angular2 seed is no longer under active maintenance. – Southsoutheast

Answer 2

Simple answer. Use the Angular CLI and issue the

ng build 

command in the root directory of your project. The site will be created in the dist directory and you can deploy that to any web server.

This will build for test, if you have production settings in your app you should use

ng build --configuration production

This will build the project in the dist directory and this can be pushed to the server.

Much has happened since I first posted this answer. The CLI is finally at a 1.0.0 so following this guide go upgrade your project should happen before you try to build. https://github.com/angular/angular-cli/wiki/stories-rc-update

Isidoro

How do you do that? Following the Angular 2 quick start, i run that command instead of 'npm start', and i get 'ng command not found' – Carrousel

@NateBunney I am new to web dev scene. I am confused. ng build produces a bunch of files in dist folder. Say you are using spring boot as web server, do you just copy paste those files to the public web-inf folder in spring boot? Or do you need a nodejs server in front of spring boot to serve ng2 dist? – Ticker

I have a project that I set up as described on angular.io/docs/ts/latest/guide/setup.html (yesterday). I installed ng-cli globally. Then an ng build in the root directory of my project just gives an error: "You have to be inside an angular-cli project in order to use the build command." So ng-cli can build only projects that have been created with ng-cli? – Idealistic

The HTML files are not part of dist folder. If I just copy dist folder and deploy it to a web server, how will the UI be rendered without the html files? – Jarrad

What version of the CLI are you using. index.html is in the dist directory after I run ng build --prod. – Isidoro

@user1460043, yes, but there is an easy solution to your problem. Just roll a new angular CLI project and copy your src directory into the CLI project. – Isidoro

I was having trouble with this and I ended up having an Angular 2 app without angular cli installed. I used the command line located literally at the top of this link: cli.angular.io. I then moved my code to this new directory and used the ng build command from there – Yolondayon

but showing error as Cannot match any routes. URL Segment: 'parentFolder/childFolder/dist' , any idea ? – Holmann

Rad! Followed all steps from official docs page angular.io/guide/deployment#base-tag to do copy deployment in IIS, but nowhere in that document does it say ng build Other tips for IIS: set proper read permissions for worker process, download URL rewrite module from Msft, and make changes to web.config as described in the URL. After two hours of hair pulling found this post and ng build was the missing ingredient to generate the assets for distribution. – Screwball

For those of you getting 'Failed to load module script:...' error. Simply go to your angular.json and change the 'OutputPath' to just 'dist'. – Antony

Answer 3

With the Angular CLI it's easy. An example for Heroku:

1. Create a Heroku account and install the CLI

2. Move the angular-cli dep to the dependencies in package.json (so that it gets installed when you push to Heroku.

3. Add a postinstall script that will run ng build when the code gets pushed to Heroku. Also add a start command for a Node server that will be created in the following step. This will place the static files for the app in a dist directory on the server and start the app afterward.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Create an Express server to serve the app.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Create a Heroku remote and push to depoy the app.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Here's a quick writeup I did that has more detail, including how to force requests to use HTTPS and how to handle PathLocationStrategy :)

Maas

adding angular-cli in dependencies increase the size of the dist how to handle this – Hebetate

Do I need to follow the same strategy for deploying it as frontend? – Eligible

Answer 4

I use with forever:

1. Build your Angular application with angular-cli to dist folder ng build --prod --output-path ./dist

2. Create server.js file in your Angular application path:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);
   

3. Start forever forever start server.js

That's all! your application should be running!

Mop

Answer 5

In order to deploy your Angular2 app to a production server, first and foremost, ensure your app runs locally on your machine.

Angular2 app can also be deployed as a node app.

So, create a node entry point file server.js/app.js (my example uses express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Also add express as a dependency in your package.json file.

Then deploy it on your preferred environment.

I have put together a small blog for deployment on IIS. follow link

Varletry

Answer 6

Hopefully this may help, and hopefully I'll get to try this during the week.

1. Create Web app at Azure
2. Create Angular 2 app in vs code.
3. Webpack to bundle.js.
4. Download Azure site published profile xml
5. Configure Azure-deploy using https://www.npmjs.com/package/azure-deploy with site profile.
6. Deploy.
7. Taste the cream.

Cyndycynera

Please do not Microsoft-ify these kind of things as it's just compatible with Azure. It is like saying if you're using Angular, you should only be able to use Google Cloud services. – Borderer

Useful to know there is a npm module to deploy in Azure. – Moazami

@user6402762 +1 for Taste the cream. – Bailes

I'm trying to deploy my Angular 4 webapp using this answer but I keep getting errors like Can't resolve 'node-uuid' in path\azure-deploy\lib. Is this still possible? I configured step 5 in app.module and I'm not sure that I did step 3 and 4 correctly. Could you clarify those? – Coriander

Answer 7

If You test app like me on localhost or You will have some problems with blank white page i use this:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Explanation:

ng build

Build app but in code there is many spaces, tabs and other stuff what makes code able be read by human. For server it isnt important how code looks. This is why i use:

ng build --prod --build-optimizer 

This make code out for production and reduce size [--build-optimizer] allow to reduce more code].

So at end i add --base-href="http://127.0.0.1/my-app/" to show application where is 'main frame' [in simple words]. With it You can have even multiple angular apps in any folder.

Orthopterous

Answer 8

To Deploy your application in IIS follow the below steps.

Step 1: Build your Angular application using command ng build --prod

Step 2: After build all files are stored in dist folder of your application path.

Step 3: Create a folder in C:\inetpub\wwwroot by name QRCode.

Step 4: Copy the contents of dist folder to C:\inetpub\wwwroot\QRCode folder.

Step 5: Open IIS Manager using command (Window + R) and type inetmgr click OK.

Step 6: Right click on Default Web Site and click on Add Application.

Step 7: Enter Alias name 'QRCode' and set the physical path to C:\inetpub\wwwroot\QRCode.

Step 8: Open index.html file and find the line href="\" and remove '\'.

Step 9: Now browse application in any browser.

You can also follow the video for better understanding.

Video url: https://youtu.be/F8EI-8XUNZc

Loquacious

Answer 9

If you deploy your application in Apache (Linux server) so you can follow following steps : Follow following steps :

Step 1: ng build --prod --env=prod

Step 2. (Copy dist into server) then dist folder created, copy dist folder and deploy it in root directory of server.

Step 3. Creates .htaccess file in root folder and paste this in the .htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Hedelman

what kind of server ? should be an nginx server or what that gonna contain the dist – Pulverable

Could be Tomcat, your choice. I would say use what you are familiar with. – Pejoration

Any Apache linux or other server, wherr .htaccess rules used. – Hedelman

@TamaghnaBanerjee, check server re write mode is enabled or not? – Hedelman

Answer 10

You get the smallest and quickest loading production bundle by compiling with the Ahead of Time compiler, and tree-shake/minify with rollup as shown in the angular AOT cookbook here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

This is also available with the Angular-CLI as said in previous answers, but if you haven't made your app using the CLI you should follow the cookbook.

I also have a working example with materials and SVG charts (backed by Angular2) that it includes a bundle created with the AOT cookbook. You also find all the config and scripts needed to create the bundle. Check it out here: https://github.com/fintechneo/angular2-templates/

I made a quick video demonstrating the difference between number of files and size of an AoT compiled build vs a development environment. It shows the project from the github repository above. You can see it here: https://youtu.be/ZoZDCgQwnmQ

Divorcee

Thanks for a reference to the Doc's and for Mentioning AOT compiling. The value sounds real, "This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process." – Genealogy

Thanks for the feedback - if you haven't found the time to test AoT compilation yourself, I've added a video showing the difference in number of files and size (using the github project referenced in the answer). – Divorcee

Awesome! Thanks for being so helpful Peter! – Genealogy

Answer 11

Angular 2 Deployment in Github Pages

Testing Deployment of Angular2 Webpack in ghpages

First get all the relevant files from the dist folder of your application, for me it was the : + css files in the assets folder + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Then push this files in the repo which you have created.

1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and push these files in the master branch

2 -- Where as if you want to create these page in the sub directory or in a different branch other than than the root, create a branch gh-pages and push these files in that branch.

In both the cases the way we access these deployed pages will be different.

For the First case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].

If suppose you want to deploy it using the second case make sure to change the base url of the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].

Link to this page

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Hoedown

Answer 12

For a quick and cheap way to host an angular app, I have been using the Firbase hosting. It's free on the first tier and very easy to deploy new versions using the Firebase CLI. This article here explains the necessary steps to deploy your production angular 2 app to Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

In short, you run ng build --prod which creates a dist folder in the package and that's the folder that gets deployed to Firebase Hosting.

Iene

Thanks - this was the simplest way I could find. – Lifeanddeath

Answer 13

Deploying Angular 2 in azure is easy

1. Run ng build --prod , which will generate a dist folder with everything bundled inside few files including index.html.

2. Create a resource group and a web app inside it.

3. Place your dist folders files using FTP. In azure it will look for index.html to the run the application.

That's it. Your app is running !

Mokas

Only if you start your project with angular-cli no? – Eyeleteer

Not like that. If you have not started your angular2 project using angular-cli, you can build the project for production. Only you need to have angular-cli installed in your machine at the time of build. Use npm install -g @angular/cli to install angular-cli globally. – Mokas

Answer 14

As of 2017 the best way is to use angular-cli (v1.4.4) for your angular project.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

You needn't add --aot explicitly as its turned on by default with --prod.And the use of --output-hashing is as per your personal preference regarding cache bursting.

You could explicitly add CDN support by adding :

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

if you plan to use CDN for hosting which is considerably fast.

Polyp

Answer 15

With Angular CLI, you can use the following command:

ng build --prod

It generates a dist folder with all you need to deploy the application.

If you have no practice with web servers, I recommend you to use Angular to Cloud. You just need to compress the dist folder as zip file and upload it in the platform.

Airsickness

Answer 16

I would say a lot of people with Web experience prior to angular, are use to deploying their web artifacts inside a war (i.e. jquery and html inside a Java/Spring project). I ended up doing this to get around CORS issue, after attempting to keep my angular and REST projects separate.

My solution was to move all angular (4) contents, generated with CLI, from my-app to MyJavaApplication/angular. Then I modifed my Maven build to use maven-resources-plugin to move the contents from /angular/dist to the root of my distribution (i.e. $project.build.directory}/MyJavaApplication). Angular loads resources from root of the war by default.

When I started to add routing to my angular project, I further modifed maven build to copy index.html from /dist to WEB-INF/app. And, added a Java controller that redirects all server side rest calls to index.

Pejoration

Answer 17

You can build your application for production using

ng build --configuration=production

Then you can check you angular.json for the key outputPath where it normally has the value dist but could be different as well.

"build": {
          "options": {
            "outputPath": "dist"

With dist as value the outputed files from the build would be placed under the folder /dist

When built your angular project will consist only from static files Html, Javascript, Css and images or other assets. Because of that, what you need is just a web server that can serve static files to the client. Simple as that. Can be nginx, tomcat whatever can serve those static files to a client. This is also stated in the angular doc

Because these files are static, you can host them on any web server capable of serving files

Your built project under outputPath will already contain an index.html which will automatically have all necessary imports so when index.html is delivered to the client, the browser will also fetch all other necessary files. Necessary info is already contained in index.html.

Your second part of the question

do I minify them using gulp

The official way

angular.json will contain specific configurations for each environment and one of those will be optimization

optimization can be a boolean (true, false)

"configurations": {
            "production": {
              "optimization": true  --> will mean true for all properties of the next custom object

optimization can also be a custom object

 "configurations": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }

switching to "scripts": false will have as a result the .js files to not be minified

also switching to styles -> "minify": false will also avoid styles minifying.

Whatever configuration you have in angular.json for optimization, it can be overwritten if you provide a parameter during build. So by executing ng build --configuration=production --optimization=false it will build your project for production and apply to each property of optimization object the value false, which will actually disable minifying for everything.

Poinciana

Answer 18

For those of you getting 'Failed to load module script:...' error. Simply go to your angular.json and change the 'OutputPath' to 'dist'. Then run ng build --configuration production to build your app.

The reason is that the angular thinks your application is in root, but it is in root/YourAppName if you do not make this change

Antony

Answer 19

Just follow the below link,

Change your Index.html page Script File paths Change your component.html path incase your getting error that could not find the location

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

Germinative