Подтвердить что ты не робот

CtorParameters.map не является функцией в angular2 -mdl

Я пытаюсь использовать angular2 -mdl с angular -cli. Я импортировал MdlModule в app.module.ts.

Когда я пытаюсь использовать <mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>, он делает ошибку:

ctorParameters.map не является функцией в 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"
  }
4b9b3361

Ответ 1

Похоже, этот вопрос нуждается в уточнении:

Почему мы видим это сообщение об ошибке?

Если библиотека компонентов для 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 не является функцией

имеет смысл. Поскольку карта является членом массива, но не функцией.

Как решить эту проблему?:

  • Вы можете обновить версии angular (или пакеты, которые пытаются скомпилировать ваш код angular2), в новый формат вывода компилятора. Например. не менее @angular/* @2.3.1. (Если вы используете angular -cli, вы должны обновить свой проект до angular [email protected])

  • Вы можете заблокировать используемый вами пакет для версии, которая соответствует формату старого компилятора. Для angular2 -mdl это версия 2.7.0. Вы можете найти эту информацию здесь: https://github.com/mseemann/angular2-mdl#remarks.

Можно ли использовать пакет, который был скомпилирован с более старым angular -компилятором-кли с более новой версией angular -compiler-cli? (например, вы находитесь в angular 2.4.1 и хотите использовать angular2 [email protected]) Да! Это направление обратно совместимо. См. https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

Ответ 2

У меня была такая же проблема (с другим плагином), и она была решена путем обновления angular до последней версии (2.4.1).

EDIT: Полный пакет .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"
  }
}

Ответ 3

Мне удалось выяснить причину этой проблемы, посмотрев отчет об ошибке от ng build:

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

Это помогло мне понять, что один из моих пакетов ожидал, что Angular будет в версии 2.4.4, но я использую v2.0.1. Я обновил свой пакет package.json, чтобы установить оба пакета в мою основную версию следующим образом:

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

Ваша проблема может быть не с @ angular/platform-server, но я надеюсь, что это поможет отладить ее

Ответ 4

У меня была та же проблема. это вызывало, потому что я использовал

"ng2-bootstrap": "^ 1.3.1",

"@ angular/common": "2.0.1",

"@ angular/компилятор": "2.0.1",

"@ angular/core": "2.0.1",

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

Затем я обновил зависимости angular от

"@ angular/common": "2.2.3",

"@ angular/компилятор": "2.2.3",

"@ angular/core": "2.2.3",

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

он работал нормально.

Ответ 5

после обновления до 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"
  },

Ответ 6

Я пытался перестроить относительно "древнее" приложение Angular2 (использует версию 2.0.0) и ng-bootstrap. После успешного создания проекта (т.е. Без ошибок) я получаю эту ошибку на домашней странице.

Попробовав все, что не задушило себя, я удалил все модули npm и попытался сделать npm install и заметил, что ng-bootsrap установил версию, которая несовместима с Angulare 2.0.0 (установка package.json для ng-bootstrap было установлено на ~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, и проблема исчезла.