Bug in AOT mode with Angular 5 when using yarn: TypeScript compilation failed

[quanterion]

Bug when using AOT with Angular 5

Versions.

Yarn: 1.2.1
Angular CLI: 1.5.0-rc.1
Node: 8.4.0
OS: win32 x64
Angular: 5.0.0-rc.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

angular/cli: 1.5.0-rc.1
angular-devkit/build-optimizer: 0.0.28
angular-devkit/core: 0.0.20
angular-devkit/schematics: 0.0.34
ngtools/json-schema: 1.1.0
schematics/angular: 0.0.46
typescript: 2.4.2
webpack: 3.7.1

Repro steps.

1. ng set --global packageManager=yarn
2. ng new myApp
3. update package.json to Angular 5
4. ng serve --aot

The log given by the failure.

ERROR in ./src/main.ts
Module build failed: Error: TypeScript compilation failed.
at plugin.done.then (X:\ng15y\node_modules@angular\cli\node_modules@ngtools\webpack\src\loader.js:479:27)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: Error: TypeScript compilation failed.
at plugin.done.then (X:\ng15y\node_modules@angular\cli\node_modules@ngtools\webpack\src\loader.js:479:27)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ multi ./src/polyfills.ts
ERROR in

Mention any other details that might be useful.

I use yarn 1.2.1 to install dependencies. I couldn't reproduce this error in empty project with npm 5, but after installing libraries material-beta.12, covalent-beta.8-1 and angulartics-2.4.0 the same problem also appears.
Reverting project to Angular 4.4.5 fixes this issue in both cases.

[quanterion]

Project example: https://github.com/quanterion/cli-aot-bug

[quanterion]

I have Angular-Cli installed via npm when I remove cli from npm and install via yarn it gives me more detailed error message when serving with ng serve --aot:

ERROR in ./src/main.ts
Module build failed: Error: TypeScript compilation failed.
at plugin.done.then (X:\ng15\node_modules@angular\cli\node_modules@ngtools\webpack\src\loader.js:479:27)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: Error: TypeScript compilation failed.
at plugin.done.then (X:\ng15\node_modules@angular\cli\node_modules@ngtools\webpack\src\loader.js:479:27)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ multi ./src/polyfills.ts
ERROR in

webpack: Failed to compile.
X:\ng15\node_modules\typescript\lib\typescript.js:69795
throw e;
^

TypeError: Cannot read property 'length' of undefined
at Object.unescapeIdentifier (X:\ng15\node_modules\typescript\lib\typescript.js:10550:26)
at getTextOfNode (X:\ng15\node_modules\typescript\lib\typescript.js:68575:27)
at emitIdentifier (X:\ng15\node_modules\typescript\lib\typescript.js:66931:19)
at pipelineEmitUnspecified (X:\ng15\node_modules\typescript\lib\typescript.js:66594:28)
at pipelineEmitWithHint (X:\ng15\node_modules\typescript\lib\typescript.js:66566:50)
at pipelineEmitWithSourceMap (X:\ng15\node_modules\typescript\lib\typescript.js:66558:17)
at emitNodeWithComments (X:\ng15\node_modules\typescript\lib\typescript.js:64200:17)
at pipelineEmitWithComments (X:\ng15\node_modules\typescript\lib\typescript.js:66547:17)
at pipelineEmitWithNotification (X:\ng15\node_modules\typescript\lib\typescript.js:66541:17)
at emit (X:\ng15\node_modules\typescript\lib\typescript.js:66528:13)

[pschmoek]

Same here.
It's because yarn fails to dedupe typescript:

package.json

{
  "dependencies": {
    "@angular/core": "5.0.0-rc.3",
    ...
  },
  "devDependencies": {
    "@angular/cli": "1.5.0-rc.1",
    "typescript": "~2.4.2",
    ...
  }
}

yarn.lock

"typescript@>=2.0.0 <2.6.0", typescript@^2.3.3:
  version "2.5.3"
  resolved "URL"

typescript@~2.4.2:
  version "2.4.2"
  resolved "URL"

Using npm only 2.4.2 is used and build --prod --aot works fine.

[pschmoek]

... tested with npm 3.10.10, dunno about 5. Tired of yarn bugs 😪

edit:
yarnpkg/yarn#3778
So it's broken because @angular-devkit/build-optimizer has caret peerDependency (^2.3.3) which yarn does not dedupe.

[Matmo10]

I'm experiencing the same error. This was happening on the 1.5.0 beta releases also, I just never filed an issue because I figured something was wrong on my end.

yarn.lock has been my source of truth for awhile now, switching to npm scares me 😨

[csentis]

@Matmo10 same here, although npm‘s package lockfile seems tempting...

[devoto13]

It is not a Yarn bug anyhow. Hoisting is an implementation detail of the package manager (including Yarn) and if one wants to have single instance of some package, they should specify it as a peer dependency instead of a normal dependency. Expecting that package manager will always hoist it to the single instance is wrong.

So the right fix here is probably to change @angular-devkit/build-optimizer's package.json to have typescript as a peer dependency instead of a normal dependency. And this will be correct requirement for a package manager and will ensure that dependency is present only once in the node_modules (which looks like the root cause of the exception).

cc @filipesilva

PS There were several fixes in Yarn around peer dependencies resolution (yarnpkg/yarn#4433 and yarnpkg/yarn#4539) in recent versions, so I would recommend to use >=1.2.1 which contains all of them .

[filipesilva]

We're aware of this problem but there actually is no non-breaking change that would fix it.

It's not about the peer dependency on build-optimizer. Build optimizer doesn't need to use the same typescript as your project.

It's about peer dependency that @ngtools/webpack has on typescript, and the fact that we use the same Angular CLI npm package for both global and local installs.

@ngtools/webpack has a peer dependency on typescript to ensure it uses the project TS. But since we use the same global and local Angular CLI package, this is a problem. On your project, @ngtools/webpack wants to use the local typescript. But on the global install there is no project typescript.

So to prevent peer dependency errors/warnings @angular/cli provides TS as well in its dependencies. And we rely on package manager hoisting to ensure the right dependency is provided.

This is wrong because, as @devoto13 said, to hoist or not is an implementation detail of the package manager. The right way to do it is with peer dependencies.

But we can't do that until we split the global and local CLI installs. And that's a breaking change. So that's where we stand right now. There may be a couple of hacks we do to try to sort this out for now but they are hacks.

[filipesilva]

Fixed by #8185