TypeError: Cannot read property 'kind' of undefined

[VanesaLopez]

Bug when build --prod in Angular 5

ERROR in ./node_modules/ckeditor4-angular/fesm5/ckeditor4-angular.js Module build failed: TypeError: Cannot read property 'kind' of undefined at isAngularDecoratorMetadataExpression (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:245:35) at checkNodeForDecorators (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:67:21) at visitNodes (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12699:30) at Object.forEachChild (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12875:24)
at checkNodeForDecorators (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31) at visitNode (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12690:24) at Object.forEachChild (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12782:21) at checkNodeForDecorators (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31) at visitNode (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12690:24) at Object.forEachChild (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12828:24) at checkNodeForDecorators (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31) at visitNode (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12690:24) at Object.forEachChild (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12838:24) at checkNodeForDecorators (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31) at visitNode (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12690:24) at Object.forEachChild (C:\Apps\gestminu\gestminu-front\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:12754:21) @ ./src/app/app.module.ts 89:0-51 @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi ./src/main.ts

Dependencies

dependencies:

"@angular/animations": "^5.1.3",
"@angular/common": "^5.1.3",
"@angular/compiler": "^5.1.3",
"@angular/core": "^5.1.3",
"@angular/forms": "^5.1.3",
"@angular/http": "^5.1.3",
"@angular/platform-browser": "^5.1.3",
"@angular/platform-browser-dynamic": "^5.1.3",
"@angular/platform-server": "^5.1.3",
"@angular/router": "^5.1.3",
"ckeditor4-angular": "^1.0.0", 

devDependencies:

"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^5.1.3",
"@angular-devkit/build-angular": "~0.6.0",
"@angular/language-service": "^4.2.4",

Command to reproduce it:

   ng build --prod

[f1ames]

Hello @VanesaLopez, please take a look at the following answer - https://github.com/ckeditor/ckeditor4-angular/issues/77#issuecomment-561089354, it seems it is related to the similar issue (same error message) and the solution was to use "allowSyntheticDefaultImports": true, in tsconfig.json.

[VanesaLopez]

Hello @f1ames , I tried it but it still fails.

{
     "compileOnSave": false,
     "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "target": "es5",
     "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
       "es2017",
      "dom"
      ]
     }
 }

[VanesaLopez]

I saw this issue https://github.com/angular/angular-cli/issues/15703 but I can`t upgrade angular. Any ideas?

[flvrm92]

I have the same problem here... any updates about that ? (using ionic 4 with angular 8.1.2)

[f1ames]

Hello @VanesaLopez, @flvmoreno, I was able to reproduce this issue with Angular 5. I can confirm that setting "allowSyntheticDefaultImports": true, doesn't help.

It seems to be related to some missing metadata in decorators when @angular-devkit/build-optimizer package processes the source files. One related issue is https://github.com/angular/angular-cli/issues/15703 (however, for newer version). It is also mentioned in https://github.com/microsoft/TypeScript/issues/34512#issuecomment-542766914.

We are still looking for the solution as it seems to be complex issue. ATM I'm not sure if it can be fixed by adjusting integration code itself :thinking:

[f1ames]

The only dirty workaround so far is to edit node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js, line 241 by adding:

// Workaround for missing metadata.
if(!decorateArray.elements[1]) {
    return false;
}

which will adjust isAngularDecoratorMetadataExpression() function so it looks like:

