Angular 来自 npm 的模块缺少 @NgModule 声明

Question

NPM 的一个模块缺少 @NgModule、@Directive 声明，尽管它在 Github 的源代码中。这阻止我从 HTML 属性导入数据绑定指令。

我正在尝试使用 angular-gtag 包将自定义维度记录到 Google Analytics，使用此处自述文件中定义的 [params] 属性：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'.

阅读此错误（例如此处： or here: ）导致我需要将 GtagEventDirective class 添加到 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 and https://github.com/codediodeio/angular-gtag/blob/master/lib/src/gtag.module.ts

那我能在这里做什么呢？编辑 node_modules 中的代码似乎不是最好的主意，这里的更改甚至可能不会被采纳，因为包中已经有转译的文件。

我尝试重新安装软件包。我确定我有最新版本 (1.0.3) 并且 Github 中的源也将该版本列为最新版本。

当然我可以在 Github 仓库中创建一个问题，但那里的源代码是正确的。我可以要求的任何更改都已经在那里了。我的问题似乎介于 NPM 和我的机器之间。

Answer 1

如果源是正确的但发布中缺少文件，您可以link直接将您的依赖关系github。

尝试：

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

Answer 2

npm 上的库没有遗漏任何东西。但是因为我们看不到你的代码。我要post我所做的。

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

我可以复制您的错误的唯一方法是从 div

中删除 gtagEvent

Answer 3

我的应用程序有一个自定义 RouterModule。我不得不在那里导入 GtagModule 然后它就起作用了。

import { GtagModule } from 'angular-gtag';

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

在错误消息中，源以 ng://CustomRouterModule/MyComponent.html 的形式给出，这表明存在导致问题的自定义路由器。

Angular 来自 npm 的模块缺少 @NgModule 声明

Angular module from npm missing @NgModule declaration

angular

typescript

angular-module