angular-cli: AOT build error Cannot read property 'kind' of undefined

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0 Node: 8.5.0 OS: darwin x64 Angular: 5.0.1 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0 @angular/cli: 1.5.0 @angular/flex-layout: 2.0.0-beta.10-4905443 @angular/material: 5.0.0-rc0 @angular-devkit/build-optimizer: 0.0.32 @angular-devkit/core: 0.0.20 @angular-devkit/schematics: 0.0.35 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.2 typescript: 2.4.2 webpack-bundle-analyzer: 2.9.1 webpack: 3.8.1

Repro steps.

rm -rf node_modules/ yarn add @angular/cli@latest -D ng build --aot

The log given by the failure.

ERROR in Error: TypeError: Cannot read property 'kind' of undefined at nodeCanBeDecorated (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:7805:35) at nodeIsDecorated (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:7825:16) at Object.nodeOrChildIsDecorated (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:7829:16) at isDecoratedClassElement (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51668:23) at isInstanceDecoratedClassElement (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51659:20) at Object.filter (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:1652:25) at getDecoratedClassElements (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51641:23) at generateClassElementDecorationExpressions (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51815:27) at addClassElementDecorationStatements (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51804:44) at visitClassDeclaration (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:51131:13) at visitTypeScript (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:50972:28) at visitorWorker (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:50785:24) at sourceElementVisitorWorker (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:50817:28) at saveStateAndInvoke (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:50738:27) at sourceElementVisitor (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:50799:20) at visitNodes (/Users/sam/Developer/ng-prime/node_modules/typescript/lib/typescript.js:49280:48)

Desired functionality.

AOT build should be successful

Mention any other details that might be useful.

The project built fine with AOT enabled with CLI v1.4.9

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 40
  • Comments: 63 (13 by maintainers)

Commits related to this issue

Most upvoted comments

@Axure it builds successfully for me with ng build --prod --aot=false

I’m having the same problem and found it’s because of arrow functions in decorators, like:

@Type(() => Message)

When I change the above to:

function m() { return Message; }
@Type(m)

It compiles with AOT again =)

Im having the same error since I use the md-bootstrap project.

