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

【问题标题】：ctorParameters.map is not a function in angular2-mdlctorParameters.map 不是 angular2-mdl 中的函数
【发布时间】：2017-05-08 05:47:22
【问题描述】：

我正在尝试将 angular2-mdl 与 angular-cli 一起使用。我在 app.module.ts 中导入了MdlModule。

当我尝试使用<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"
  }

【问题讨论】：

标签： angular angular-cli angular2-mdl

【解决方案1】：

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

编辑：完整的 packages.json

还要检查您的 Typescript 版本。由于编译时不断出现问题，我不得不停止使用 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"
  }
}

【讨论】：

你的意思是 angular 2.4.1 吗？
@MingyuJeon 是的，Angular 2.4.1。如果您的问题仍然存在，我将在明天复制整个 packages.json。
谢谢！我会等的。
有效！太感谢了！我认为原因是版本:)
@MingyuJeon 很高兴它成功了！您会将帖子标记为答案吗？

【解决方案2】：

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

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

如果 angular2 的组件库想要与 AOT 兼容，则需要使用 ngc (@angular/compiler-cli) 进行编译。这将为每个组件生成 *.metadata.json 文件。这也会为每个组件生成 js 文件，其中包含有关构造函数参数的信息。如果包是用 @angular/compiler-cli

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

如果包是用更新的版本编译的，这将是：

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

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

ctorParameters.map 不是函数

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

如何解决这个问题？：

您可以将 Angular 版本（或尝试编译 angular2 代码的包）更新为新的编译器输出格式。例如。至少@angular/*@2.3.1。（如果你使用 angular-cli，你应该将你的项目升级到 angular-cli@1.0.0-beta.24）
您可以将正在使用的包锁定到与旧编译器输出格式匹配的版本。对于 angular2-mdl，这是 2.7.0 版。您可以在此处找到此信息：https://github.com/mseemann/angular2-mdl#remarks。

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

【讨论】：

感谢详细解释！我通过版本更新解决了这个问题，但是感谢您的友好解释，我可以理解为什么会这样。 :)
我发现这个问题可能是由于任何数量的包都期望 Angular 与实际安装的不同。对我来说，运行 ng build 显示了具体问题：npm WARN @angular/platform-server@2.4.4 requires a peer of @angular/core@2.4.4 but none was installed. 通过在我的 package.json 中将两个包都设置为 2.0.1 来修复它："dependencies": { "@angular/core": "2.0.1", "@angular/platform-server": "2.0.1", }

【解决方案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 无关，但我希望这有助于调试它

【讨论】：

【解决方案4】：

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

"ng2-bootstrap": "^1.3.1",

"@angular/common": "2.0.1",

"@angular/compiler": "2.0.1",

"@angular/core": "2.0.1",

"@angular/platform-browser": "2.0.1",

然后我将角度依赖更新为

"@angular/common": "2.2.3",

"@angular/compiler": "2.2.3",

"@angular/core": "2.2.3",

"@angular/platform-browser": "2.2.3",

效果很好。

【讨论】：

【解决方案5】：

升级到 Angular 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"
  },

【讨论】：

【解决方案6】：

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

在尝试了所有没有扼杀自己的方法后，我卸载了所有 npm 模块并尝试执行npm install 并注意到 ng-bootsrap 安装的版本与 Angulare 2.0.0 不兼容（package.json 设置为ng-bootstrap 设置为 ~1.1.3)。这安装了最新的1.1.7，它需要Angular 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，问题就消失了。

【讨论】：