web-dev-qa-db-ja.com

ctorParameters.mapは、angular2-mdlの関数ではありません

Angular-cliでangular2-mdlを使用しようとしています。 MdlModuleをapp.module.tsにインポートしました。

<mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>を使用しようとすると、エラーが発生します。

ctorParameters.mapは、angular2-mdlの関数ではありません

私は何をすべきかわかりません。

ここに私のangle-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"
  }
angularangular-cliangular2-mdl
13
Mingyu Jeon

この質問には説明が必要なようです：

なぜこのエラーメッセージが表示されるのですか？

Angle2のコンポーネントライブラリが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は関数ではありません

理にかなっています。 mapは配列のメンバーですが、関数のメンバーではないためです。

この問題を解決するには？：

  1. angularバージョン（または、angular2コードをコンパイルしようとしているパッケージ）を新しいコンパイラ出力形式に更新できます。たとえば、少なくとも@angular/* @ 2.3.1です。 angular-cliを使用して、プロジェクトを[email protected]にアップグレードする必要があります）

  2. 使用しているパッケージを、古いコンパイラー出力形式と一致するバージョンにロックできます。 angular2-mdlの場合、これはバージョン2.7.0です。この情報は、ここで見つけることができます： https://github.com/mseemann/angular2-mdl#remarks 。

古いangle-compiler-cliと新しいangle-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#L8

28
michael

同じ問題が（別のプラグインで）あり、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"
  }
}
5
Martin

ng buildからのエラーレポートを見ると、この問題の原因がわかりました。

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

これにより、パッケージの1つがv2.4.4にAngularになると予想されていましたが、v2.0.1を使用しています。両方のパッケージをコアに設定するようにpackage.jsonを更新しました。このようなバージョン：

"dependencies": {
    "@angular/core": "2.0.1",
    "@angular/platform-server": "2.0.1",
}

あなたの問題は@ angular/platform-serverではないかもしれませんが、これがデバッグに役立つことを願っています

2
AJ Zane

同じ問題がありました。私が使っていたので、それが原因でした

"ng2-bootstrap"： "^ 1.3.1"、

「@ angular/common」：「2.0.1」、

「@ angular/compiler」：「2.0.1」、

「@ angular/core」：「2.0.1」、

「@ angular/platform-b​​rowser」：「2.0.1」、

次に、angular依存関係を

「@ angular/common」：「2.2.3」、

「@ angular/compiler」：「2.2.3」、

「@ angular/core」：「2.2.3」、

「@ angular/platform-b​​rowser」：「2.2.3」、

うまくいきました。

0
Shashikant Pandit

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"
  },
0
Amr Ibrahim

比較的「古代」のAngular2アプリケーション（バージョン2.0.0を使用）とng-bootstrapを再構築しようとしていました。プロジェクトを正常にビルドした後（エラーなし）、このエラーがホームページに表示されます。

首を絞めずにすべてを試した後、すべてのnpmモジュールをアンインストールし、npm installを実行しようとして、ng-bootsrapがAngulare 2.0.0と互換性のないバージョンをインストールしたことに気付きました（ng-bootstrapのpackage.json設定は~1.1.3に設定されました） ）。それはAngular 1.1.7を必要とする最新の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と問題はなくなりました。

0
Dexter Legaspi