How can I dynamically change and load a configuration file based on the URL parameter using Angular?

Question

How can I dynamically change and load a configuration file based on the URL parameter using Angular?

My query involves modifying the config file on pageload based on a URL parameter. I currently have implemented the following:

config-loader.service.ts

@Injectable()
export class ConfigLoaderService {     
constructor(private injector: Injector, private http?: HttpClient) { }
    
      public get router(): Router {
        return this.injector.get(Router);
     }
    
      url : string;
      link : string;
      initialize() {
        this.url = this.router.url;
        if (this.url == "/demo")
        {
          this.link = 'assets/demoConfig.json'
        }
        else {
          this.link = 'assets/config.json'
        }
        return this.http.get<ModeActivation>(this.link)
          .pipe(tap((response: ModeActivation) => {

app.module.ts

  providers: [DemandeClass,
    ConfigLoaderService,
    {
      provide: APP_INITIALIZER,
      deps: [
        ConfigLoaderService
      ],
      multi: true,
      useFactory: PreloadFactory
    }
  ],

Although I am not encountering any errors, the

this.router.url

is always "/" even when I access

localhost:4200/demo

leading to it entering the second condition. Can anyone pinpoint what could be going wrong?

angular typescript

Answer 1

Answer №1

One reason for this issue is that the router may still be initializing while you are trying to access it, causing it not to navigate internally to your desired URL.

To verify this, you can check the value of this.router.navigated in your config service. Initially, it will be false and only become true after a navigation event has been completed. For more information, refer to the documentation.

Possible Solution:

Instead of relying on the router, consider using window.location.pathname as a workaround.

initialize() {
    this.url = window.location.pathname; // use window.location.pathname instead of this.router.url
    console.log('Has router navigated?', this.router.navigated); // should show false initially
    console.log('Current URL:', this.url); // displays the correct URL
}

For a visual demonstration, check out this StackBlitz demo.

Answer 2

One reason for this issue is that the router may still be initializing while you are trying to access it, causing it not to navigate internally to your desired URL.

To verify this, you can check the value of this.router.navigated in your config service. Initially, it will be false and only become true after a navigation event has been completed. For more information, refer to the documentation.

Possible Solution:

Instead of relying on the router, consider using window.location.pathname as a workaround.

initialize() {
    this.url = window.location.pathname; // use window.location.pathname instead of this.router.url
    console.log('Has router navigated?', this.router.navigated); // should show false initially
    console.log('Current URL:', this.url); // displays the correct URL
}

For a visual demonstration, check out this StackBlitz demo.

Answer 3

Answer №2

Is it possible to include the configuration in the route data?

{
                path: 'path',
                component: Component,
                data: myConfigForThisRoute,
            },

Answer 4

Is it possible to include the configuration in the route data?

{
                path: 'path',
                component: Component,
                data: myConfigForThisRoute,
            },

How can I dynamically change and load a configuration file based on the URL parameter using Angular?

Answer №1

Answer №2

Similar questions

Angular compodoc tool is not considering *.d.ts files

Can the change listener be used to retrieve the selected option's number in a form-control?

Step-by-step instructions for deactivating a specific FormControl within a FormArray

How can I redirect a remote image URL to a local folder during development?

Testing Slack's Web API with Jest for mock purposes

What is the process for transitioning global reusable types to package types within turborepo?

After a recent deployment, the Angular PWA hosted on a NestJS server experiences unexpected crashes

How can one store the value of a promise or observable in an external variable?

ways to display selected custom information with a choiceLabel in a dropdown using primeng

transitioning from angular cli version 1.7 to version 12

What could be causing the malfunction of the Bootstrap5 modal hide feature?

Why is it that I have intellisense enabled for .js files but not for .ts files?

Issues with the rating plugin functionality in Ionic 3

How can I ensure that a user variable stored in an Angular6 service remains defined and accessible from other components?

Encountering an uncaughtException: Error stating that the module '....nextserverapphomelibworker.js' cannot be located while attempting to utilize pino.transport in Next.js

Tips for modifying the text color of a div that is being iterated through using ngFor

Unable to access the values of the object within the form

Setting up ESLint and Prettier with TypeScript on Node 20: A Guide

How can we utilize caching for an HTTP GET request in Angular 9 only when the navigator is offline?

I am looking to transfer 'beforeEach' and 'afterEach' from the spec file to the global configuration file in WDIO [mocha, hook, wdio]