I seem to have found out the problem. The problematic code there is:

        switch (node.kind) {
            case 229 /* ClassDeclaration */:
                // classes are valid targets
                return true;
            case 149 /* PropertyDeclaration */:
                // property declarations are valid if their parent is a class declaration.
                return node.parent.kind === 229 /* ClassDeclaration */;

It seems to fail to find the parent of the node when the node is a property declaration. I suddenly realized that it was the @select decorator from angular-redux, and I’m pretty sure the decorator is valid. So I tried adding the following line to bypass the check. if (!node.parent) return true; And it turns out to be working.

@Brocco @clydin I still get the issue in the 1.6.5 cli version, I undid a class-transformer workaround (show at the end of this comment) and I still get the same kind error:

ERROR in : TypeError: Cannot read property 'kind' of undefined
    at nodeCanBeDecorated (/node_modules/typescript/lib/typescript.js:8376:36)
    at nodeIsDecorated (/node_modules/typescript/lib/typescript.js:8396:16)
    at nodeOrChildIsDecorated (/node_modules/typescript/lib/typescript.js:8400:16)
    at Object.forEach (/node_modules/typescript/lib/typescript.js:1526:30)
    at Object.childIsDecorated (/node_modules/typescript/lib/typescript.js:8406:27)
    at getClassFacts (/node_modules/typescript/lib/typescript.js:53119:20)
    at visitClassDeclaration (/node_modules/typescript/lib/typescript.js:53144:25)
    at visitTypeScript (/node_modules/typescript/lib/typescript.js:53002:28)
    at visitorWorker (/node_modules/typescript/lib/typescript.js:52798:24)
    at sourceElementVisitorWorker (/node_modules/typescript/lib/typescript.js:52827:28)
    at saveStateAndInvoke (/node_modules/typescript/lib/typescript.js:52742:27)
    at sourceElementVisitor (/node_modules/typescript/lib/typescript.js:52812:20)
    at visitNodes (/node_modules/typescript/lib/typescript.js:51104:48)
    at Object.visitLexicalEnvironment (/node_modules/typescript/lib/typescript.js:51137:22)
    at visitSourceFile (/node_modules/typescript/lib/typescript.js:53089:53)
    at saveStateAndInvoke (/node_modules/typescript/lib/typescript.js:52742:27)

Typescript: 2.6.2 Angular: 5.2.1

Workaround used:

export function serializeType<T>(object: T) {
  return function () { return object; };
}

...
@Type(serializeType(Participant))
public participants: Participant[] = [];

Install the latest CLI release 1.6.3 and install typescript@next.

In my case, the error was caused by arrow functions used as parameters of decorators. IE : @someAnnotation(t=>!!t) someField; for example To find them, use a Regexp search or add a console.log in the typescript.js file before re-compiling :

 case 149 /* PropertyDeclaration */:
              if (!node.parent) {    
                console.log("###### No Node parent on " + node.name.escapedText);
            }
                // property declarations are valid if their parent is a class declaration.
                return node.parent.kind === 229 /* ClassDeclaration */;

Then it was easy to replace those with named function

function someFn(t) {
   return !!t;
}
[...]
@someAnnotation(someFn) someField; 

The underlying cause is a defect in TypeScript which is fixed in newer versions of TypeScript. The CLI in more recent versions uses more capability of the TypeScript transformation subsystem. This in turn exposed the TypeScript defect to CLI users. As newer versions of TypeScript are not yet officially supported by Angular, the CLI will need to add a workaround for the underlying Typescript defect. The CLI already has a workaround in place for a different decorator related defect and this should be able to be augmented to support handling the defect here as well.

same error and my version is "typescript": "~2.4.2"

@morganster this issue is about --aot compilation

I had the same issue with: Angular CLI 1.6.1 Typescript 2.4.2 Angular 5.0.2

Found a solution by changing typescript.js for now. Replace all the function function nodeCanBeDecorated(node) with the following code

function nodeCanBeDecorated(node) {
       switch (node.kind) {
           case 229 /* ClassDeclaration */:
               // classes are valid targets
               return true;
           case 149 /* PropertyDeclaration */:
               // property declarations are valid if their parent is a class declaration.
   			// return node.parent.kind === 229 /* ClassDeclaration */;
   			return (node.parent && node.parent.kind === 229) || (node.original && node.original.parent && node.original.parent.kind === 229);
           case 153 /* GetAccessor */:
           case 154 /* SetAccessor */:
           case 151 /* MethodDeclaration */:
               // if this method has a body and its parent is a class declaration, this is a valid target.
               return node.body !== undefined &&
   				// && node.parent.kind === 229 /* ClassDeclaration */;
   				(node.parent && node.parent.kind === 229) || (node.original && node.original.parent && node.original.parent.kind === 229);
           case 146 /* Parameter */:
               // if the parameter's parent has a body and its grandparent is a class declaration, this is a valid target;
               // return node.parent.body !== undefined
               //     && (node.parent.kind === 152 /* Constructor */
               //         || node.parent.kind === 151 /* MethodDeclaration */
               //         || node.parent.kind === 154 /* SetAccessor */)
   			//     && node.parent.parent.kind === 229 /* ClassDeclaration */;
   			
   			var parent = node.parent || (node.original && node.original.parent);
   			return parent && parent.body !== undefined &&
                     (parent.kind === 152
                        || parent.kind === 151
                        || parent.kind === 154) && parent.parent.kind === 229;
       }
       return false;
   }

Which comes from here, if you compile typescript: https://github.com/shlomiassaf/TypeScript/commit/7017fa2a0a8137279230f04b59a6ec89f6928331

These steps worked for me: 1)Clear package.json with the importat packages for example I have delete my package and insert one by one here is my

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.2",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.2",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular2-uuid": "^1.1.1",
    "chartist": "^0.11.0",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.2",
    "webpack": "^4.16.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-install-webpack-plugin": "^4.0.5",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "^2.7.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}
  1. delete package_locked.json
  2. delete node_modules folder
  3. npm install
  4. Then ng build --prod was successful.

I had the same issue. I could resolve it with installing dev version of angular/cli and typescript:

npm install @angular/cli@next npm install typescript@next

@filipesilva sorry to pressure, but is there any progress to report? For our teams, the CLI is currently frozen on v1.5.0.

Can verify that it’s angular-cli issue. Rollback to v1.6.0-beta.0 proved that.

@filipesilva can you please get a look here? actually blocking build process (aot)

Getting same error.

@angular/angular-cli 1.5.3 @angular/core 5.0.2 typescript 2.6.1

Running: ng build --prod --aot

Produces:

