How to set base path for static files in Angular 7?

Question

I have tried three approaches.

1st : index.html

<base href="/customer">

2nd : app.module.ts

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/customer'}]
})

3rd : app-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "/customer", pathMatch: "full" },
  {
    path: "customer",
    component: CustomerComponent,
    data: { animation: "HomePage" }
  }
];

All the above approaches work well for URL routing and I get desired URL.

http://localhost:4200/customer

However, static files(js & images) are still loading with the base path 'http://localhost:4200/'. I need it to have like http://localhost:4200/customer/main.js.

Hence, I am trying to make it http://localhost:4200/customer/main.js instead of http://localhost:4200/main.js for some secure validation reason.

Same can be seen in below screenshot.

Avin Kavish · Accepted Answer · 2019-06-12T08:58:44.207

9

You can use the --baseHref command line flag with ng serve and ng build this means that you no longer have to prefix the routes in app-routing.module.ts

ng serve --baseHref=/customer/

build with

ng build --baseHref=/customer/

edited Jun 12 '19 at 08:58

answered Jun 12 '19 at 08:43

Avin Kavish

8,317
1
21
36

The application failed to load due to "http://localhost:4200/customer/runtime.js". It is not routing but it sets the relative path. – Ashwini Verma Jun 12 '19 at 08:51
1

`ng serve --baseHref=/customer/` – Avin Kavish Jun 12 '19 at 08:53
Works for me when setting up a "Your First App" angular 7 project then used `ng serve --baseHref=/customer/`. The url http://localhost:4200/customer/ works without any error – tiennsloit Jun 12 '19 at 09:15
It only works for me when I write the flag in the following way: `ng build --base-href=/customer/` – moccajoghurt Jul 03 '23 at 12:40

score 1 · Answer 2 · answered Jul 09 '21 at 11:20

1

You can use --deploy-url parameter in ng build command.

Example: ng build --deploy-url /my/assets

More detail on https://angular.io/guide/deployment.

answered Jul 09 '21 at 11:20

Đặng Quỳnh

51
5

The tooling says that this approach is now deprecated. – Gleno Apr 21 '22 at 07:45

score 0 · Answer 3 · answered Sep 09 '19 at 06:26

I got exactly same bug when I migrate from angular 5 to 7. It is probably related to the way that angular attaching the build js files. If you already added <base href="/"> into index.html but the scripts are still loading from the relative path, it might because there is no <body> tag. Try add <body> tag into index.html file and see if it works.

How to set base path for static files in Angular 7?

3 Answers3