В модуле Angular из npm отсутствует объявление @NgModule

В модуле из NPM отсутствуют объявления @NgModule, @Directive, хотя он есть в исходном коде на Github. Это мешает мне импортировать директиву для привязки данных из атрибута HTML.

Я пытаюсь использовать пакет angular-gtag для регистрации пользовательских параметров в Google Analytics с использованием атрибута [params], как определено в файле readme здесь: https://github.com/codediodeio/angular-gtag

<div gtagEvent trackOn="click" action="myAction" [params]="{ myDimension: myDimensionValue}"></div>

Где myDimensionValue — это переменная содержащего компонента.

Это вызывает ошибку:

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

Чтение этой ошибки (например, здесь: Angular 4 Невозможно привязать к ‹property›, так как это не известное свойство ‹component› или здесь: Невозможно выполнить привязку к 'x', так как это неизвестное свойство 'y') приводит к предположению, что мне нужно добавить класс GtagEventDirective в объявления в app.module.ts.

Однако это приводит к ошибке

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

Глядя в источник пакета в node_modules, любые аннотации @Component или @Directive отсутствуют. Как ни странно, они присутствуют в исходном коде модуля на Github: https://github.com/codediodeio/angular-gtag/blob/master/lib/src/gtag-event.directive.ts и https://github.com/codediodeio/angular-gtag/blob/master/lib/src/gtag.module.ts

Так что я могу сделать здесь? Редактирование кода в node_modules не кажется лучшей идеей, и изменения здесь могут даже не подхватываться, поскольку в пакете уже есть транспилированные файлы.

Пробовал переустановить пакет. Я уверен, что у меня последняя версия (1.0.3), и источник в Github также указывает эту версию как последнюю.

Конечно, я мог бы создать проблему в репозитории Github, но исходный код там правильный. Любое изменение, которое я мог бы попросить, уже там. Моя проблема, кажется, где-то между NPM и моей машиной.


typescript angular angular-module
person Simmetric    schedule 14.08.2019    source источник
comment
Вы можете показать, как вы импортировали GtagModule в свой AppModule?   -  person Poul Kruijt    schedule 14.08.2019
comment
В соответствии с инструкциями в файле readme я добавил его следующим образом: import { GtagModule} from 'angular-gtag'; @NgModule({ объявления: [AppComponent], импорт: [ ... GtagModule.forRoot({ trackingId: 'UA-something', trackPageviews: true } ) ... ], ... })   -  person Simmetric    schedule 14.08.2019
comment
пакет, который вы загружаете из npm, не будет иметь исходного кода и/или файла js с @Directive. Это используется только в машинописном тексте, а модуль npm, вероятно, просто отправляет скомпилированный код es5.   -  person Poul Kruijt    schedule 14.08.2019
comment
Модуль npm в порядке. Я заставил его работать. Нам нужно увидеть, как вы делаете вещи, чтобы найти вашу проблему   -  person SGalea    schedule 14.08.2019

Ответы (3)


arrow_upward
1
arrow_downward

В библиотеке на npm ничего не упущено. Но так как мы не можем видеть ваш код. Я собираюсь опубликовать то, что я сделал.

пакет.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>

демонстрация Если вы все еще не нашли где. повторите свою проблему на stackblitz

Единственный способ воспроизвести вашу ошибку — удалить gtagEvent из div

person SGalea    schedule 14.08.2019

arrow_upward
0
arrow_downward

Если исходный код правильный, но в релизе отсутствуют файлы, вы можете напрямую связать свою зависимость с github.

пытаться :

npm install --save https://github.com/codediodeio/angular-gtag#master
person Romain Verclytte    schedule 14.08.2019

arrow_upward
0
arrow_downward

В моем приложении есть собственный RouterModule. Мне пришлось импортировать GtagModule туда, и тогда это сработало.

import { GtagModule } from 'angular-gtag';

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

В сообщении об ошибке источник указан как ng://CustomRouterModule/MyComponent.html, что указывает на наличие пользовательского маршрутизатора, вызывающего проблему.

person Simmetric    schedule 15.08.2019
comment
Вероятно, вы используете его в подмодуле. потому что он работает с модулем маршрутизации stackblitz.com/edit/angular-n2ezcx. Если это так, это это та же концепция, почему мы используем SharedModule, и я бы не рекомендовал импортировать в RoutingModule - person SGalea; 19.08.2019