Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for standalone components #462

Open
1 of 3 tasks
cesalberca opened this issue Nov 10, 2022 · 3 comments
Open
1 of 3 tasks

Support for standalone components #462

cesalberca opened this issue Nov 10, 2022 · 3 comments

Comments

@cesalberca
Copy link

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
Copy link

HarelM commented Nov 20, 2023

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

@diego-vannucci
Copy link

I have the same problem with stories on Storybook 8.0.5

@DmitryEfimenko
Copy link

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();
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@DmitryEfimenko @HarelM @cesalberca @diego-vannucci