ctorParameters.map不是angular2-mdl中的函数 [英] ctorParameters.map is not a function in 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中的函数

ctorParameters.map is not a function in angular2-mdl

我不知道该怎么办.

这是我的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不是函数

ctorParameters.map is not a function

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

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

如何解决此问题?:

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

1. 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 angular-cli@1.0.0-beta.24)

您可以将使用的软件包锁定为与旧的编译器输出格式匹配的版本.对于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版本编译的软件包? (例如，您的角度为2.4.1，并想使用angular2-mdl@2.7.0)是的！这个方向是向后兼容的.参见 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 angular2-mdl@2.7.0) 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中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！