"Angular JIT compilation failed" errors should include the type name

[SchnWalter]

🚀 feature request

Relevant Package

This feature request is for @angular/core

Description

It would be nice if errors thrown by getCompilerFacade() would provide more details about the actual error, the current generic error is very ambiguous and there's no real information about the actual issue:

main.ts:15 Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:562) [angular]
    at Function.get (core.js:10873) [angular]
    at getFactoryDef (core.js:1850) [angular]
    at providerToFactory (core.js:11428) [angular]
    at providerToRecord (core.js:11415) [angular]
    at R3Injector.processProvider (core.js:11313) [angular]
    at :4200/vendor.js:87752:61 [angular]
    at :4200/vendor.js:77611:76 [angular]
    at Array.forEach () [angular]
    at deepForEach (core.js:1146) [angular]
    at :4200/vendor.js:77611:51 [angular]
    at Array.forEach () [angular]
    at deepForEach (core.js:1146) [angular]
    at R3Injector.processInjectorType (core.js:11287) [angular]
    at :4200/vendor.js:87570:48 [angular]
    at :4200/vendor.js:77611:76 [angular]
    at Array.forEach () [angular]
    at deepForEach (core.js:1146) [angular]
    at new R3Injector (core.js:11105) [angular]
    at createInjectorWithoutInjectorInstances (core.js:11079) [angular]
    at new NgModuleRef$1 (core.js:24291) [angular]
    at NgModuleFactory$1.create (core.js:24354) [angular]
    at :4200/vendor.js:104558:45 [angular]
    at Object.onInvoke (core.js:27550) [angular]
    at NgZone.run (core.js:27432) []
    at PlatformRef.bootstrapModuleFactory (core.js:28091) []
    at :4200/vendor.js:104603:41 []
    at :4200/polyfills.js:5768:40 []
    at drainMicroTaskQueue (zone-evergreen.js:569) []

NOTE: The above error is also seen with aot: true in cases when the compiler is not able to modify the special decorators, but the error doesn't make any sense in that situation.

Describe the solution you'd like

From what I can tell, there are 7 custom defined properties (getters) in which that function is called:

• NG_PROV_DEF - property defined in compileInjectable()
• NG_INJ_DEF - property defined in compileNgModuleDefs()
• NG_COMP_DEF - property defined in compileComponent()
• NG_DIR_DEF - property defined in compileDirective()
• NG_PIPE_DEF - property defined in compilePipe()
• NG_MOD_DEF - property defined in compileNgModuleDefs()
• NG_FACTORY_DEF - property defined in compilePipe() & compileInjectable()

All of these properties are used as type[X_DEF] directly by:

• getInheritedInjectableDef()
• getDirectiveDef()
• getComponentDef()
• getPipeDef()
• getNgModuleDef()
• getFactoryDef()

And because the getters simply call getCompilerFacade(), there's no information about the type in which the error thrown.

angular/packages/core/src/di/jit/injectable.ts

Lines 47 to 65 in d4bb4a0

	Object.defineProperty(type, NG_FACTORY_DEF, {
	get: () => {
	if (ngFactoryDef === null) {
	const metadata = getInjectableMetadata(type, srcMeta);
	const compiler = getCompilerFacade();
	ngFactoryDef = compiler.compileFactory(angularCoreDiEnv, `ng:///${type.name}/ɵfac.js`, {
	name: metadata.name,
	type: metadata.type,
	typeArgumentCount: metadata.typeArgumentCount,
	deps: reflectDependencies(type),
	injectFn: 'inject',
	target: compiler.R3FactoryTarget.Injectable
	});
	}
	return ngFactoryDef;
	},
	// Leave this configurable so that the factories from directives or pipes can take precedence.
	configurable: true
	});

A simple solution would be to catch the error and either emit a wrapped error with more details or add an extra entry in the console, something like: https://github.com/SchnWalter/angular/commit/dd2e5537a58efb817c52a262ddd848dcf2d75760. Please let me know what's the preferred fix and I can create a PR.

Describe alternatives you've considered

You need to add a breakpoint and go back the stack trace, because there's no data in the console.

[Geschan]

This would be very helpfull - spent ages searching for "Angular JIT compilation failed" caused by a single dependency.
The "type" actually helped me to find the dependency and replace it. So if it would have been included in the error message it probably would have helped reducing time spend fixing it.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alxhub]

Moving this to accepted as a backlog FR, as effort is minimal and this is something we've also discussed in the context of partially compiled code.