ctorParameters.map non è una funzione in angular2-mdl

Sto cercando di usare angular2-mdl con angular-cli. Ho importato MdlModule in app.module.ts.

Quando provo a usare , commette un errore:

ctorParameters.map non è una funzione in angular2-mdl

Non ho idea di cosa dovrei fare.

Ecco il mio 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" } 

Sembra che questa domanda abbia bisogno di qualche chiarimento:

Perché vediamo questo messaggio di errore?

Se una libreria di componenti per angular2 vuole essere compatibile con AOT, deve essere compilata con ngc (@ angular / compiler-cli). Ciò genererà i file * .metadata.json per ciascun componente. Inoltre questo genera file js per ogni componente che include informazioni sui parametri del costruttore. Se il pacchetto è stato compilato con una versione di @ angular / compiler-cli <2.3.0 questo sarebbe (per esempio):

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

Se il pacchetto è compilato con una versione più recente questo sarà:

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

Come puoi vedere, la versione più recente è una funzione e non più una matrice. Quindi l’errore

ctorParameters.map non è una funzione

ha senso. Perché la mappa è un membro dell’array ma non della funzione.

Come risolvere questo problema ?:

  1. Puoi aggiornare le tue versioni angolari (o pacchetti che stanno cercando di compilare il tuo codice angular2) nel nuovo formato di output del compilatore. Ad esempio, almeno @angular / * @ 2.3.1. (Se stai usando angular-cli devi aggiornare il tuo progetto a [email protected])

  2. È ansible bloccare il pacchetto che si sta utilizzando in una versione che corrisponde al vecchio formato di output del compilatore. Per angular2-mdl questa è la versione 2.7.0. Puoi trovare queste informazioni qui: https://github.com/mseemann/angular2-mdl#remarks .

È ansible utilizzare un pacchetto compilato con un vecchio angular-compiler-cli con una versione più recente di angular-compiler-cli? (ad esempio, sei angular 2.4.1 e vuoi usare [email protected]) Sì! Questa direzione è compatibile con le versioni precedenti. Vedere https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

Ho avuto lo stesso problema (con un altro plug-in) e l’ho risolto aggiornando l’angular all’ultima versione (2.4.1).

EDIT: pacchetti completi.json

Controlla anche la tua versione di typescript. Ho dovuto smettere di usare Angular-cli a causa dei continui problemi durante la compilazione. Sono passato al 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" } } 

Sono stato in grado di capire la causa di questo problema osservando il rapporto di errore di ng build :

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

Questo mi ha aiutato a capire che uno dei miei pacchetti si aspettava che Angular fosse alla v2.4.4, ma sto usando la v2.0.1. Ho aggiornato il mio package.json per avere entrambi i pacchetti impostati sulla mia versione principale in questo modo:

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

Il tuo problema potrebbe non essere con @ angular / platform-server, ma spero che questo aiuti a eseguirne il debug

Ho avuto lo stesso problema. stava causando perché stavo usando

“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”,

Poi ho aggiornato le dipendenze angolari a

“@ angular / common”: “2.2.3”,

“@ angular / compiler”: “2.2.3”,

“@ angular / core”: “2.2.3”,

“@ angular / platform-browser”: “2.2.3”,

ha funzionato bene.

dopo l’aggiornamento a 2.4.6 angular funziona bene

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

Stavo cercando di ribuild un’applicazione “antica” Angular2 (utilizza la versione 2.0.0) e ng-bootstrap. Dopo aver completato con successo il progetto (ovvero, nessun errore) sto ricevendo questo errore sulla home page.

Dopo aver provato tutto a corto di strangolamento, ho disinstallato tutti i moduli npm e ho provato a fare un’installazione di npm install e npm install notato che ng-bootsrap ha installato una versione non compatibile con Angulare 2.0.0 (l’impostazione di package.json per ng-bootstrap era impostato su ~1.1.3 ). Questo ha installato l’ultima versione 1.1.7 che richiedeva Angular 2.4.x

Cercando di aggiornare a 2.4.x si è rivelato un enorme sforzo, quindi ho impostato ng-bootstrap su 1.1.4.

TL; DR: sto usando angular 2.0.0 e ng-bootstrap. non voglio aggiornare a 2.4.x così ho codificato in modo hard la versione ng-bootstrap alla 1.1.4 e il problema è andato via.