TypeError: core.defineInjectable is not a function while using angular material/cdk in angular 4.3.2

Question

I want to use angular material progress spinner and added

import {MatProgressSpinnerModule} from '@angular/material';

Added in imports array and in component

Haven't tried both updating the template with selector and removing it. In either case getting the error.

I am using system.config.js, and added map values for all the angular material and cdk js files.

Using angular 4.3.2 and angular material latest version. Getting this below error.

errors.ts:42 ERROR Error: Uncaught (in promise): Error: TypeError: core.defineInjectable is not a function at eval (http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:89:62) at Object.eval (http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:91:2) Error loading http://localhost:8000/app/UMSClient/com/ipc/ums/modules/EnterpriseTree/Enterprise.module.js at eval (http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:89:62) at Object.eval (http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:91:2) Error loading http://localhost:8000/app/UMSClient/com/ipc/ums/modules/EnterpriseTree/Enterprise.module.js

What could be wrong?

Thanks,

Can I ask why you're using SystemJS instead of WebPack with an Angular 4 project? — Reactgular
It is enterprise application already built with system js. We are planning to change to Webpack. — Rajesh

Kellie Hall Kellie Hall · Accepted Answer · 2018-07-16T19:33:59

defineInjectable is an angular 6 only function. You may have been using the newest version of Angular Material and it isn't compatible with your current version (4.3.2).

TypeError: core.defineInjectable is not a function while using angular material/cdk in angular 4.3.2

2 Answers