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

本文介绍了ctorParameters.map 不是 angular2-mdl 中的函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm trying to use angular2-mdl with angular-cli. I imported MdlModule in app.module.ts.

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

When I try to use <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>, it makes an error:

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

我不知道我应该做什么.

I have no idea what I should do.

这是我的 angular-cli.json.

Here is my 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"
  }

推荐答案

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

Looks like this question needs some clarification:

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

如果angular2的组件库想要兼容AOT，就需要用ngc(@angular/compiler-cli)编译.这将为每个组件生成 *.metadata.json 文件.此外，这会为每个组件生成 js 文件，其中包含有关构造函数参数的信息.如果包是用@angular/compiler-cli < 的版本编译的2.3.0 这将是(例如):

If a component library for angular2 wants to be compatible with AOT it needs to be compiled with ngc (@angular/compiler-cli). This will generate *.metadata.json files for each component. Also this generates js files for each component that includes informations about the constructor parameters. If the package was compiled with a version of @angular/compiler-cli < 2.3.0 this would be (for example):

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

如果包是用较新的版本编译的，这将是:

If the package is compiled with a newer version this will be:

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

如你所见，新版本是一个函数，不再是一个数组.所以错误

As you can see the newer version is a function and no longer an array. So the error

ctorParameters.map 不是函数

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

makes sense. Because map is a member of array but not of function.

如何解决这个问题?:

您可以将 angular 版本(或尝试编译 angular2 代码的包)更新为新的编译器输出格式.例如.至少@angular/*@2.3.1.(如果你使用 angular-cli，你应该将你的项目升级到 [email protected])

You can update your angular versions (or packages that are trying to compile your angular2 code) to the new compiler output format. E.g. at least @angular/*@2.3.1. (If you are using angular-cli you should upgrade your project to [email protected])

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

You can lock the package you are using to a version that matches the old compiler output format. For angular2-mdl this is version 2.7.0. You can find this information here: https://github.com/mseemann/angular2-mdl#remarks.

是否可以将使用较旧的 angular-compiler-cli 编译的包与较新的 angular-compiler-cli 版本一起使用?(例如，您在 angular 2.4.1 并且想要使用 [email protected])是的！这个方向是向后兼容的.见 https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

Is it possible to use a package that was compiled with an older angular-compiler-cli with a newer angular-compiler-cli version? (e.g. you are at angular 2.4.1 and want to use [email protected]) Yes! This direction is backward compatible. See https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

这篇关于ctorParameters.map 不是 angular2-mdl 中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MDL