ctorParameters.map is not a function in angular2-mdl

by

Looks like this question needs some clarification:

Why do we see this error message?

If a component library for angular2 wants to be compatible with AOT it needs to be compiled with ngc (@angular/compiler-cli). This will generate *.metadata.json files for each component. Also this generates js files for each component that includes informations about the constructor parameters. If the package was compiled with a version of @angular/compiler-cli < 2.3.0 this would be (for example):

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

If the package is compiled with a newer version this will be:

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

As you can see the newer version is a function and no longer an array. So the error

ctorParameters.map is not a function

makes sense. Because map is a member of array but not of function.

How to solve this Problem?:

  1. You can update your angular versions (or packages that are trying to compile your angular2 code) to the new compiler output format. E.g. at least @angular/*@2.3.1. (If you are using angular-cli you should upgrade your project to [email protected])

  2. You can lock the package you are using to a version that matches the old compiler output format. For angular2-mdl this is version 2.7.0. You can find this information here: https://github.com/mseemann/angular2-mdl#remarks.

Is it possible to use a package that was compiled with an older angular-compiler-cli with a newer angular-compiler-cli version? (e.g. you are at angular 2.4.1 and want to use [email protected]) Yes! This direction is backward compatible. See https://github.com/angular/angular/blob/master/modules/%40angular/core/src/reflection/reflection_capabilities.ts#L80

More Related Contents:

  1. How to upgrade Angular CLI to the latest version
  2. How to bundle an Angular app for production
  3. Could not find module “@angular-devkit/build-angular”
  4. How to add bootstrap to an angular-cli project
  5. Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found
  6. Angular CLI SASS options
  7. PowerShell script add ‘–prod’ argument to build Angular CLI project
  8. How to add font-awesome to Angular 2 + CLI project
  9. how to format date in Component of angular 5
  10. Angular-CLI proxy to backend doesn’t work
  11. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  12. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  13. ng: command not found while creating new project using angular-cli
  14. Get angular-cli to ng serve over HTTPS
  15. Dynamically load HTML template in angular2
  16. How to set environment via `ng serve` in Angular 6
  17. How to undo Angular 2 Cli ng-eject?
  18. How to install a specific version of Angular with Angular CLI?
  19. Cannot find name ‘require’ after upgrading to Angular4
  20. Include assets when building angular library
  21. When to use ‘npm start’ and when to use ‘ng serve’?
  22. How to uninstall/upgrade Angular CLI?
  23. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  24. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  25. How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
  26. How to execute only one test spec with angular-cli
  27. Angular 8 ng-build throwing MIME error with cordova
  28. Angular4 APP_INITIALIZER won’t delay initialization
  29. Using Angular CLI and unable to use relative image paths in CSS files
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment