Adding prefix path to static files in Angular using angular-cli

Question

I have an existing django project where I am serving static files over /static/ path. I am migrating a part of the application to angular2, to be specific mobile version of the site.

Adding <base href="/"> to index.html loads static files www.example.com/main.js gets 404 here. Adding <base href="/static/"> to index.html loads static files correctly, but when the application bootstraps, it changes the url to /static/ (i am using routers), although my url should be /order/.

is there a way of using base href as / but adding prefix to script and style files using angular-cli

using version ng --version

@angular/cli: 1.0.0-rc.0
node: 6.9.1
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.9

Answer 1

You can use --deploy-url to prefix path of your generated static files. ng build --deploy-url /static/. It will prefix path of js files with /static/ in generated index.html like this:

<script type="text/javascript" src="/static/inline.bundle.js"></script>

From help doc:

--deploy-url (String) URL where files will be deployed.

example:

ng build --prod --deploy-url=example.com/scripts/

Updated answer based on comments.