web-dev-qa-db-fra.com

ctorParameters.map n'est pas une fonction dans angular2-mdl

J'essaie d'utiliser angular2-mdl avec angular-cli. J'ai importé MdlModule dans app.module.ts.

Lorsque j'essaie d'utiliser <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>, une erreur se produit:

ctorParameters.map n'est pas une fonction dans angular2-mdl

Je n'ai aucune idée de ce que je devrais faire.

Voici mon 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"
  }
angularangular-cliangular2-mdl
13
Mingyu Jeon

On dirait que cette question nécessite des éclaircissements:

Pourquoi voyons-nous ce message d'erreur?

Si une bibliothèque de composants pour angular2 veut être compatible avec AOT, elle doit être compilée avec ngc (@ angular/compiler-cli). Cela générera des fichiers * .metadata.json pour chaque composant. De plus, cela génère pour chaque composant des fichiers js contenant des informations sur les paramètres du constructeur. Si le paquet a été compilé avec une version de @ angular/compiler-cli <2.3.0, ceci serait (par exemple):

MdlBadgeDirective.ctorParameters = [
        { type: ElementRef, },
        { type: Renderer, },
];

Si le paquet est compilé avec une version plus récente, ce sera:

MdlBadgeDirective.ctorParameters = function () { return [
        { type: ElementRef, },
        { type: Renderer, },
]; };

Comme vous pouvez le constater, la version la plus récente est une fonction et non plus un tableau. Donc l'erreur

ctorParameters.map n'est pas une fonction

logique. Parce que map est un membre du tableau mais pas de la fonction.

Comment résoudre ce problème?:

  1. Vous pouvez mettre à jour vos versions angulaires (ou les paquetages essayant de compiler votre code angular2) vers le nouveau format de sortie du compilateur. Par exemple. au moins @angulaire/* @ 2.3.1. (Si vous utilisez angular-cli, vous devez mettre votre projet à niveau vers [email protected])

  2. Vous pouvez verrouiller le package que vous utilisez sur une version qui correspond à l'ancien format de sortie du compilateur. Pour angular2-mdl, il s'agit de la version 2.7.0. Vous pouvez trouver cette information ici: https://github.com/mseemann/angular2-mdl#remarks .

Est-il possible d'utiliser un paquetage compilé avec une version plus ancienne, angular-compiler-cli, avec une version plus récente, angular-compiler-cli? (par exemple, vous êtes à l'angle 2.4.1 et souhaitez utiliser [email protected]) Oui! Cette direction est compatible avec les versions antérieures. Voir https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

28
michael

J'ai eu le même problème (avec un autre plugin) et je l'ai résolu en mettant à jour angular vers la dernière version (2.4.1).

EDIT: Full packages.json

Vérifiez votre version de TypeScript également. J'ai dû arrêter d'utiliser Angular-cli en raison des problèmes récurrents rencontrés lors de la compilation. Je suis passé à 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

J'ai pu trouver la cause de ce problème en consultant le rapport d'erreur de ng build:

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

Cela m'a permis de comprendre qu'un de mes paquets devait être à la version 2.4.4 d'Angular, mais j'utilise la version 2.0.1. J'ai mis à jour mon package.json pour que les deux packages soient configurés comme suit:

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

Votre problème pourrait ne pas concerner @ angular/platform-server, mais j'espère que cela vous aidera à le déboguer

2
AJ Zane

J'ai eu le même problème. il causait parce que j'utilisais 

"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",

Puis j'ai mis à jour les dépendances angulaires à

"@ angulaire/commun": "2.2.3",

"@ angular/compiler": "2.2.3",

"@ angular/core": "2.2.3",

"@ angular/platform-browser": "2.2.3",

cela a bien fonctionné.

0
Shashikant Pandit

après la mise à niveau vers angular 2.4.6 cela fonctionne très bien

 "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

J'essayais de reconstruire une application relativement "ancienne" Angular2 (utilise la version 2.0.0) et ng-bootstrap. Après avoir créé le projet avec succès (aucune erreur, par exemple), cette erreur s’affiche sur la page d’accueil.

Après avoir tout essayé avant de m'étrangler moi-même, j'ai désinstallé tous les modules de npm et essayé de créer un npm install. J'ai remarqué que le ng-bootsrap avait installé une version incompatible avec Angulare 2.0.0 (le paramètre package.json pour ng-bootstrap était défini sur ~1.1.3. ). Cela a installé le dernier 1.1.7 qui nécessitait un 2.4.x angulaire.

Essayer de passer à 2.4.x s’est avéré être un effort énorme, donc j’ai mis le ng-bootstrap à 1.1.4 à la place.

TL; DR: utilise les versions angulaires 2.0.0 et ng-bootstrap. ne veux pas passer à la version 2.4.x, donc j'ai codé en dur la version de ng-bootstrap en 1.1.4 et le problème a disparu.

0
Dexter Legaspi