Angular-cli: Object spread results in 'Cannot read property 'kind' of undefined' error.

[jinder]

OS?

Mac OSX Sierra

Versions.

@angular/cli: 1.0.0-beta.31
node: 7.5.0
os: darwin x64
@angular/common: 4.0.0-beta.7
@angular/compiler: 4.0.0-beta.7
@angular/core: 4.0.0-beta.7
@angular/forms: 4.0.0-beta.7
@angular/http: 4.0.0-beta.7
@angular/platform-browser: 4.0.0-beta.7
@angular/platform-browser-dynamic: 4.0.0-beta.7
@angular/router: 4.0.0-beta.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 4.0.0-beta.7

Repro steps.

Create a file using the reducer snippet below. Run ng build.

The log given by the failure.

Module build failed: TypeError: Cannot read property 'kind' of undefined
    at _getContentOfKeyLiteral (/Users/jinder/git/kangaroom-web/node_modules/@ngtools/webpack/src/loader.js:9:13)
    at node.properties.some.prop (/Users/jinder/git/kangaroom-web/node_modules/@ngtools/webpack/src/loader.js:205:56)
    at Array.some (native)
    at refactor.findAstNodes.filter (/Users/jinder/git/kangaroom-web/node_modules/@ngtools/webpack/src/loader.js:205:43)
    at Array.filter (native)
    at _removeModuleId (/Users/jinder/git/kangaroom-web/node_modules/@ngtools/webpack/src/loader.js:205:10)
    at Promise.resolve.then.then (/Users/jinder/git/kangaroom-web/node_modules/@ngtools/webpack/src/loader.js:301:33)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./src/app/app.reducer.ts 34:0-55
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Mention any other details that might be useful.

This only occurs when doing a normal build. If you use --aot, the error doesn't happen. Error only seems to occur when using object spread syntax in my reducer. If I comment out the spread syntax, it will build without error.

export function reducer(state = initialState, action: layout.Actions): State {
  switch (action.type) {
    case layout.ActionTypes.CloseMenu:
      return { ...state, showMenu: false };

    default:
      return state;
  }
}

[CalvinDale]

I'm also encountering TypeError: Cannot read property 'kind' of undefined when I attempt to use the object spread operator.

• Doesn't work

@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: ^4.0.0-beta.7
typescript: ^2.1.6

• Works

angular-cli: 1.0.0-beta.24,
@angular/compiler-cli: ^2.4.2,
typescript: ~2.1.4

[alexeden]

I'm getting the same thing on a project that's using the @ngtools webpack loader. I can confirm that removing usage of the object spread operator fixes it.

@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@ngtools/[email protected]
[email protected]

I got it working by adding a few lines to node_modules/@ngtools/webpack/src/loader.js: Line 8:

function _getContentOfKeyLiteral(source, node) {
  /* HACK: workaround for "Cannot read property 'kind' of undefined" error */
  if (!node) {
    return null;
  }
  else if (node.kind == ts.SyntaxKind.Identifier) {
      return node.text;
  }
  else if (node.kind == ts.SyntaxKind.StringLiteral) {
      return node.text;
  }
  else {
      return null;
  }
}

[WonderPanda]

Also running into the same issue:

"@angular/common": "^2.4.3",
"@angular/compiler": "^2.4.3",
"@angular/compiler-cli": "^2.4.3",
"@angular/core": "^2.4.3",
"@angular/cli": "^1.0.0-beta.30",
"@ngtools/webpack": "1.2.4",

Any updates would be super appreciated as I don't think I can use an NPM hack right now with so many people working on our project.

[carloscolombo]

This might be related and possibly fixed with #4642 but....

I am getting a different error when I use the spread operator like so

let test = { ...state, prop: false };

I keep getting the flowing error

ERROR in /Users/carloscolombo/src/web/Popflow2/src/app/workflows/workflows.reducer.ts (36,26): Property assignment expected.)

angular-cli: 1.0.0-beta.28.3
node: 7.5.0
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/compiler-cli: 2.4.7

[jinder]

@carloscolombo are you sure you're using TS2.1?

[carloscolombo]

@jinder yeah, looks like it

npm list -g --depth=0

├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

any thoughts?

[jinder]

@carloscolombo you can't rely on your globally installed TS version. You have to specifically override angular-cli's ts compiler. If I remember correctly, beta 28 uses 2.0.

[carloscolombo]

@jinder whoops! thanks!

Now I am getting the same error the others were having... hooray!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}