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

Question

我试着用有棱角的2 mdl。我在app.module.ts中导入了app.module.ts。

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

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

我不知道该怎么办。

这是我的角-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 (@ar角/编译器-cli)进行编译。这将为每个组件生成*.metadata.json文件。此外，这将为每个组件生成js文件，其中包含有关构造函数参数的信息。如果该包是用@angular/编译器-cli< 2.3.0版本编译的，这将是(例如)：

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

如果包是用较新的版本编译的，则如下所示：

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

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

ctorParameters.map不是一个函数

合乎道理。因为map是数组的成员，而不是函数的成员。

如何解决这个问题？：

1. 您可以将棱角版本(或试图编译angular2代码的包)更新为新的编译器输出格式。例如至少“角”/*@2.3.1。(如果您使用的是角-cli，您应该将您的项目升级到角-cli@1.0.0-beta.24)
2. 您可以将正在使用的包锁定到与旧编译器输出格式匹配的版本。对于angular2-mdl，这是2.7.0版。您可以在这里找到以下信息：https://github.com/mseemann/angular2-mdl#remarks。

是否有可能使用用较旧的角编译器-cli编译的包，并使用更新的角编译器-cli版本？(例如，你的角度是2.4.1，想使用angular2-mdl@2.7.0)是的！这个方向是向后兼容的。请参阅capabilities.ts#L80

Answer 2

我也有同样的问题(用另一个插件)，并通过升级到最新版本(2.4.1)来解决它。

编辑:完整packages.json

检查您的打字本版本。由于编译过程中不断出现的问题，我不得不停止使用角-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.

这帮助我意识到，我的一个包的角度预期为v2.4.4，但我使用的是v2.0.1。我更新了我的package.json，使两个包都设置为我的核心版本，如下所示：

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

您的问题可能不是@ar角/platform-server，但我希望这有助于调试它。