Angular module from npm missing @NgModule declaration

Question

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.

can you show how you imported the GtagModule in your AppModule? — Poul Kruijt
– Poul Kruijt, Commented Aug 14, 2019 at 9:53
As per the instructions in the readme, I've added it as follows: import { GtagModule} from 'angular-gtag'; @NgModule({ declarations: [AppComponent], imports: [ ... GtagModule.forRoot({ trackingId: 'UA-something', trackPageviews: true }) ... ], ... }) — Simmetric
– Simmetric, Commented Aug 14, 2019 at 9:55
the package you download from npm will not have the source code and/or a js file with @Directive. This is only used in typescript, and the npm module probably just ships the compiled es5 code — Poul Kruijt
– Poul Kruijt, Commented Aug 14, 2019 at 9:57
npm module is fine. I got it to work. We need to see how you are doing things to find your issue — SGalea
– SGalea, Commented Aug 14, 2019 at 10:16

SGalea · Accepted Answer · 2019-08-14 10:31:27Z

The library on npm is not missing anything. But since we cant see your code. I'm going to post what I did.

package.json

...
  "dependencies": {
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "angular-gtag":"1.0.3",
    "core-js": "2",
    "rxjs": "^6.5.2",
    "zone.js": "^0.9.1"
  },
...

index.html

<html>

<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-5FJXX6">
    </script>
    <script>
        window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GTM-5FJXX6', { 'send_page_view': false });

    </script>
</head>

<body>
    <my-app>loading</my-app>
</body>

</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { GtagModule } from 'angular-gtag';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
  imports:
    [
      GtagModule.forRoot({ trackingId: 'GTM-5FJXX6', trackPageviews: true }),

      BrowserModule,
      FormsModule,
      RouterModule.forRoot(
        [
          { path: "", component: HelloComponent }
        ]
      ),

    ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Gtag } from 'angular-gtag';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
   constructor(gtag: Gtag) {}
}

app.component.html

<hello name="{{ name }}"></hello>
<div gtagEvent
     trackOn="dragstart"
     action="product_dragged"
     category="ecommerce"
     [params]="{ event_label: 'Something cool just happened' }">

   Some Product...

</div>

demo If you still don't find where. replicate your issue on stackblitz

The only way I can replicate your error is by removing gtagEvent from the div

Simmetric · Accepted Answer · 2019-08-15 09:09:26Z

1

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.

edited Aug 15, 2019 at 9:09

answered Aug 15, 2019 at 8:59

Simmetric

1,6992 gold badges15 silver badges24 bronze badges

1 Comment

SGalea Over a year ago

You are probably using it in a sub-module. because it works with a routing module stackblitz.com/edit/angular-n2ezcx If so, this is the same concept of why we use a SharedModule and importing in RoutingModule is not something I would recommend

Romain Verclytte · Accepted Answer · 2019-08-14 10:00:28Z

0

If the source is correct but files are missing in the release, you can link directly your depedendency to github.

try :

npm install --save https://github.com/codediodeio/angular-gtag#master

answered Aug 14, 2019 at 10:00

Romain Verclytte

12 bronze badges

Collectives™ on Stack Overflow

Angular module from npm missing @NgModule declaration

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related