Uncaught TypeError: Class constructor Platform cannot be invoked without 'new'

Question

I've installed the Angular CDK in order to use PrimeNG's dropdown component but it throws an error.

I've added this in my app.module.ts:

import {DropdownModule} from 'primeng/dropdown';

And installed the Angular CDK by simply typing in the following:

npm install @angular/cdk --save

Ouabain

Is this issue the same as the one that you're facing? #51860543 ----- If so, avoid transpiling to ES5 (See the selected answer) – Study

i dont think so and what is ES5 – Ouabain

Different versions of ECMAScript (the standard on which JavaScript is based) follow different rules. Many apps use "babel" (or a similar tool) to transpile modern JS to follow the rules of an older version, such as ECMAScript 5 (ie, "ES5"). The answer to the linked question suggests that this can be a bad idea since the transpiled code might now ignore some of the rules of ES6. ---- The error you see means the code is breaking an ES6 rule (that class constructors must use the new keyword). One possible cause could be if your build tool converts your app to the ES5 version. I don't know. – Study

Answer 1

I had the same issue. Check your cdk version in your package.json

I solved installing an older version of cdk 10:

npm i @angular/[email protected] --save

Vaivode

Answer 2

In case someone has the same issue while trying to implement material design with angular material, rollback both material and cdk packages to an older version with:

npm i @angular/[email protected] @angular/[email protected] --save

I hope someone proposes a better approach that enables using the latest versions.

Hawley

Answer 3

In file tsconfig.json,

add this line- "target": "es5",

Mclemore

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es5", "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } } – Ouabain