// Check if expression is `__decorate([smt, __metadata("design:type", Object)], ...)`.
function isAngularDecoratorMetadataExpression(exprStmt, ngMetadata, tslibImports, checker) {
    if (exprStmt.expression.kind !== ts.SyntaxKind.CallExpression) {
        return false;
    }
    const callExpr = exprStmt.expression;
    if (!isTslibHelper(callExpr, '__decorate', tslibImports, checker)) {
        return false;
    }
    if (callExpr.arguments.length !== 4) {
        return false;
    }
    if (callExpr.arguments[0].kind !== ts.SyntaxKind.ArrayLiteralExpression) {
        return false;
    }
    const decorateArray = callExpr.arguments[0];
    // Check first array entry for Angular decorators.
    if (decorateArray.elements[0].kind !== ts.SyntaxKind.CallExpression) {
        return false;
    }
    const decoratorCall = decorateArray.elements[0];
    if (decoratorCall.expression.kind !== ts.SyntaxKind.Identifier) {
        return false;
    }
    const decoratorId = decoratorCall.expression;
    if (!identifierIsMetadata(decoratorId, ngMetadata, checker)) {
        return false;
    }
    // Workaround for missing metadata.
    if(!decorateArray.elements[1]) {
        return false;
    }
    // Check second array entry for __metadata call.
    if (decorateArray.elements[1].kind !== ts.SyntaxKind.CallExpression) {
        return false;
    }
    const metadataCall = decorateArray.elements[1];
    if (!isTslibHelper(metadataCall, '__metadata', tslibImports, checker)) {
        return false;
    }
    return true;
}

so if this issue is a blocker for you, you may try the above. However, it is temporary solution since modifying node_modules sources is not good nor flexible approach.

After applying above code the package seems to be building and working fine.

[flvrm92]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

@VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that:

"devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", },

That's solved my problem.

Please, if you could try, let us know about the result.

[motazad8556]

@VanesaLopez @f1ames @flvmoreno @Reinmar @jodator change buildOptimizer: true => buildOptimizer: false in angular.json

[VanesaLopez]

@VanesaLopez @f1ames @flvmoreno @Reinmar @jodator change buildOptimizer: true => buildOptimizer: false in angular.json

I am using Angular 5 with angular-cli.json.

[VanesaLopez]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

@VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that:

"devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", },

That's solved my problem.

Please, if you could try, let us know about the result.

Thank you very much, I have updated as you have indicated and it has worked.

[smitrajput]

@VanesaLopez can you please let me know the version of typescript you used (the entire package.json would be even more helpful). Because I face the same error and adding the latest @angular-devkit dependencies doesn't solve the problem for me.

[renanaribeiro]

Had the same issue with Angular 8.

Solved by upgrading @angular-devkit/build-angular to ~0.803.20 as mentioned by @flvmoreno

If upgrade to latest version (0.900.3) generates another error An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.

[VanesaLopez]

@VanesaLopez can you please let me know the version of typescript you used (the entire package.json would be even more helpful). Because I face the same error and adding the latest @angular-devkit dependencies doesn't solve the problem for me.

Hello @smitrajput ,

"typescript": "^2.4.2"

[smitrajput]

Thanks @VanesaLopez, my issue was resolved after upgrading typescript

[Amaryadav7]

TypeError: Cannot read property 'kind' of undefined "typescript": "2.5.3"

any solution for angular 5?

[Dumluregn]

Closing this issue as an upstream (and closed before and then accidentally reopened I guess).

[bajjajjrajjesh]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

@VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that:

"devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", },

That's solved my problem.

Please, if you could try, let us know about the result.

[bajjajjrajjesh]

thank you very much , it worked for me..

[jihin]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

@VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that:

"devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", },

That's solved my problem.

Please, if you could try, let us know about the result.

Not working for me, i am using "ckeditor4-angular": "^1.1.0"

[Dumluregn]

Hello, which version of Angular are you using?

[jihin]

Hello, which version of Angular are you using?

5.2.0, I can`t upgrade angular.

[gvenkatsai93]

Hello All,

I am also facing the same issue with Angular 7, can you guys please help us ?

[gvenkatsai93]

Hello, which version of Angular are you using?

5.2.0, I can`t upgrade angular.

Even for angular7 it is giving the same error, please help us

[gvenkatsai93]

Hello All,

I am also facing the same issue with Angular 7, can you guys please help us ?

@f1ames @Dumluregn Can you guys please help here, we need this support for Angular7

