how to deploy angular2 app built using angular-cli
Solution 1
method 1(popular one) : If you are using angular-cli, then
ng build --prod
will do the trick. Then you can copy everything from .dist
folder to your server folder
method 2 :
you can use http-server to serve your app . To install http-server
npm install http-server -g
and after going to your project folder
http-server ./dist
it will serve all the files in your folder. you can check the terminal what ip-address and port you can use to access the application. Now open up your browser and type
ip-adress:port/index.html
Hope it will help you :)
Bonus : If you want to deploy in heroku. Please go through this detailed tutorial https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352
Solution 2
For anyone looking for an answer for IIS hosting...
Build your project
ng build --prod
Copy all contents of the ./dist folder into the root folder of your website maintaining the folder structure within ./dist (ie - don't move anything around). Using the Beta-18 version of the angular-cli all assets (images in my case) were copied to ./dist/assets during the build and were referenced correctly in their containing components.
Solution 3
Check your index.html file and edit this line
<base href="/[your-project-folder-name]/dist/">
Your content should load properly. You can then load styles globally
You should set base href as recommended by Johan
ng build --prod --bh /[your-project-folder-name]/dist/
Solution 4
Here's an example with Heroku:
Create a Heroku account and install the CLI
Move the
angular-cli
dep to thedependencies
inpackage.json
(so that it gets installed when you push to Heroku.Add a
postinstall
script that will runng 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 adist
directory on the server and start the app afterward.
"scripts": {
// ...
"start": "node server.js",
"postinstall": "ng build --aot -prod"
}
- 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);
- 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
:)
Solution 5
Use ng build
with the --bh
flag
Sets base tag href to /myUrl/ in your index.html:
ng build --base-href /myUrl/
ng build --bh /myUrl/
Comments
-
raju almost 4 years
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 --prod, that generates the 'dist' folder. When I put that folder in xampp to run, it is not working. I found that there is no *.js files, which should be in there after *.ts -> *.js conversion (i suppose).
I have attached the screenshot, in which on left side it is showing the src folder having all .ts files, On middle it is showing the 'dist' folder and browser screenshot.
Please guide me how can I generate fully working app from angular-cli, which I can run in my xampp server.
Screenshot:
-
Salvatore Pannozzo Capodiferro over 7 yearsworks, but first with angular cli you must build your project using ng build
-
EdL over 7 yearsSo you deploy the .gz and .map files as well?
-
Mike Devenney over 7 yearsOn IIS you don't have to deploy the .gz files, just configure IIS to use dynamic compression, you can save a lot of bytes going over the wire. The .map files are source maps. Think of them as the .pdb's of the javascript world, so yes, if you want to debug on the server you're deploying to. Uglifying the JS makes debugging really hard (read:impossible) without them.
-
Johan Blomgren over 7 yearsDon't edit index.html, use ng build/serve with the --bh parameter
-
Tiwa Babalola over 7 yearsOh Yes thanks, I believe the base href is the solution to his question. ng build --prod --bh /[your-project-folder-name]/dist/
-
sree about 7 yearsI followed the method deploy in Apache server. It worked but the page showed as broken when refreshing(Cntrl+R) sub pages. for example In my case the page will not work accessing directly example.com/question. Anyone have an idea how to fix this?
-
Marvel Moe almost 7 years+1 but wanted to clarify that you dont need to include dist in terminal ng build --bh /mycoolapp/ <----- worked for me
-
SrAxi almost 7 yearsI recommend this! Great way to see your App in a live environment in no time. For more details: medium.com/@ryanchenkie_40935/…
-
Damith almost 7 yearsYou can type http-server ./dist -o to open the application directly in browser.
-
Zack Lucky almost 7 yearsWhat if you were using Angular Universal with a node server in Typescript?
-
Saravanan Nandhan over 6 yearsThanks,it's works me but when i refresh the page it's getting not found error
-
user2347528 over 6 yearsI have a few proxy settings in proxy.conf.js file. After running "ng build --aot --prod" I deployed the dist files as-is. The website is up and running but the pages that use the proxy settings are still using localhost. How do I setup the proxy settings in production?
-
Craig over 6 yearsI'm in the same boat as Saravanan. I'm able to run http-server from within the ./dist folder, but only the root path works. localhost:3000 (in my case) loads the app. But if the user has any route bookmarked, like localhost:3000/project/listing, it throws a 404. There is no apparent redirect capability.
-
Arokia Lijas over 3 yearsHow do I run two webapps in the same the server?
-
Arokia Lijas over 3 yearsI build my application using this
ng build --base-href "/testapp/" --prod
How do I proceed from here? -
viks over 3 yearsyou can run 2 different web apps on the same server by running that web apps on different ports. Eg. One will run on example.com:8080 and another one on example.com:8081.
-
Arokia Lijas over 3 yearsHow should the server configuration be? My domain would like https:\\example.com\webpage1\<routes> and https:\\example.com\webpage2\<routes>