问题
I\'m trying to use angular2-mdl with angular-cli. I imported MdlModule in app.module.ts.
When I try to use <mdl-textfield type=\"text\" label=\"Text...\" floating-label></mdl-textfield>, it makes an error:
ctorParameters.map is not a function in angular2-mdl
I have no idea what I should do.
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\"
}
回答1:
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). 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 is not a function
makes sense. Because map is a member of array but not of function.
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. 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)
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.
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
回答2:
I had the same problem (with another plugin) and solved it by upgrading angular to the latest version (2.4.1).
EDIT: Full packages.json
Check your Typescript version also. I had to stop using Angular-cli due to the continuous problems when compiling. I switched to 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"
}
}
回答3:
I was able to figure out the cause of this issue by looking at the error report from 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. I updated my package.json to have both packages set to my core version like this:
"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
回答4:
I had that same issue. it was causing because i was using
"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",
Then I updated angular dependencies to
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/platform-browser": "2.2.3",
it worked fine.
回答5:
after upgrade to angular 2.4.6 it work fine
"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:
I was trying to re-build a relatively "ancient" Angular2 application (uses version 2.0.0) and ng-bootstrap. After successfully building the project (i.e., 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). That installed the latest 1.1.7 which required Angular 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.
TL;DR: am using angular 2.0.0 and 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.
来源：https://stackoverflow.com/questions/41285889/ctorparameters-map-is-not-a-function-in-angular2-mdl