[Dumluregn]

Did you try to use the solutions proposed earlier in this issue?

For Angular 5: https://github.com/ckeditor/ckeditor4-angular/issues/78#issuecomment-562535537

For Angular 7: https://github.com/ckeditor/ckeditor4-angular/issues/78#issuecomment-564583752

[giovanni-orciuolo]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

@VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that:

"devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", },

That's solved my problem.

Please, if you could try, let us know about the result.

Thank you so much, it worked!

[nicolasmaurotorres]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version. @VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that: "devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", }, That's solved my problem. Please, if you could try, let us know about the result.

Thank you very much, I have updated as you have indicated and it has worked.

I dont have this dependencies in the package.json, did you run this command ?

npm i @angular-devkit/architect @angular-devkit/build-angular @angular-devkit/core @angular-devkit/schematics --save-dev

Im still having the issue of "Cannot read property 'kind' of undefined"

[flvrm92]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version. @VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that: "devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", }, That's solved my problem. Please, if you could try, let us know about the result.

Thank you very much, I have updated as you have indicated and it has worked.

I dont have this dependencies in the package.json, did you run this command ?

npm i @angular-devkit/architect @angular-devkit/build-angular @angular-devkit/core @angular-devkit/schematics --save-dev

Im still having the issue of "Cannot read property 'kind' of undefined"

No... Which angular version are you using?

[nicolasmaurotorres]

@f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version. @VanesaLopez if you could change your devDependencies, try to change your angular-devkit dependencies to newest version (at the moment) like that: "devDependencies": { "@angular-devkit/architect": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/core": "~8.3.20", "@angular-devkit/schematics": "~8.3.20", }, That's solved my problem. Please, if you could try, let us know about the result.

Thank you very much, I have updated as you have indicated and it has worked.

I dont have this dependencies in the package.json, did you run this command ? npm i @angular-devkit/architect @angular-devkit/build-angular @angular-devkit/core @angular-devkit/schematics --save-dev Im still having the issue of "Cannot read property 'kind' of undefined"

No... Which angular version are you using?

im still stuck with angular 5 and cant update

I could solve this problem using this workaround from @Dumluregn and @VanesaLopez For Angular 5: #78 (comment)

i did not want to do it but i had no other choice

Thank you very much!

[dcleme17]

@VanesaLopez @f1ames @flvmoreno @Reinmar @jodator change buildOptimizer: true => buildOptimizer: false in angular.json

It worked for me. Thanks!

[mkanjipuram]

@bajjajjrajjesh Changing the dev dependency worked. Thank you!

[AdamMadrzejewski]

This fix can be found in the Angular CLI version 8.3.7 https://github.com/angular/angular-cli/releases/tag/v8.3.7.

You might think that it will require to update the whole Angular to version 8, but we use Angular 7 and we just changed our package to:

"@angular-devkit/build-optimizer": "~0.803.29"

And it worked! Hopefully this will be the solution for everyone having Angular 7.

[nishanthjeesoft]

@VanesaLopez @f1ames @flvmoreno @Reinmar @jodator change buildOptimizer: true => buildOptimizer: false in angular.json

It worked for me. Thanks!

This worked for me. Am using angular 7.

[Captainnik53]

@VanesaLopez @Reinmar @jodator @flvrm92 I

@VanesaLopez @f1ames @flvmoreno @Reinmar @jodator change buildOptimizer: true => buildOptimizer: false in angular.json

If you are using Angular 7, then this solution should definitely work for you. In my case there were 5 occurrences of "buildOptimizer: false", which I changed to "true". I was able to successfully build after that change.

[shivamrajvir]

@VanesaLopez @Reinmar @jodator @flvrm92 @Captainnik53

a simple solution, npm i ckeditor4-angular@1.0.0-beta.2, would work, or install whichever version you have in your package.json, i think while doing npm i, it doesnt install ckeditor properly so