Angular 2 CLI - Deployment

Question

I have built an Angular 2 application using the Angular 2 CLI. My issue is now I want to deploy the application to a local server as a staging environment for others to view.

Most tutorials that use the Angular 2 CLI show a dist folder that appears to have been generated when the project was first created using the CLI. I can only generate the dist folder using ng build. I assume the Angular 2 CLI changed where initially the dist folder was part of the initial folder structure, but now it is only generated when using ng build?

As a test, I copied the generated dist folder into the www folder of the WAMP server [http://localhost:8080/Project/dist/] to try and run the application... The browser console shows:

Failed to load resource: the server responded with a status of 404 (Not Found)      http://localhost:8080/inline.js
Failed to load resource: the server responded with a status of 404 (Not Found)      http://localhost:8080/bundle.js

It is looking for all assets at the root of the local server, rather than setting the root to the location of the index.html within the dist folder. All images and icons have the same problem... I figure I have failed to configure something for the relative paths... What do I do?

Yuri · Accepted Answer · 2016-10-26 10:55:07Z

6

First of all, you can specify the output path of the ng build command - so no manual copying needed. Eg.: ng build --output-path /var/www/app_foo/root/.

Second, there is a base path concept implemented as base tag in index.html - <base href="/path">. You can set it manually or during building via ng build --base-href /path/.

In your case it seems it should match: ng build --base-href /Project/dist/.

edited Oct 26, 2016 at 10:55

answered Oct 21, 2016 at 12:01

Yuri

4,5482 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dandev91 Over a year ago

Perfect. Worked a charm.

Collectives™ on Stack Overflow

Angular 2 CLI - Deployment

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related