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

时间:2016-12-22 14:54:18

标签: angular angular-cli angular2-mdl

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

5 个答案:

答案 0 :(得分:28)

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

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

如果angular2的组件库想要与AOT兼容,则需要使用ngc(@ angular / compiler-cli)进行编译。这将为每个组件生成* .metadata.json文件。此外,这会为每个组件生成包含有关构造函数参数的信息的js文件。如果包是使用@ angular / compiler-cli&lt;的版本编译的。 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

  3. 是否可以使用使用较新的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

答案 1 :(得分:5)

我有同样的问题(使用另一个插件)并通过将角度升级到最新版本(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"
  }
}

答案 2 :(得分:2)

通过查看import org.apache.spark.ml.feature.VectorAssembler import org.apache.spark.ml.clustering.KMeans // assembler to collect all interesting columns into a single features column val assembler = (new VectorAssembler(). setInputCols(Array("Ward", "Longitude", "X_Coordinate", "Beat", "Latitude", "District", "Y_Coordinate", "Community_Area")). setOutputCol("features")) val data = assembler.transform(city) val kmeans = new KMeans() val model = kmeans.fit(data) model.getK // res28: Int = 2 example here 的错误报告,我能够找出问题的原因:

ng build

这让我意识到我的一个软件包期望Angular处于v2.4.4,但我使用的是v2.0.1。我更新了我的package.json,将这两个软件包设置为我的核心版本,如下所示:

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

你的问题可能不是@ angular / platform-server,但我希望这有助于调试它

答案 3 :(得分:0)

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

“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”,

它运作良好。

答案 4 :(得分:0)

我试图重新构建一个相对“古老的”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:我正在使用角度2.0.0和ng-bootstrap。不想升级到2.4.x所以我将ng-bootstrap版本硬编码到1.1.4,问题就消失了。