Angular2 – Deploying an Angular App

Introduction

Deployment preparations and important steps

Captura de pantalla 2017-05-29 a las 11.11.09

  • Build you app for production (—prod  –aot)
  • Set a correct <base> element
  • Redirect all 404 errors to return index.html where Angular launch. Routes defined in Angular (such as /recipes)  are not configured in the server, so it will return a 404 error by default. So you will need to set up your server to redirect to index.html in these cases.

Example: Deploying to AWS S3

  • Create an Amazon account: https://console.aws.amazon.com
  • Create a bucket in S3
  • Set up index and error documents pointing to index.html to make sure Angular app is linked in every route. In S3 bucket this is done in Properties -> Static Web hosting. For deployment in php hosting create an .htaccess file:
ErrorDocument 404 http://jesidea.com/jesites/src/angular2-recipe-book/

RewriteEngine On
RewriteBase /
  • Set up permissions for that bucket for anonymous access: create a bucket policy
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::jesidea-ng-recipe-book/*"
        }
    ]
}
  • Build for production:

Taking care of the base folder where it will be deployed (base-href in index.html):

ng build --pro --aot --base-href http://jesidea.com/jesites/src/angular2-recipe-book/

or without taking care:

ng build --pro --aot