Angular Language Service ngcc error in VSCode 1.62.1 and above

[jkyoutsey]

Which @angular/* package(s) are the source of the bug?

language-service

Is this a regression?

Yes

Description

I've upgraded to Angular 12 and I've installed the latest 12.x version VSIX of @angular/language-service extension in VSCode. But I get a popup error in the bottom right corner.

Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

This is the OUTPUT:
[Info  - 7:04:14 AM] Angular language server process ID: 34020
[Info  - 7:04:14 AM] Using typescript/lib/tsserverlibrary v4.3.5 from /Users/jyoutsey/src/myorg/ng/node_modules/typescript/lib/tsserverlibrary.js
[Info  - 7:04:14 AM] Using @angular/language-service v12.2.12 from /Users/jyoutsey/.vscode/extensions/angular.ng-template-12.2.3/node_modules/@angular/language-service/index.js
[Info  - 7:04:14 AM] Logging is turned off. To enable, run command 'Open Angular server log'.
[Error - 7:04:39 AM] Failed to run ngcc for /Users/jyoutsey/src/myorg/ng/tsconfig.json, language service may not operate correctly:
    ngcc for /Users/jyoutsey/src/myorg/ng/tsconfig.json returned exit code null, stderr: 
[Info  - 7:04:39 AM] Enabling Ivy language service for /Users/jyoutsey/src/myorg/ng/tsconfig.json.

Please provide the environment you discovered this bug in

Angular CLI: 12.2.13
Node: 14.15.1
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.2.13
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1202.13
@angular-devkit/build-angular      12.2.13
@angular-devkit/core               12.2.13
@angular-devkit/schematics         12.2.13
@angular/cdk                       12.2.12
@angular/material                  12.2.12
@angular/material-moment-adapter   12.2.12
@schematics/angular                12.2.13
rxjs                               7.4.0
typescript                         4.3.5

Anything else?

I've uninstalled the extension, restarted VSCode, and installed it again, to no avail.

[atscott]

A few questions to help debugging, as I have not been able to reproduce this myself:

• Do you have an example project and what are the steps to reproduce with an example project?
• Are your v12 projects using Ivy or View Engine? (is "enableIvy": false in the tsconfig.json)
• Are the dependencies installed for the project? (yarn/npm install)
• Does ngc fail when run manually on the project? (yarn/npm run ngc or ./node_modules/.bin/ngc tsconfig.json)
• Does ngcc fail when run manually on the project? (yarn/npm run ngcc or ./node_modules/.bin/ngcc --tsconfig tsconfig.json)

[jkyoutsey]

@atscott Inline...

• Do you have an example project and what are the steps to reproduce with an example project?
  • No, this is a very large project.
• Are your v12 projects using Ivy or View Engine? (is "enableIvy": false in the tsconfig.json)
  • Ivy. No entry in tsconfig.json
• Are the dependencies installed for the project? (yarn/npm install)
  • Yes
• Does ngc fail when run manually on the project? (yarn/npm run ngc or ./node_modules/.bin/ngc tsconfig.json)
  • No. Only spec files fail and only where we have a TestComponent defined because it can't seem to resolve the references. However ng test and ng test --configuration production and WallabyJS all run tests without issues. npm install runs nccc without issue as well. And everything about the application works.
• Does ngcc fail when run manually on the project? (yarn/npm run ngcc or ./node_modules/.bin/ngcc --tsconfig tsconfig.json)
  • ./node_modules/.bin/ngcc --tsconfig tsconfig.json produces no output at all when I run it.

Here is my tsconfig.json

{
	"compileOnSave": false,
	"compilerOptions": {
		"baseUrl": "./",
		"importHelpers": true,
		"outDir": "./dist/out-tsc",
		"sourceMap": true,
		"declaration": false,
		"module": "es2020",
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"target": "es2015",
		"typeRoots": ["node_modules/@types"],
		"lib": ["es2017", "dom"],
		"paths": {
			"@environments/*": ["src/environments/*"],
			"@services/*": ["src/app/services/*"],
			"@core/*": ["src/app/core/*"],
			"@utils/*": ["src/app/utils/*"],
			"@common/*": ["src/app/common/*"],
			"@store/*": ["src/app/store/*"],
			"@account/*": ["src/app/features/account/*"],
			"@chrome/*": ["src/app/features/chrome/*"],
			"@media/*": ["src/app/features/media/*"],
			"@book/*": ["src/app/features/book/*"]
		},
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,

		// Strictness Checks
		"noImplicitThis": true,
		"alwaysStrict": true
	},
	"angularCompilerOptions": {
		"fullTemplateTypeCheck": true
	}
}

[atscott]

@jkyoutsey I don't see anything abnormal about any of the information you've provided. You mentioned that this is a regression and was working before. Let's see if we can pin down what version this stopped working with. Can you try installing different versions of angular / the vscode extension to see where the problem started occurring?

[jkyoutsey]

@atscott It was working in 11 latest. I upgraded to 12 latest via CLI. At one point I had installed v13 of the extension, then got that error. Removed the extension and installed v12.2.12 of the extension via VSIX.
I'm not sure how I would go backwards from Angular 12 to 11. But I could install VSIX versions of the extension going back to 12.0?

[atscott]

@jkyoutsey Right, if you can try going backwards with the vscode extension versions, maybe we can find one that worked. If not, then it must have been the update from v11 to v12 of Angular. You could manually change the versions in the package.json with find/replace to go backwards. It might be that there was a specific patch version (12.2.x) that broke things.

[atscott]

@jkyoutsey What version of VSCode are you using? I'm also gathering information from the report on the extension repository and it seems that it might be related to the latest Insider version. Can you try the extension an older version of vscode as well?

[atscott]

Okay, I have been able to isolate this to the vscode 1.62.1 release. The error does not occur in the 1.62.0 release. When updating to 1.62.1 with no other changes, the ngcc process fails.

[jkyoutsey]

@atscott Thanks for figuring out the source of this!