ERROR in Error: TypeError: Cannot read property 'kind' of undefined
    at nodeCanBeDecorated (/path-to-site/node_modules/typescript/lib/typescript.js:8350:36)
    at nodeIsDecorated (/path-to-site/node_modules/typescript/lib/typescript.js:8364:16)
    at nodeOrChildIsDecorated (/path-to-site/node_modules/typescript/lib/typescript.js:8368:16)
    at Object.forEach (/path-to-site/node_modules/typescript/lib/typescript.js:1521:30)
    at Object.childIsDecorated (/path-to-site/node_modules/typescript/lib/typescript.js:8374:27)
    at getClassFacts (/path-to-site/node_modules/typescript/lib/typescript.js:52945:20)
    at visitClassDeclaration (/path-to-site/node_modules/typescript/lib/typescript.js:52970:25)
    at visitTypeScript (/path-to-site/node_modules/typescript/lib/typescript.js:52828:28)
    at visitorWorker (/path-to-site/node_modules/typescript/lib/typescript.js:52624:24)
    at sourceElementVisitorWorker (/path-to-site/node_modules/typescript/lib/typescript.js:52653:28)
    at saveStateAndInvoke (/path-to-site/node_modules/typescript/lib/typescript.js:52568:27)
    at sourceElementVisitor (/path-to-site/node_modules/typescript/lib/typescript.js:52638:20)
    at visitNodes (/path-to-site/node_modules/typescript/lib/typescript.js:50937:48)
    at Object.visitLexicalEnvironment (/path-to-site/node_modules/typescript/lib/typescript.js:50970:22)
    at visitSourceFile (/path-to-site/node_modules/typescript/lib/typescript.js:52915:53)
    at saveStateAndInvoke (/path-to-site/node_modules/typescript/lib/typescript.js:52568:27)

Edit: I’ve also narrowed it down to a specific decorator I’m using throughout my app. Removing the instances of the @Throttle() decorator (from lodash-decorators) from my app “fixes” my issue.

I had same problem today.

TypeError: Cannot read property 'kind' of undefined (...)

…and I fix it just upgrading my Typescript for 2.6.2.

Same issue with "@angular/cli": "^1.6.8"

After installing the angular/cli dev version, I get the following problems: Stackoverflow - Angular CLI - After refreshing in browser the browser try to load files from a wrong location

Downgrading angular-cli seems to be the only solution at the moment.

https://github.com/typestack/class-transformer/issues/108

@rmrevin

export function serializeType<T>(object: T) {
  return function () { return object; }
}

export class CatalogItem {

  id: string;

  @Type(serializeType(CatalogCategory))
  category?: CatalogCategory = null;

  @Type(serializeType(PackingVariant))
  packing: PackingVariant;

  price: string = null;

}

Facing this issue with Angular Cli 1.5.2 Works fine with 1.5.0

Angular Version: 1.5.2

issue with md-bootstrap is fixed with typescript 2.7.1

Have a similar issue AOT build wont work, have to use --prod with --aot=fallse ERROR in : TypeError: Cannot read property ‘kind’ of undefined at nodeCanBeDecorated (node_modules\typescript\lib\typescript.js:7811:36)

Error fixed in typescript version 2.7.0-dev.20171201 https://github.com/Microsoft/TypeScript/pull/20314

In my case it turned out to be the fact that we were using 2 decorators on a function Our code was like this, which should work and is valid

@HostListener('document:keydown.escape', ['$event'])
@dispatch()
onKeydownHandler() {
      return this.actions.hideOverlay();
}

Changing to below got rid of the error

@HostListener('document:keydown.escape', ['$event'])
onKeydownHandler() {
    this.hideOverlay();
}

@dispatch()
hideOverlay() {
   return this.actions.hideOverlay();
}

@MohammedYaseen I’m not sure, but probably using a custom github repo as registry for the dependency typescript in package.json would work. See this for example.

Same error with cli 1.5.2. Downgraded to 1.5.0 and it worked.

@angular/cli: 1.5.2 @angular/xxxx: 5.0.2 typescript: 2.4.2

ERROR in Error: TypeError: Cannot read property 'kind' of undefined
    at nodeCanBeDecorated (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:7805:35)
    at nodeIsDecorated (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:7825:16)
    at Object.nodeOrChildIsDecorated (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:7829:16)
    at isDecoratedClassElement (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51668:23)
    at isInstanceDecoratedClassElement (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51659:20)
    at Object.filter (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:1652:25)
    at getDecoratedClassElements (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51641:23)
    at generateClassElementDecorationExpressions (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51815:27)
    at addClassElementDecorationStatements (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51804:44)
    at visitClassDeclaration (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:51131:13)
    at visitTypeScript (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:50972:28)
    at visitorWorker (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:50785:24)
    at sourceElementVisitorWorker (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:50817:28)
    at saveStateAndInvoke (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:50738:27)
    at sourceElementVisitor (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:50799:20)
    at visitNodes (/Users/cchen6/Desktop/Codes/barter/angular-sell-contract-ui/node_modules/typescript/lib/typescript.js:49280:48)