A module from NPM is missing @NgModule, @Directive declarations, though it is in the source code on Github. This is preventing me from importing a directive to databind from an HTML attribute.
I'm trying to use the angular-gtag package to log custom dimensions to Google Analytics using the [params] attribute as defined in the readme here: https://github.com/codediodeio/angular-gtag
<div gtagEvent trackOn="click" action="myAction" [params]="{ myDimension: myDimensionValue}"></div>
Where myDimensionValue is a variable of the containing component.
This causes an error:
Template parse errors:
Can't bind to 'params' since it isn't a known property of 'div'.
Reading up on this error (such as here: Angular 4 Can't bind to <property> since it isn't a known property of <component> or here: Can't bind to 'x' since it isn't a known property of 'y') leads to the suggestion that I need to add the GtagEventDirective class to the declarations in app.module.ts.
However, doing that leads to the error
Unexpected module 'GtagModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation
Looking in the source of the package in node_modules, any @Component or @Directive annotations are absent. Strangely enough, they are present in the module's source code on Github: https://github.com/codediodeio/angular-gtag/blob/master/lib/src/gtag-event.directive.ts and https://github.com/codediodeio/angular-gtag/blob/master/lib/src/gtag.module.ts
So what can I do here? Editing the code in node_modules doesn't seem like the best idea and changes here may not even be picked up as there are already transpiled files in the package.
I tried reinstalling the package. I'm certain I have the latest version (1.0.3) and the source in Github also lists that version as the latest.
Of course I could create an issue in the Github repo, but the source code there is correct. Any change I could ask for is already in there. My problem seems to be somewhere between NPM and my machine.
My application has a custom RouterModule. I had to import the GtagModule there and then it worked.
import { GtagModule } from 'angular-gtag';
@NgModule({
imports: [GtagModule]
})
export class CustomRoutingModule
In the error message, the source is given as ng://CustomRouterModule/MyComponent.html which indicates there is a custom router that's causing the problem.