I have created n new angular app using angular-cli.
I completed the app and preview it using ng-serve, it is working perfectly.
After that I used ng build --
If anyone is working with Nginx, then here is the complete solution:
Suppose you want to deploy your angular app at HOST: http://example.com
and PORT: 8080
Note - HOST and PORT might be different in your case.
Make sure you have <base href="/">
in you index.html head tag.
Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
Then build /dist for your production server using the following command:
ng build --prod --base-href http://example.com:8080
Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.
Now login to your remote server and add following nginx server configuration.
server {
listen 8080;
server_name http://example.com;
root /path/to/your/dist/location;
# eg. root /home/admin/helloWorld/dist
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
# This will allow you to refresh page in your angular app. Which will not give error 404.
}
}
Now restart nginx.
That's it !! Now you can access your angular app at http://example.com:8080
Hope it will be helpful.
I'm using the latest version of the Angular-CLI (at the time of this reply its 1.0.0Beta-18)
The way this version works is it puts everything in bundle files and it calls them in the index.html file. After that you have to copy your assets over to the dist folder (for some reason it does not do that). Finally, double check your base href make sure its set to what it needs to be set to and then it should work. That's what worked for me and I've tested on both Apache and Node.
Here's an example with Heroku:
Create a Heroku account and install the CLI
Move the angular-cli
dep to the dependencies
in package.json
(so that it gets installed when you push to Heroku.
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"
}
// 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);
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
:)