16

How to get APP_BASE_HREF programmatically?

I have this in my app.module.ts (where APP_BASE='/'):

{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
},

I'm trying:

import { APP_BASE_HREF } from '@angular/common'; 
...
console.debug(APP_BASE_HREF.toString());

and in console I get:

Token appBaseHref

and I need to get:

http://localhost:5555/

4 Answers 4

35

Thanks to these answers by @Günter Zöchbauer:

...I have pieced together an approach like this:


index.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <base href="/" />
    <meta charset="utf-8" />
    <title>Testing APP_BASE_HREF</title>
    <link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
        <app-root></app-root>
</body>
</html>

app.module.ts

import { APP_BASE_HREF, PlatformLocation } from "@angular/common";
import { AppComponent } from "./app.component";

/**
 * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
 * This is an exported function, instead of a private function or inline lambda, to prevent this error:
 *
 * `Error encountered resolving symbol values statically.`
 * `Function calls are not supported.`
 * `Consider replacing the function or lambda with a reference to an exported function.`
 *
 * @param platformLocation an Angular service used to interact with a browser's URL
 * @return a string instance of the `<base href="" />` value from `index.html`
 */
export function getBaseHref(platformLocation: PlatformLocation): string {
    return platformLocation.getBaseHrefFromDOM();
}

@NgModule({
    declarations: [
        AppComponent
    ],
    providers: [
        {
            provide: APP_BASE_HREF,
            useFactory: getBaseHref,
            deps: [PlatformLocation]
        }
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

app.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { APP_BASE_HREF } from "@angular/common";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {

    constructor(@Inject(APP_BASE_HREF) private baseHref: string) {
        console.log(`APP_BASE_HREF is ${this.baseHref}`);
    }

    ngOnInit(): void {
    }
}

app.component.spec.ts

import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { APP_BASE_HREF } from "@angular/common";

describe("AppComponent", () => {

    let component: AppComponent,
        fixture: ComponentFixture<AppComponent>;

    // configuring dependencies
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                AppComponent
            ],
            providers: [
                {
                    provide: APP_BASE_HREF,
                    useValue: "/"
                }
            ]
        }).compileComponents();
    }));

    // getting component
    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    // tests
    it("should create the app", async(() => {
        const app: any = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    }));
});

Then you could do stuff like this:

  1. npm start

APP_BASE_HREF will equal the default value set in index.html

  1. npm run build --base-href /foobar/

APP_BASE_HREF will equal the value passed to the base-href flag

3
  • That's brilliant!
    – Wilgert
    Dec 3, 2018 at 22:31
  • 2
    Thanks!! That solved my problem. It's a PITA having to inject the BaseRef and bind it to all src or href references, but at least it does work. Don't understand why this problem has not been addressed already. Aug 10, 2019 at 15:51
  • 3
    Note that if all you want to do is get the base href value then there are now easier approaches. See this SO answer. Jun 28, 2020 at 12:57
22

Just inject it to a service or component like

import { APP_BASE_HREF } from '@angular/common'; 

...

constructor(@Inject(APP_BASE_HREF) private baseHref:string) {
  console.log(this.baseHref);
}
8
  • Works, but only returns '/' Sep 2, 2016 at 8:20
  • 4
    It doesn't work for me. I have this error message: No provider for Token appBaseHref
    – cheb1k4
    Mar 31, 2017 at 14:11
  • 4
    FYI: getting this error: "No provider for InjectionToken appBaseHref"
    – Serj Sagan
    Nov 9, 2017 at 3:33
  • 2
    You need to provide it yourself providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]. The default is /. Nov 9, 2017 at 4:21
  • 1
    The answer is here: stackoverflow.com/a/66074792 You need to add @Optional @Inject(APP_BASE_HREF) You import Optional from angular/core Oct 7, 2021 at 8:53
9

If using PathLocationStrategy, Angular now has LocationStrategy.getBaseHref() (https://angular.io/api/common/LocationStrategy).

For instance, in app.module.ts:

...
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
...
@NgModule({
  providers: [
    ...
    {provide: LocationStrategy, useClass: PathLocationStrategy},
    ...
  ],
  ...
})
export class AppModule { }

And then in your services/components/...:

constructor(private locationStrategy: LocationStrategy, ...) {
  console.log(this.locationStrategy.getBaseHref());
  ...
}
1
  • 1
    I would like just to add that this works only if you use PathLocationStrategy. HashLocation strategy returns empty string for base href.
    – avidenic
    Mar 21, 2019 at 8:01
0

Using Angular 14, this is working for me:

In app.module.ts import this:

import { APP_BASE_HREF } from '@angular/common';

Also in app.module.ts add this object inside @NgModule > providers array:

providers: [
    {
      provide: APP_BASE_HREF, useValue: '/my-directory/my-app'
    },

Optionally in angular.json (outputs same folder structure for build files) change:

"outputPath": "dist/my-app",

to this:

"outputPath": "dist/my-directory/my-app",

Finally use this build command in your terminal:

ng build --deploy-url /my-directory/my-app/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.