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-12 08:58:44Z

11

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, 2019 at 8:58

answered Jun 12, 2019 at 8:43

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashwini Verma Over a year ago

The application failed to load due to "localhost:4200/customer/runtime.js". It is not routing but it sets the relative path.

Avin Kavish Over a year ago

ng serve --baseHref=/customer/

tiennsloit Over a year ago

Works for me when setting up a "Your First App" angular 7 project then used ng serve --baseHref=/customer/. The url localhost:4200/customer works without any error

moccajoghurt Over a year ago

It only works for me when I write the flag in the following way: ng build --base-href=/customer/

Đặng Quỳnh · Accepted Answer · 2021-07-09 11:20:13Z

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 9, 2021 at 11:20

Đặng Quỳnh

515 bronze badges

2 Comments

Gleno Over a year ago

The tooling says that this approach is now deprecated.

Yura Over a year ago

@Gleno no, it does not says this

Alexia · Accepted Answer · 2019-09-09 06:26:17Z

0

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.

answered Sep 9, 2019 at 6:26

Alexia

1

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related