CODEWITHSUNDEEP
angularangular-cli
Jamie Rees
Jamie Rees

Reputation: 8183

Angular CLI set APP_BASE_HREF dynamically

What I need to do is either set the <base href="" /> tag dynamically that is located in the index.html OR set the APP_BASE_HREF dynamically that is in the app.module.ts

I am unsure how to set anything on the index.html as it's all static text it seems.

I have tried the following to set the APP_BASE_HREF but I keep getting the error below:

Unhandled Promise rejection: url.replace is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: url.replace is not a function
    at _stripIndexHtml (common.js:282)
    at new Location (common.js:149)
    at _createClass (core.js:19829)
    at _createProviderInstance (core.js:19801)
    at initNgModule (core.js:19734)
    at new NgModuleRef_ (core.js:20461)
    at createNgModuleRef (core.js:20450)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:22281)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:23009)
    at core.js:16622 TypeError: url.replace is not a function
    at _stripIndexHtml (http://localhost:3577/vendor.js:25317:16)
    at new Location (http://localhost:3577/vendor.js:25184:56)
    at _createClass (http://localhost:3577/vendor.js:80131:20)
    at _createProviderInstance (http://localhost:3577/vendor.js:80103:26)
    at initNgModule (http://localhost:3577/vendor.js:80036:32)
    at new NgModuleRef_ (http://localhost:3577/vendor.js:80763:9)
    at createNgModuleRef (http://localhost:3577/vendor.js:80752:12)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (http://localhost:3577/vendor.js:82583:12)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (http://localhost:3577/vendor.js:83311:25)
    at http://localhost:3577/vendor.js:76924:43

This is what I have tried:

export function startupServiceFactory(settingsService: SettingsService): Function {

    return async () => {
        const ombi = await settingsService.getOmbi().toPromise()

        const baseUrl = ombi.baseUrl.length > 0 ? ombi.baseUrl : "/";
        return baseUrl;
    }
}

@NgModule({
    imports: [
// snip
    ],
    declarations: [
// snip
    ],
    providers: [
        SettingsService,
        {
            provide: APP_BASE_HREF,
            useFactory: startupServiceFactory,
            deps: [SettingsService],
            multi: true
        }
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

as you can see in the above, I am attempting to call an API on the server which returns an object, then there is the baseUrl property that I want to set as the APP_BASE_HREF

I am aware this can be set during build time, but the website I have developed allows the user to set it themselves and the value is stored in the database (User's will install the application themselves).

Upvotes: 3

Views: 1609

Answers (1)

David
David

Reputation: 34435

I think you cannot use a factory provider returning a promise for APP_BASE_HREF(github issue)

A possible workaround is to make the remote call to fetch the data before bootstraping the application, store the dynamic value somewhere (in window in the example below) and reuse it when providing APP_BASE_HREF

main.ts

fetch('https://yourbackendconfigserver.com')//Just an example of API call
  .then(response => response.json())
  .then(json =>{ 
  
    platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
    }
);

app.module.ts

export function baseHRefFactory(): Function {
    return window['baseHref'];
}

@NgModule({
  imports:  //...
  declarations: //...
  providers:[
        {
            provide: APP_BASE_HREF,
            useFactory: baseHRefFactory,
        }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Stackblitz demo

Upvotes: 3

Related Questions