No provider for Router! Angular 12 Matomo 1.0.0-rc.1

[dtomaszewski]

Hi,

I have issue with routeTracking functionality in Angular 12, when I enable it to true like in README file all I get is missing Router provider error.

My deps are:

"dependencies": { "@angular-devkit/schematics": "12.0.2", "@angular/animations": "^12.0.0", "@angular/cdk": "^12.0.2", "@angular/common": "^12.0.0", "@angular/compiler": "^12.0.0", "@angular/core": "^12.0.0", "@angular/forms": "^12.0.0", "@angular/material": "^12.0.2", "@angular/platform-browser": "^12.0.0", "@angular/platform-browser-dynamic": "^12.0.0", "@angular/router": "^12.0.0", "@angular/upgrade": "^12.0.0", ... "ngx-matomo": "^1.0.0-rc.1", ... }

When routeTracking is set to false everything looks fine. I've also tried to set it to false and run MatomoRouteTracker startTracking method manually at later point but it's the same issue.

It occurs for lazy loading routes.

[Arnaud73]

I did not test it yet. I was pretty sure it would work the same.
I'm going to try to reproduce this issue.
Stay tuned :)

[Arnaud73]

I made some tests with my demo application and so far, it's working correctly.

Can you explain me how you load the router and ngx-matomo modules in your app?

[khaled4vokalz]

I also get the same error when the AppModule doesn't use RouterModule and uses UIRouterModule.

Seems like someone else also facing this error #65

[dtomaszewski]

Hello, is there any progress here?

[mredaelli]

Same error after upgrading to angular 15. We use yarn, will try npm (see #65 (comment) )

[RomainFALLER]

Same error if you install the library using yarn.

[Arnaud73]

I'll try to reproduce this error. It's not quite common, but too many people suffer from it!
@RomainFALLER, can you provide me with your package.json file (at least the dependencies)? Also, are you working on Windows, macOS or Linux?

[RomainFALLER]

Hello,

Here are my dependencies :
"@angular/animations": "15.2.1",
"@angular/common": "15.2.1",
"@angular/compiler": "15.2.1",
"@angular/core": "15.2.1",
"@angular/forms": "15.2.1",
"@angular/platform-browser": "15.2.1",
"@angular/platform-browser-dynamic": "15.2.1",
"@ngrx/effects": "15.3.0",
"@ngrx/store": "15.3.0",
"@ngrx/store-devtools": "15.3.0",
"@sentry/angular-ivy": "^7.56.0",
"ngx-matomo": "^1.1.0",
"powerbi-client-angular": "^3.0.5",
"rxjs": "~7.8.0",
"tslib": "^2.5.0",
"zone.js": "~0.13.0"

Also, we are working on Windows.

I did the test again and I can confirm.

add ngx-matomo: 1.1.0 to package.json
yarn install
yarn start
--> error

rm -rf nodes_module/ngx-matomo
npm install ngx-matomo -f
yarn start
--> OK

[bastienjalbert]

Hello, I encounter the same issue using yarn as package manager. Looks to work with npm, but I use yarn everywhere.

[Arnaud73]

I shall now be able to reproduce. This might be an issue the optionalDepency as indicated in the package.json file of ngx-matomo.

[Arnaud73]

Hello, I encounter the same issue using yarn as package manager. Looks to work with npm, but I use yarn everywhere.

I also use yarn for all of my private projects, however, each and every Angular App I have is using the Angular Router, so I guess, I am in the sweet spot for not having any problem.

[Arnaud73]

@bastienjalbert or @RomainFALLER, I guess I found my mistake. I can build an updated version of the 2.0 or 1.1 version with this fix and send it directly to you for testing since I don't want to publish a test package on the NPM registry. All you would need to do is tell me which version you want patched (1.1 or 2.0), receive the TAR file, decompress it to your drive, modify your package.json file to update the ngx-matomo dependency and test. Who's in?

[RomainFALLER]

Let's do it.
The application I am working on is in Angular 15 so I prefer the version 1.1.
You can send it by mail : [email protected].

I will test it and let you know the result.

Thank you.

[bastienjalbert]

Hi @Arnaud73, may you push the branch with your modifications ? That way I'll build the package in local and try your fix.

[Arnaud73]

@bastienjalbert, the branch is fix/yarn_incompatibility, it is dedicated for ngx-matomo 2.0. If you want to backport it to version 1.1 cherrypick the commit and apply it on top of the commit you chose based on its tag. Don't forget to change the versions so does it does not look for Angular 16.
In order to build the library, just run npm run build:ngx-matomo:prod, the library will be in the dist folder

[RomainFALLER]

@Arnaud73 I followed the steps below :

1. Cherry pick the last commit on the version 1.1.0 (adapt the change of package.json with the one of 1.1.0).
2. yarn build
3. yarn pack --> the command generated a ngx-matomo-v1.1.0.tgz
4. Add ngx-matomo-v1.1.0.tgz in the file package.json of my project
5. yarn install in my project

I still have the error No provider for ActivatedRouter...
In my project, I have this dependency :
"@angular/router": "15.2.1"

The package.json of the ngx-matomo I am using is the one bellow:
package.json.txt

If I delete ngx-matomo and install with npm install ngx-matomo -f, it works withtout modifying my package.json.

If I modify my package.json with this, it works with yarn :
"@angular/router": "^15.2.1" instead of "@angular/router": "15.2.1"

Thank you.

Romain

[Arnaud73]

Too bad it does not work (however I think I will keep this modification).
I'm going to make a dedicated app to try to reproduce it.
@RomainFALLER, is there any additional indication of where the exception occurs in your code?

[RomainFALLER]

Here is the stack :

Also, I tested with @angular/router 15.2.9 and it works...

I will provide you other information if needed.

[Arnaud73]

Thanks @RomainFALLER!

I think I know my mistake. With the previous declaration of optional dependencies, @angular/router was not really optional for npm but was for yarn (and also a warning message during installation), thus was installed by npm and then the ActivatedRoute was available. Since I fixed the declaration of dependencies, neither npm nor yarn is installing @angular/router and as a result, ngx-matomo cannot access ActivatedRoute, thus resulting in an error when trying to work without the @angular/router.

Basically, I thought I was able to make the module work without @angular/router when no route tracking was activating, but my solution was not OK since the @angular/router was installed anyway, even when I was not asking for it.
I'll check the best practices for having optional dependencies in the code, but for the moment, I guess I will have to create another entry point in the library with a different definition of the library. You may need to change your import {…} from 'ngx-matomo' to import {…} from 'ngx-matomo/routerless' in order to use modules and services without a dependency to @angular/router.

Stay tuned, I'll post an update to my findings.

[RomainFALLER]

Thank you, very interesting.

I am waiting for your modifications :). However, you don't mention any connection with a possible version of the package @angular/router, so how can we explain the different behaviours regarding the version (15.2.1 vs 15.2.9 for example) ?

[Nek-]

I have the same error as @RomainFALLER on the latest version of the package and angular 16.1. angular/router is installed and should work as expected... I have no idea what I did wrong. I ended up removing the package... And I have no workaround sorry.