Angular load external configuration before AppModule loads

by

Angular documentation has a great chapter called NgModule FAQs which contains the following section:

What if two modules provide the same service?

…

If NgModule A provides a service for token ‘X’ and imports an
NgModule B that also provides a service for token ‘X’, then NgModule
A’s service definition “wins”.

In other words, you can override OAuthModuleConfig for your library in AppModule:

main.ts

(async () => {
  const response = await fetch('https://api.myjson.com/bins/lf0ns');
  const config = await response.json();

  environment['allowedUrls'] = config.apiBaseURL;

  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
})();

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { OAuthModule, OAuthModuleConfig } from 'angular-oauth2-oidc';
import { HttpClientModule } from '@angular/common/http';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    OAuthModule.forRoot(),
  ],
  providers: [
    {
      provide: OAuthModuleConfig,
      useFactory: () => ({
        resourceServer: {
          allowedUrls: [environment['allowedUrls']],
          sendAccessToken: true
        }
      })
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Note that we should also use useFactory instead of useValue so we don’t depend on when AppModule is imported.

More Related Contents:

  1. Dynamically add event listener
  2. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  3. Use component from another module
  4. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  5. Angular and Typescript: Can’t find names – Error: cannot find name
  6. Angular 2 Scroll to top on Route Change
  7. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  8. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  9. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  10. async/await in Angular `ngOnInit`
  11. How to inject service into class (not component)
  12. Emit event from parent to child
  13. Angular2 router keep query string
  14. Angular 2 ‘component’ is not a known element
  15. How to make a sequence of http requests in Angular 6 using RxJS
  16. How to set unique template reference variables inside an *ngFor? (Angular)
  17. Getting Image from API in Angular 4/5+?
  18. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  19. Angular 4 HttpClient Query Parameters
  20. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  21. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  22. Type casting within a template in Angular 2
  23. Subscribing to a nested Observable
  24. Enabling CORS on Azure Active Directory
  25. How to use Bootstrap in an Angular project?
  26. Angular reactive Form error: Must supply a value for form control with name:
  27. Angular, Http GET with parameter?
  28. How to use MatPaginatorIntl?
  29. Cannot read property ‘native-element’ of undefined
  30. Filtering different columns in a material table

Leave a Comment