[英]ctorParameters.map is not a function in angular2-mdl
I'm trying to use angular2-mdl with angular-cli. 我正在尝试将angular2-mdl与angular-cli一起使用。 I imported
MdlModule
in app.module.ts. 我进口
MdlModule
在app.module.ts。
When I try to use <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>
, it makes an error: 当我尝试使用
<mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>
,出现错误:
ctorParameters.map is not a function in angular2-mdl
ctorParameters.map不是angular2-mdl中的函数
I have no idea what I should do. 我不知道该怎么办。
Here is my angular-cli.json. 这是我的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: 看起来这个问题需要一些澄清:
Why do we see this error message? 为什么我们会看到此错误消息?
If a component library for angular2 wants to be compatible with AOT it needs to be compiled with ngc (@angular/compiler-cli). 如果angular2的组件库希望与AOT兼容,则需要使用ngc(@ angular / compiler-cli)进行编译。 This will generate *.metadata.json files for each component.
这将为每个组件生成* .metadata.json文件。 Also this generates js files for each component that includes informations about the constructor parameters.
这还会为每个组件生成js文件,其中包含有关构造函数参数的信息。 If the package was compiled with a version of @angular/compiler-cli < 2.3.0 this would be (for example):
如果使用@ angular / compiler-cli <2.3.0版本编译了该软件包,则将是(例如):
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 is not a function
ctorParameters.map不是函数
makes sense. 说得通。 Because map is a member of array but not of function.
因为map是数组的成员,但不是函数的成员。
How to solve this Problem?: 如何解决这个问题呢?:
You can update your angular versions (or packages that are trying to compile your angular2 code) to the new compiler output format. 您可以将您的角度版本(或尝试编译angular2代码的软件包)更新为新的编译器输出格式。 Eg at least @angular/*@2.3.1.
例如至少@angular / * @ 2.3.1。 (If you are using angular-cli you should upgrade your project to angular-cli@1.0.0-beta.24)
(如果您使用的是angular-cli,则应将项目升级到angular-cli@1.0.0-beta.24)
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.
对于angular2-mdl,这是版本2.7.0。 You can find this information here: https://github.com/mseemann/angular2-mdl#remarks .
您可以在此处找到此信息: https : //github.com/mseemann/angular2-mdl#remarks 。
Is it possible to use a package that was compiled with an older angular-compiler-cli with a newer angular-compiler-cli version? 是否可以使用用较旧的angular-compiler-cli和较新的angular-compiler-cli版本编译的软件包? (eg you are at angular 2.4.1 and want to use angular2-mdl@2.7.0) Yes!
(例如,您的角度为2.4.1,并想使用angular2-mdl@2.7.0)是的! This direction is backward compatible.
这个方向是向后兼容的。 See https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80
参见https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80
I had the same problem (with another plugin) and solved it by upgrading angular to the latest version (2.4.1). 我遇到了同样的问题(使用另一个插件),并通过将angular升级到最新版本(2.4.1)解决了该问题。
EDIT: Full packages.json 编辑:完整packages.json
Check your Typescript version also. 还要检查您的打字稿版本。 I had to stop using Angular-cli due to the continuous problems when compiling.
由于编译时不断出现问题,我不得不停止使用Angular-cli。 I switched to webpack.
我切换到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"
}
}
I was able to figure out the cause of this issue by looking at the error report from ng build
: 通过查看
ng build
的错误报告,我能够找出此问题的原因:
npm WARN @angular/platform-server@2.4.4 requires a peer of @angular/core@2.4.4 but none was installed.
This helped me realize that one of my packages expected Angular to be at v2.4.4, but I'm using v2.0.1. 这使我意识到我的一个软件包期望Angular的版本为v2.4.4,但是我正在使用v2.0.1。 I updated my package.json to have both packages set to my core version like this:
我更新了package.json以将两个软件包都设置为我的核心版本,如下所示:
"dependencies": {
"@angular/core": "2.0.1",
"@angular/platform-server": "2.0.1",
}
Your issue might not be with @angular/platform-server, but I hope this helps debug it 您的问题可能与@ angular / platform-server无关,但我希望这有助于调试它
I had that same issue. 我有同样的问题。 it was causing because i was using
这是因为我正在使用
"ng2-bootstrap": "^1.3.1", “ ng2-bootstrap”:“ ^ 1.3.1”,
"@angular/common": "2.0.1", “ @ angular / common”:“ 2.0.1”,
"@angular/compiler": "2.0.1", “ @ angular / compiler”:“ 2.0.1”,
"@angular/core": "2.0.1", “ @ angular / core”:“ 2.0.1”,
"@angular/platform-browser": "2.0.1", “ @ angular / platform-browser”:“ 2.0.1”,
Then I updated angular dependencies to 然后我将角度依赖性更新为
"@angular/common": "2.2.3", “ @ angular / common”:“ 2.2.3”,
"@angular/compiler": "2.2.3", “ @ angular / compiler”:“ 2.2.3”,
"@angular/core": "2.2.3", “ @ angular / core”:“ 2.2.3”,
"@angular/platform-browser": "2.2.3", “ @ angular / platform-browser”:“ 2.2.3”,
it worked fine. 工作正常。
after upgrade to angular 2.4.6 it work fine 升级到角度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"
},
I was trying to re-build a relatively "ancient" Angular2 application (uses version 2.0.0) and ng-bootstrap. 我试图重建一个相对“古老”的Angular2应用程序(使用2.0.0版)和ng-bootstrap。 After successfully building the project (ie, no error) I'm getting this error on the home page.
成功构建项目后(即无错误),我在主页上收到此错误。
After trying everything short of strangling myself, I uninstalled all npm modules and tried to do an npm install
and noticed that the ng-bootsrap installed a version that is not compatible with Angulare 2.0.0 (the package.json setting for ng-bootstrap
was set to ~1.1.3
). 在尝试了所有扼杀自己的事情之后,我卸载了所有npm模块并尝试进行
npm install
并注意到ng-bootsrap安装了与Angulare 2.0.0不兼容的版本( ng-bootstrap
的package.json设置为设置为~1.1.3
)。 That installed the latest 1.1.7
which required Angular 2.4.x
. 那安装了最新的
1.1.7
,需要2.4.x
。
Trying to upgrade to 2.4.x
turned out to be a huge endeavor so I set the ng-bootstrap to 1.1.4 instead. 尝试升级到
2.4.x
确实是一项巨大的工作,因此我将ng-bootstrap设置为1.1.4。
TL;DR: am using angular 2.0.0 and ng-bootstrap. TL; DR:我正在使用angular 2.0.0和ng-bootstrap。 don't want to upgrade to 2.4.x so i hard-codede the ng-bootstrap version to 1.1.4 and the problem went away.
不想升级到2.4.x,所以我将ng-bootstrap版本硬编码为1.1.4,问题消失了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.