Menu
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/
786
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:
npm startAPP_BASE_HREF will equal the default value set in index.html
npm run build --base-href /foobar/APP_BASE_HREF will equal the value passed to the base-href flag
68
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
