title: Angular CLI set APP_BASE_HREF dynamically
body: <p>What I need to do is either set the <code>&lt;base href="" /&gt;</code> tag dynamically that is located in the <code>index.html</code> OR set the <code>APP_BASE_HREF</code> dynamically that is in the <code>app.module.ts</code></p>
  
  <p>I am unsure how to set anything on the <code>index.html</code> as it's all static text it seems.</p>
  
  <p>I have tried the following to set the <code>APP_BASE_HREF</code> but I keep getting the error below:</p>
  
  <pre><code>Unhandled Promise rejection: url.replace is not a function ; Zone: &lt;root&gt; ; 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
  </code></pre>
  
  <p>This is what I have tried:</p>
  
  <pre><code>export function startupServiceFactory(settingsService: SettingsService): Function {
  
      return async () =&gt; {
          const ombi = await settingsService.getOmbi().toPromise()
  
          const baseUrl = ombi.baseUrl.length &gt; 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 { }
  </code></pre>
  
  <p>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 <code>baseUrl</code> property that I want to set as the <code>APP_BASE_HREF</code></p>
  
  <p>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).</p>