refactor(platform-browser): improve error message for UNEXPECTED_SYNTHETIC_PROPERTY (#58983)

DMezhenskyi · thePunderWoman · commit 74ce62988330 · 2025-01-08T15:56:19.000Z
Improve error message by adding instructions for enabling animations using standalone API. PR Close #58983
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
@@ -4521,8 +4521,8 @@ const DEFAULT_COMPONENT_ID = '1';
 
       function syntheticPropError(name: string, nameKind: string) {
         return `NG05105: Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
-  - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
-  - There is corresponding configuration for the animation named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`;
+  - Make sure \`provideAnimationsAsync()\`, \`provideAnimations()\` or \`provideNoopAnimations()\` call was added to a list of providers used to bootstrap an application.
+  - There is a corresponding animation configuration named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.dev/api/core/Component#animations).`;
       }
 
       describe('when modules are missing', () => {
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -403,8 +403,8 @@ function checkNoSyntheticProp(name: string, nameKind: string) {
     throw new RuntimeError(
       RuntimeErrorCode.UNEXPECTED_SYNTHETIC_PROPERTY,
       `Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
-  - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
-  - There is corresponding configuration for the animation named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`,
+  - Make sure \`provideAnimationsAsync()\`, \`provideAnimations()\` or \`provideNoopAnimations()\` call was added to a list of providers used to bootstrap an application.
+  - There is a corresponding animation configuration named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.dev/api/core/Component#animations).`,
     );
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -4521,8 +4521,8 @@ const DEFAULT_COMPONENT_ID = '1';`
`4521`	`4521`
`4522`	`4522`	`function syntheticPropError(name: string, nameKind: string) {`
`4523`	`4523`	return `NG05105: Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
`4524`		- - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
`4525`		- - There is corresponding configuration for the animation named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`;
	`4524`	+ - Make sure \`provideAnimationsAsync()\`, \`provideAnimations()\` or \`provideNoopAnimations()\` call was added to a list of providers used to bootstrap an application.
	`4525`	+ - There is a corresponding animation configuration named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.dev/api/core/Component#animations).`;
`4526`	`4526`	`}`
`4527`	`4527`
`4528`	`4528`	`describe('when modules are missing', () => {`
Original file line number	Diff line number	Diff line change
`@@ -403,8 +403,8 @@ function checkNoSyntheticProp(name: string, nameKind: string) {`
`403`	`403`	`throw new RuntimeError(`
`404`	`404`	`RuntimeErrorCode.UNEXPECTED_SYNTHETIC_PROPERTY,`
`405`	`405`	`Unexpected synthetic ${nameKind} ${name} found. Please make sure that:
`406`		- - Either \`BrowserAnimationsModule\` or \`NoopAnimationsModule\` are imported in your application.
`407`		- - There is corresponding configuration for the animation named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.io/api/core/Component#animations).`,
	`406`	+ - Make sure \`provideAnimationsAsync()\`, \`provideAnimations()\` or \`provideNoopAnimations()\` call was added to a list of providers used to bootstrap an application.
	`407`	+ - There is a corresponding animation configuration named \`${name}\` defined in the \`animations\` field of the \`@Component\` decorator (see https://angular.dev/api/core/Component#animations).`,
`408`	`408`	`);`
`409`	`409`	`}`
`410`	`410`	`}`