An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

Question

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

There seems to be a missing @NgModule and @Directive declarations in an NPM module, even though they exist in the source code on Github. This is causing an issue with importing a directive for databinding from an HTML attribute.

I am attempting to utilize the angular-gtag package to log custom dimensions to Google Analytics using the [params] attribute as described 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 within the containing component.

This results in an error:

Template parse errors:
Can't bind to 'params' since it isn't a known property of 'div'.

After researching this error (like 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'), it appears that adding the GtagEventDirective class to the declarations in app.module.ts could resolve the issue.

Yet, doing so triggers the error:

Unexpected module 'GtagModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation

Upon inspection of the package's source in node_modules, there are no @Component or @Directive annotations present. Interestingly, these annotations do exist 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

What steps can I take next? Modifying the code in node_modules doesn't seem ideal, and any changes may not be recognized as there are already transpiled files in the package.

I have attempted to reinstall the package. It appears that I am using the latest version (1.0.3) as indicated in the Github source. However, the issue persists.

While creating an issue in the Github repository is an option, the source code there is accurate. Any necessary changes are already incorporated. The problem appears to lie between NPM and my local environment.

angular typescript angular-module

Answer 1

Answer №1

The npm library is comprehensive and covers all necessary components. However, without access to your specific code, I can only share what I have implemented:

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

To identify the error, ensure that the gtagEvent attribute is present in the div element.

Answer 2

The npm library is comprehensive and covers all necessary components. However, without access to your specific code, I can only share what I have implemented:

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

To identify the error, ensure that the gtagEvent attribute is present in the div element.

Answer 3

Answer №2

After incorporating a custom RouterModule in my application, I found that importing the GtagModule was necessary for it to function correctly.

import { GtagModule } from 'angular-gtag';

@NgModule({
  imports: [GtagModule]
})
export class CustomRoutingModule

An error message pointed to ng://CustomRouterModule/MyComponent.html as the source of the issue, indicating that a custom router may be causing the problem.

Answer 4

After incorporating a custom RouterModule in my application, I found that importing the GtagModule was necessary for it to function correctly.

import { GtagModule } from 'angular-gtag';

@NgModule({
  imports: [GtagModule]
})
export class CustomRoutingModule

An error message pointed to ng://CustomRouterModule/MyComponent.html as the source of the issue, indicating that a custom router may be causing the problem.

Answer 5

Answer №3

In cases where the source information is accurate but some files are absent from the release, a feasible solution would be to link your dependency directly to GitHub.

Consider using:

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

Answer 6

In cases where the source information is accurate but some files are absent from the release, a feasible solution would be to link your dependency directly to GitHub.

Consider using:

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

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

Answer №1

Answer №2

Answer №3

Similar questions

A guide to implementing unit tests for Angular directives with the Jest testing framework

Is it possible for users to customize the window size in an Angular 8 application?

I attempted to simulate the mat-dialog in Angular that contains the ngOnInit method, but unfortunately, it is not being successfully tested

Obtain values from a specific set, and then filter out values from an array that correspond to the index of that set into distinct arrays

What is the best way to connect Classes and Objects in Angular5?

Maintain the default type for the generic type parameter

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

You are unable to declare an Angular component as an abstract class within a module

What methods are available to enhance the appearance of a string with TypeScript Angular in Python?

Angular 2 ngx-modal: A User-Friendly Modal Component

Union types discriminate cases within an array

Resolving the active tab problem within Angular 2 tab components

Trouble installing Angular: ENOENT Error causing issues

Error: The function type 'Dispatch<SetStateAction<string>>' cannot be assigned to the type '(value: OptionValue) => void'

How to Verify Username in Angular2 and Sails Framework

How does the highlighting feature in Fuse.js includeMatches function operate?

Encountering a Prettier error with React Native 0.71 and Typescript

"Uploading user profile images with Angular, Express, Multer, and Mongoose made easy

The favicon appears broken upon opening a new tab

Guide to create a React component with passed-in properties