Introduction
Deployment preparations and important steps
- 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
- Upload content of dist folder into the bucket
- See the result in http://jesidea-ng-recipe-book.s3-website.eu-central-1.amazonaws.com/recipes
- I also deployed in jesidea: http://jesidea.com/jesites/src/angular2-recipe-book/