ctorParameters.map 不是 angular2-mdl 中的函数
ctorParameters.map is not a function in angular2-mdl
我正在尝试将 angular2-mdl 与 angular-cli 一起使用。我在 app.module.ts.
中导入了 MdlModule
当我尝试使用 <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield> 时，出现错误：
ctorParameters.map is not a function in 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"
}
我遇到了同样的问题（使用另一个插件）并通过将 angular 升级到最新版本 (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"
}
}
看来这个问题需要澄清一下：
为什么我们会看到此错误消息？
如果 angular2 的组件库想要与 AOT 兼容，则需要使用 ngc (@angular/compiler-cli) 进行编译。这将为每个组件生成 *.metadata.json 文件。此外，这会为每个组件生成 js 文件，其中包含有关构造函数参数的信息。如果包是使用 @angular/compiler-cli < 2.3.0 的版本编译的，这将是（例如）：
MdlBadgeDirective.ctorParameters = [
{ type: ElementRef, },
{ type: Renderer, },
];
如果包是用较新的版本编译的，这将是：
MdlBadgeDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer, },
]; };
如您所见，新版本是一个函数，不再是一个数组。所以错误
ctorParameters.map is not a function
有道理。因为 map 是数组的成员而不是函数的成员。
如何解决这个问题？:
您可以将 angular 版本（或试图编译您的 angular2 代码的软件包）更新为新的编译器输出格式。例如。至少@angular/*@2.3.1。 （如果您正在使用 angular-cli，您应该将您的项目升级到 angular-cli@1.0.0-beta.24）
您可以将正在使用的包锁定为与旧编译器输出格式匹配的版本。对于 angular2-mdl，这是版本 2.7.0。您可以在此处找到此信息：https://github.com/mseemann/angular2-mdl#remarks.
是否可以将使用较旧的 angular-compiler-cli 编译的软件包与较新的 angular-compiler-cli 版本一起使用？ （例如，你在 angular 2.4.1 并且想使用 angular2-mdl@2.7.0）是的！这个方向是向后兼容的。参见 https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80
我通过查看来自 ng build 的错误报告找出了这个问题的原因：
npm WARN @angular/platform-server@2.4.4 requires a peer of @angular/core@2.4.4 but none was installed.
这让我意识到我的一个软件包预计 Angular 是 v2.4.4，但我使用的是 v2.0.1。我更新了我的 package.json 以将两个包都设置为我的核心版本，如下所示：
"dependencies": {
"@angular/core": "2.0.1",
"@angular/platform-server": "2.0.1",
}
您的问题可能与@angular/platform-server 无关，但我希望这有助于调试它
我遇到了同样的问题。这是因为我正在使用
"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",
然后我将 angular 依赖项更新为
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/platform-browser": "2.2.3",
它运行良好。
升级到 angular 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"
},
我试图重新构建一个相对 "ancient" Angular2 的应用程序（使用版本 2.0.0）和 ng-bootstrap。成功构建项目后（即没有错误）我在主页上收到此错误。
在尝试了除了扼杀自己之外的所有方法之后，我卸载了所有 npm 模块并尝试执行 npm install 并注意到 ng-bootsrap 安装了一个与 Angulare 2.0 不兼容的版本.0（ng-bootstrap 的 package.json 设置被设为 ~1.1.3）。安装了最新的 1.1.7 需要 Angular 2.4.x.
尝试升级到 2.4.x 证明是一项巨大的努力，所以我将 ng-bootstrap 设置为 1.1.4。
TL;DR：我正在使用 angular 2.0.0 和 ng-bootstrap。不想升级到 2.4.x 所以我将 ng-bootstrap 版本硬编码到 1.1.4，问题就消失了。
我正在尝试将 angular2-mdl 与 angular-cli 一起使用。我在 app.module.ts.
中导入了MdlModule
当我尝试使用 <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield> 时，出现错误：
ctorParameters.map is not a function in 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"
}
我遇到了同样的问题（使用另一个插件）并通过将 angular 升级到最新版本 (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"
}
}
看来这个问题需要澄清一下：
为什么我们会看到此错误消息？
如果 angular2 的组件库想要与 AOT 兼容，则需要使用 ngc (@angular/compiler-cli) 进行编译。这将为每个组件生成 *.metadata.json 文件。此外，这会为每个组件生成 js 文件，其中包含有关构造函数参数的信息。如果包是使用 @angular/compiler-cli < 2.3.0 的版本编译的，这将是（例如）：
MdlBadgeDirective.ctorParameters = [
{ type: ElementRef, },
{ type: Renderer, },
];
如果包是用较新的版本编译的，这将是：
MdlBadgeDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer, },
]; };
如您所见，新版本是一个函数，不再是一个数组。所以错误
ctorParameters.map is not a function
有道理。因为 map 是数组的成员而不是函数的成员。
如何解决这个问题？:
您可以将 angular 版本（或试图编译您的 angular2 代码的软件包）更新为新的编译器输出格式。例如。至少@angular/*@2.3.1。 （如果您正在使用 angular-cli，您应该将您的项目升级到 angular-cli@1.0.0-beta.24）
您可以将正在使用的包锁定为与旧编译器输出格式匹配的版本。对于 angular2-mdl，这是版本 2.7.0。您可以在此处找到此信息：https://github.com/mseemann/angular2-mdl#remarks.
是否可以将使用较旧的 angular-compiler-cli 编译的软件包与较新的 angular-compiler-cli 版本一起使用？ （例如，你在 angular 2.4.1 并且想使用 angular2-mdl@2.7.0）是的！这个方向是向后兼容的。参见 https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80
我通过查看来自 ng build 的错误报告找出了这个问题的原因：
npm WARN @angular/platform-server@2.4.4 requires a peer of @angular/core@2.4.4 but none was installed.
这让我意识到我的一个软件包预计 Angular 是 v2.4.4，但我使用的是 v2.0.1。我更新了我的 package.json 以将两个包都设置为我的核心版本，如下所示：
"dependencies": {
"@angular/core": "2.0.1",
"@angular/platform-server": "2.0.1",
}
您的问题可能与@angular/platform-server 无关，但我希望这有助于调试它
我遇到了同样的问题。这是因为我正在使用
"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",
然后我将 angular 依赖项更新为
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/platform-browser": "2.2.3",
它运行良好。
升级到 angular 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"
},
我试图重新构建一个相对 "ancient" Angular2 的应用程序（使用版本 2.0.0）和 ng-bootstrap。成功构建项目后（即没有错误）我在主页上收到此错误。
在尝试了除了扼杀自己之外的所有方法之后，我卸载了所有 npm 模块并尝试执行 npm install 并注意到 ng-bootsrap 安装了一个与 Angulare 2.0 不兼容的版本.0（ng-bootstrap 的 package.json 设置被设为 ~1.1.3）。安装了最新的 1.1.7 需要 Angular 2.4.x.
尝试升级到 2.4.x 证明是一项巨大的努力，所以我将 ng-bootstrap 设置为 1.1.4。
TL;DR：我正在使用 angular 2.0.0 和 ng-bootstrap。不想升级到 2.4.x 所以我将 ng-bootstrap 版本硬编码到 1.1.4，问题就消失了。