使用 angular-cli 为 Angular 中的静态文件添加前缀路径

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.

Updated answer based on comments.

Answer 2

Using angular CLI 6.1.1

This how I do it, you need to use the build flag --base-href

Example

ng build --prod --base-href=/dist/my-app/

and I access the site like this http://127.0.0.1:5500/dist/my-app/index.html

Official document reference here