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?

Answer 1

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/.