lite - ctorParameters.map no es una función en angular2-mdl

material design lite

Question

Estoy tratando de usar angular2-mdl con angular-cli. MdlModule en app.module.ts.

Cuando intento usar <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield> , se produce un error:

ctorParameters.map no es una función en angular2-mdl

No tengo idea de lo que debo hacer.

Aquí está mi 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"
  }

Answer 1

Estaba tratando de reconstruir una aplicación Angular2 relativamente "antigua" (usa la versión 2.0.0) y ng-bootstrap. Después de construir con éxito el proyecto (es decir, sin error), recibo este error en la página de inicio.

Después de intentar todo menos estrangularme, desinstalé todos los módulos npm e intenté hacer una npm install y noté que ng-bootsrap instaló una versión que no es compatible con Angulare 2.0.0 (la configuración de package.json para ng-bootstrap era establecido en ~1.1.3 ). Eso instaló el último 1.1.7 que requería Angular 2.4.x

Intentar actualizar a 2.4.x resultó ser un gran esfuerzo, así que configuré el ng-bootstrap en 1.1.4.

TL; DR: estoy usando angular 2.0.0 y ng-bootstrap. no quiero actualizar a 2.4.x, así que codifiqué la versión ng-bootstrap a 1.1.4 y el problema desapareció.

Answer 2

Parece que esta pregunta necesita alguna aclaración:

¿Por qué vemos este mensaje de error?

Si una biblioteca de componentes para angular2 quiere ser compatible con AOT, debe compilarse con ngc (@ angular / compiler-cli). Esto generará archivos * .metadata.json para cada componente. Además, esto genera archivos js para cada componente que incluye información sobre los parámetros del constructor. Si el paquete se compilara con una versión de @ angular / compiler-cli <2.3.0, esto sería (por ejemplo):

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

Si el paquete se compila con una versión más nueva, esto será:

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

Como puede ver, la versión más nueva es una función y ya no es una matriz. Entonces el error

ctorParameters.map no es una función

tiene sentido. Porque map es miembro de una matriz pero no de función.

¿Cómo resolver este problema?:

1. Puede actualizar sus versiones angulares (o paquetes que intentan compilar su código angular2) al nuevo formato de salida del compilador. Por ejemplo, al menos @angular / * @ 2.3.1. (Si está utilizando angular-cli, debe actualizar su proyecto a [email protected])

2. Puede bloquear el paquete que está utilizando en una versión que coincida con el formato de salida del compilador anterior. Para angular2-mdl, esta es la versión 2.7.0. Puede encontrar esta información aquí: https://github.com/mseemann/angular2-mdl#remarks .

¿Es posible usar un paquete que se compiló con un antiguo angular-compiler-cli con una versión más nueva de angular-compiler-cli? (por ejemplo, está en angular 2.4.1 y desea utilizar [email protected]) ¡Sí! Esta dirección es compatible con versiones anteriores. Ver https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

Answer 3

Pude averiguar la causa de este problema mirando el informe de error de ng build :

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

Esto me ayudó a darme cuenta de que uno de mis paquetes esperaba que Angular estuviera en v2.4.4, pero estoy usando v2.0.1. Actualicé mi package.json para tener ambos paquetes configurados en mi versión principal de esta manera:

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

Su problema podría no ser con @ angular / platform-server, pero espero que esto ayude a depurarlo

Answer 4

Tuve el mismo problema (con otro complemento) y lo resolví actualizando angular a la última versión (2.4.1).

EDITAR: Paquetes completos.json

Verifique su versión de Typecript también. Tuve que dejar de usar Angular-cli debido a los continuos problemas al compilar. Me cambié a 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"
  }
}

Answer 5

Tuve el mismo problema. estaba causando porque estaba usando

"ng2-bootstrap": "^ 1.3.1",

"@ angular / común": "2.0.1",

"@ angular / compilador": "2.0.1",

"@ angular / core": "2.0.1",

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

Luego actualicé las dependencias angulares a

"@ angular / común": "2.2.3",

"@ angular / compilador": "2.2.3",

"@ angular / core": "2.2.3",

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

Funcionó bien.

Answer 6

después de actualizar a angular 2.4.6 funciona 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"
  },