Support for standalone components

[cesalberca]

I'm submitting a ...

• bug report
• feature request
• question about the decisions made in the repository

The new standalone components allows us to use Angular components without importing them in a Module. If I try to use Angulartics2 with a standalone I get the following error:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[Angulartics2 -> RouterlessTracking -> RouterlessTracking -> RouterlessTracking]: 
  NullInjectorError: No provider for RouterlessTracking!
Error: NullInjectorError: No provider for RouterlessTracking!
    at NullInjector.get (core.mjs:6359:27) [angular]
    at R3Injector.get (core.mjs:6786:33) [angular]
    at R3Injector.get (core.mjs:6786:33) [angular]
    at R3Injector.get (core.mjs:6786:33) [angular]
    at injectInjectorOnly (core.mjs:4782:33) [angular]
    at Module.ɵɵinject (core.mjs:4786:12) [angular]
    at Object.Angulartics2_Factory [as factory] (angulartics2.mjs:116:1) [angular]
    at R3Injector.hydrate (core.mjs:6887:35) [angular]
    at R3Injector.get (core.mjs:6775:33) [angular]
    at ChainedInjector.get (core.mjs:13769:36) [angular]
    at lookupTokenUsingModuleInjector (core.mjs:3293:39) [angular]
    at getOrCreateInjectable (core.mjs:3338:12) [angular]
    at Module.ɵɵdirectiveInject (core.mjs:10871:12) [angular]
    at NodeInjectorFactory.Angulartics2On_Factory [as factory] (angulartics2.mjs:184:1) [angular]
    at resolvePromise (zone.js:1211:31) [angular]
    at polyfills.js:9084:9 [angular]
    at polyfills.js:9101:25 [angular]
    at asyncGeneratorStep (asyncToGenerator.js:6:1) [angular]
    at _throw (asyncToGenerator.js:29:1) [angular]
    at Object.onInvoke (core.mjs:26231:33) [angular]
    at polyfills.js:9262:28 [angular]
    at Object.onInvokeTask (core.mjs:26218:33) [angular]

To fix this I would need to add the Angulartics2RouterlessModule to the whole app, while I only want to use it for this component

[HarelM]

Any updates on this? @cesalberca did you find a solution for this?

[diego-vannucci]

I have the same problem with stories on Storybook 8.0.5

[DmitryEfimenko]

You can do something like:

export function provideAngulartics(
  settings: Partial<Angulartics2Settings>
): Provider[] {
  return [
    { provide: ANGULARTICS2_TOKEN, useValue: { settings } },
    { provide: RouterlessTracking, useClass: AngularRouterTracking },
    Angulartics2,
  ];
}

In the app.config.ts (if you have fresh Angular 18 app)

export const appConfig: ApplicationConfig = {
  providers: [
    // other providers
    provideAngulartics({
      developerMode: !environment.production,
    }),
  ]
}

In the root (usually app) component:

class AppCOmponent {
  private angularticsGa = inject(Angulartics2GoogleAnalytics).startTracking();
}