Dynamic environment variables aren't properly loaded in.

[rationelis]

Packages used:

"@ngx-matomo/router": "^3.0.0",
"@ngx-matomo/tracker": "^3.0.0",
"@elemental-concept/env-bakery": "0.0.5",
// Angular 14

I'm trying to dynamically load in environment variables into NgxMatomoTrackerModule.forRoot() to configure Matomo. For this, I'm using @elemental-concept/env-bakery to import the values from a .dotenv file. The code below is how I setup the environment variable that is used throughout my application.

export const environment = () => ({
  appVersion: require('../../package.json').version,
  production: getEnv('PRODUCTION').boolean(),
  backendUrl: getEnv('BACKEND_URL').string(),
  matomoConfig: {
    trackers: [
      {
        trackerUrl: getEnv('MATOMO_TRACKER_URL').string(),
        siteId: getEnv('MATOMO_SITE_ID').number()
      }
    ],
    skipTrackingInitialPageView: false,
    routeTracking: {
      enable: true
    }
  },
  auth: {
    issuer: getEnv('ISSUER').string(),
    clientId: getEnv('CLIENT_ID').string()
  }
});

And in the @NgModule I feed the config into the forRoot()

imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    BrowserAnimationsModule,
    BreadcrumbModule,
    FtIconModule,
    MatMomentDateModule,
    // NgxMatomoTrackerModule.forRoot({ trackerUrl: 'MY_URL', siteId: '1' }), // This works.
    NgxMatomoTrackerModule.forRoot(environment().matomoConfig), // This doesn't. 
    NgxMatomoRouterModule
 ],

If I try and run this I get an error stating matomo.js cannot be found on my localhost. That's because it tries to inject the DOM script from my trackerUrl. Breakpointing on the forRoot method in the debugger, I find this:

As you can see, it finds my custom configuration object but it just doesn't load in the custom values. In other places where I use this environment() global variable it is correctly populated with my environment variables.

The first thing my application does is 'bake' the environment variable and THEN load everything in (as seen below). Therefore I cannot see this being an issue with asynchronous actions that have yet to resolve.

bakeEnv(() => import('./environments/environment')).then((environment: any) => {
  if (environment.production) {
    enableProdMode();
  }

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

Do you have any ideas how I could fix this issue?

[EmmanuelRoux]

Hi @rationelis

I see your configuration loaded from environment is invalid. Please find configuration reference here.

Maybe it should look like something like this:

export const environment = () => ({
  [...]
  matomoConfig: {
    trackerUrl: getEnv('MATOMO_TRACKER_URL').string(),
    siteId: getEnv('MATOMO_SITE_ID').number()
    trackAppInitialLoad: true, // you sure?
  } as MatomoConfiguration, // optionally cast
  [...]
});

See I added as MatomoConfiguration cast to make the compiler help you ;)

(The way you load configuration asynchronously before bootstrap seems ok)

Also, please provide a repro (Stackblitz) to reproduce error details.

[rationelis]

Thanks for you fast reply. Neither correcting the config nor casting fixed the issue. I will try to reproduce it in Stackblitz tomorrow :+1:

[rationelis]

Screw it, sleep is for the weak.

Editor URL: https://stackblitz.com/edit/angular-ivy-fbcear?file=src/environments/environment.ts&view=editor Application URL: https://angular-ivy-fbcear.stackblitz.io

I reproduced the issue on Stackblitz. As you will be able to see in the application (not visible in preview) it tries to inject the DOM script from that Stackblitz domain since the trackerUrl is an empty string. The same applies for the siteId variable.

I hope this provides you with enough details.

[EmmanuelRoux]

Hi @rationelis

A very basic debugging (based on your repro on Stackblitz) shows that the issue is not related to this lib.

I see your environment variables are simply not loaded at all. This can be revealed with a simple console log:

export const environment = () => { 
  // This log show that your environment variables are all empty
  console.log('debug', getEnv('MATOMO_TRACKER_URL').raw(), getEnv('MATOMO_SITE_ID').raw());

  return ({
    matomoConfig: {
      // Following config is correctly read by this lib
      trackerUrl: 'https://mysite.com',
      siteId: 1,
      trackAppInitialLoad: true,
    } as MatomoConfiguration,
  });
};

So it looks like that's an issue with @elemental-concept/env-bakery or the way you're using it.

[EmmanuelRoux]

Closing because not related to this repository, please reopen issue if needed