ctorParameters.map不是angular2-mdl中的函数

Question

我正在尝试将angular2-mdl与angular-cli一起使用。 我进口MdlModule在app.module.ts。

当我尝试使用<mdl-textfield type="text" label="Text..." floating-label></mdl-textfield> ，出现错误：

ctorParameters.map不是angular2-mdl中的函数

我不知道该怎么办。

这是我的angular-cli.json。

  "dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "@types/moment-timezone": "^0.2.33",
    "angular-cli": "^1.0.0-beta.17",
    "angular2-jwt": "^0.1.25",
    "angular2-mdl": "^2.9.0",
    "bootstrap": "^3.3.7",
    "bourbon": "^4.2.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.10",
    "node-sass": "^3.13.0",
    "primeng": "^1.1.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.33",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "bootstrap-sass": "^3.3.7",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }

Answer 1

看起来这个问题需要一些澄清：

为什么我们会看到此错误消息？

如果angular2的组件库希望与AOT兼容，则需要使用ngc（@ angular / compiler-cli）进行编译。 这将为每个组件生成* .metadata.json文件。 这还会为每个组件生成js文件，其中包含有关构造函数参数的信息。 如果使用@ angular / compiler-cli <2.3.0版本编译了该软件包，则将是（例如）：

MdlBadgeDirective.ctorParameters = [
        { type: ElementRef, },
        { type: Renderer, },
];

如果该软件包是使用较新版本编译的，则将是：

MdlBadgeDirective.ctorParameters = function () { return [
        { type: ElementRef, },
        { type: Renderer, },
]; };

如您所见，较新的版本是一个函数，不再是数组。 所以错误

ctorParameters.map不是函数

说得通。 因为map是数组的成员，但不是函数的成员。

如何解决这个问题呢？：

1. 您可以将您的角度版本（或尝试编译angular2代码的软件包）更新为新的编译器输出格式。 例如至少@angular / * @ 2.3.1。 （如果您使用的是angular-cli，则应将项目升级到angular-cli@1.0.0-beta.24）

2. 您可以将使用的软件包锁定为与旧编译器输出格式匹配的版本。 对于angular2-mdl，这是版本2.7.0。 您可以在此处找到此信息： https : //github.com/mseemann/angular2-mdl#remarks 。

是否可以使用用较旧的angular-compiler-cli和较新的angular-compiler-cli版本编译的软件包？ （例如，您的角度为2.4.1，并想使用angular2-mdl@2.7.0）是的！ 这个方向是向后兼容的。 参见https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

Answer 2

我遇到了同样的问题（使用另一个插件），并通过将angular升级到最新版本（2.4.1）解决了该问题。

编辑：完整packages.json

还要检查您的打字稿版本。 由于编译时不断出现问题，我不得不停止使用Angular-cli。 我切换到webpack。

{
  "name": "web-app",
  "version": "1.0.0",
  "scripts": {
    ....
  },
  "license": "UNLICENSED",
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.1",
    "codelyzer": "^1.0.0-beta.3",
    "concurrently": "^3.1.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "tslint": "^4.2.0",
    "typescript": "^2.1.4",
    "typings": "^2.1.0",
    "zone.js": "^0.7.4",
    ...
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.4.1",
    "@ngtools/webpack": "^1.2.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "ts-loader": "^1.3.3"
  }
}

Answer 3

通过查看ng build的错误报告，我能够找出此问题的原因：

npm WARN @angular/platform-server@2.4.4 requires a peer of @angular/core@2.4.4 but none was installed.

这使我意识到我的一个软件包期望Angular的版本为v2.4.4，但是我正在使用v2.0.1。 我更新了package.json以将两个软件包都设置为我的核心版本，如下所示：

"dependencies": {
    "@angular/core": "2.0.1",
    "@angular/platform-server": "2.0.1",
}

您的问题可能与@ angular / platform-server无关，但我希望这有助于调试它

Answer 4

我有同样的问题。 这是因为我正在使用

“ ng2-bootstrap”：“ ^ 1.3.1”，

“ @ angular / common”：“ 2.0.1”，

“ @ angular / compiler”：“ 2.0.1”，

“ @ angular / core”：“ 2.0.1”，

“ @ angular / platform-b​​rowser”：“ 2.0.1”，

然后我将角度依赖性更新为

“ @ angular / common”：“ 2.2.3”，

“ @ angular / compiler”：“ 2.2.3”，

“ @ angular / core”：“ 2.2.3”，

“ @ angular / platform-b​​rowser”：“ 2.2.3”，

工作正常。

Answer 5

升级到角度2.4.6后，它可以正常工作

 "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/compiler-cli":"2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser":"2.4.6",
    "@angular/platform-browser-dynamic":"2.4.6",
    "@angular/platform-server":"2.4.6",
    "@ionic/storage": "1.1.6",
    "@types/jasmine": "2.5.37",
    "@types/moment-timezone": "^0.2.34",
    "@types/request": "0.0.33",
    "angular-qrcode": "^6.2.1",
    "angular2-fullcalendar": "^1.1.1",
    "angular2-qrcode": "^2.0.0",
    "angularfire2": "2.0.0-beta.6",
    "ionic-angular": "^2.0.0-201702062042",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "moment": "^2.17.0",
    "ng2-signalr": "^2.0.3",
    "rxjs": "5.1.0",
    "zone.js": "0.7.6"
  },

Answer 6

我试图重建一个相对“古老”的Angular2应用程序（使用2.0.0版）和ng-bootstrap。 成功构建项目后（即无错误），我在主页上收到此错误。

在尝试了所有扼杀自己的事情之后，我卸载了所有npm模块并尝试进行npm install并注意到ng-bootsrap安装了与Angulare 2.0.0不兼容的版本（ ng-bootstrap的package.json设置为设置为~1.1.3 ）。 那安装了最新的1.1.7 ，需要2.4.x 。

尝试升级到2.4.x确实是一项巨大的工作，因此我将ng-bootstrap设置为1.1.4。

TL; DR：我正在使用angular 2.0.0和ng-bootstrap。 不想升级到2.4.x，所以我将ng-bootstrap版本硬编码为1.1.4，问题消失了。