Angular 2 CLI Project Can't Load Resources When Deployed

Question

My machine and dev environment is: Mac 10.11.4 angular-cli: 1.0.0-beta.10 node: 5.11.1 os: darwin x64

This project was created from the Angular CLI. The application works fine when running 'ng serve --prod', but when I run 'ng build --prod' and then publish live, I can a ton of errors that resources can't be found.

There is a lot of "magic" for loading these resources in index.html so I'm not sure what to do to fix this....

https://github.com/JimTheMan/Safe-Foods/tree/gh-pages

My project is named "SafeFoods". The correct path for, for example es6-shim.js, should be: https://jimtheman.github.io/Safe-Foods/vendor/es6-shim/es6-shim.js when it is actually: https://jimtheman.github.io/vendor/es6-shim/es6-shim.js

The ng build task creates it like this every time so I'm not sure how to tell it the proper path...

Note: I also tried updating angular-cli to the newest version and using '--base-href', but that doesn't seem to be functioning correctly:

SafeFoods (gh-pages) ♔ ng build --prod --base-href /Safe-Foods/

The option '--base-href' is not registered with the build command. Running build --help for a list of supported options.

Any help is appreciated. Thanks.

Answer 1

i already answered a very similar question here

you are looking for

--deploy-url /Safe-Foods

i hope that answers your question!

Answer 2

In config/environment.js set baseURL: '/Safe-Foods'.

In src/index.html set <base href="{{ baseURL }}">.