refactor(core): Improve NG0600 error message. (angular#60418)

This commit adds the mention of templates as illegal context to write signals.

fixes angular#60143

PR Close angular#60418

Author: JeanMeche

packages/core/src/application/application_ref.ts

@@ -10,7 +10,11 @@ import '../util/ng_hmr_mode';
 import '../util/ng_jit_mode';
 import '../util/ng_server_mode';
 
-import {setActiveConsumer, setThrowInvalidWriteToSignalError} from '../../primitives/signals';
+import {
+  setActiveConsumer,
+  getActiveConsumer,
+  setThrowInvalidWriteToSignalError,
+} from '../../primitives/signals';
 import {type Observable, Subject, type Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -44,6 +48,7 @@ import {NgZone} from '../zone/ng_zone';
 import {profiler} from '../render3/profiler';
 import {ProfilerEvent} from '../render3/profiler_types';
 import {EffectScheduler} from '../render3/reactivity/root_effect_scheduler';
+import {isReactiveLViewConsumer} from '../render3/reactive_lview_consumer';
 import {ApplicationInitStatus} from './application_init';
 import {TracingAction, TracingService, TracingSnapshot} from './tracing';
 
@@ -70,10 +75,15 @@ export function publishDefaultGlobalUtils() {
  */
 export function publishSignalConfiguration(): void {
   setThrowInvalidWriteToSignalError(() => {
-    throw new RuntimeError(
-      RuntimeErrorCode.SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT,
-      ngDevMode && 'Writing to signals is not allowed in a `computed`.',
-    );
+    let errorMessage = '';
+    if (ngDevMode) {
+      const activeConsumer = getActiveConsumer();
+      errorMessage =
+        activeConsumer && isReactiveLViewConsumer(activeConsumer)
+          ? 'Writing to signals is not allowed while Angular renders the template (eg. interpolations)'
+          : 'Writing to signals is not allowed in a `computed`';
+    }
+    throw new RuntimeError(RuntimeErrorCode.SIGNAL_WRITE_FROM_ILLEGAL_CONTEXT, errorMessage);
   });
 }
 

packages/core/src/render3/reactive_lview_consumer.ts

@@ -8,16 +8,8 @@
 
 import {REACTIVE_NODE, ReactiveNode} from '../../primitives/signals';
 
-import {
-  LView,
-  PARENT,
-  REACTIVE_TEMPLATE_CONSUMER,
-  TVIEW,
-  TView,
-  TViewType,
-} from './interfaces/view';
+import {LView, REACTIVE_TEMPLATE_CONSUMER, TVIEW, TView, TViewType} from './interfaces/view';
 import {getLViewParent, markAncestorsForTraversal, markViewForRefresh} from './util/view_utils';
-import {assertDefined} from '../util/assert';
 
 let freeConsumers: ReactiveNode[] = [];
 export interface ReactiveLViewConsumer extends ReactiveNode {
@@ -117,3 +109,7 @@ export const TEMPORARY_CONSUMER_NODE = {
 export function viewShouldHaveReactiveConsumer(tView: TView) {
   return tView.type !== TViewType.Embedded;
 }
+
+export function isReactiveLViewConsumer(node: ReactiveNode): node is ReactiveLViewConsumer {
+  return node.kind === 'template';
+}

packages/core/test/render3/reactivity_spec.ts

@@ -751,6 +751,41 @@ describe('reactivity', () => {
       expect(effectRef[SIGNAL].debugName).toBe('TEST_DEBUG_NAME');
     });
 
+    it('should disallow writing to signals within computed', () => {
+      @Component({
+        selector: 'with-input',
+        template: '{{comp()}}',
+      })
+      class WriteComputed {
+        sig = signal(0);
+        comp = computed(() => {
+          this.sig.set(this.sig() + 1);
+          return this.sig();
+        });
+      }
+
+      const fixture = TestBed.createComponent(WriteComputed);
+
+      expect(() => fixture.detectChanges()).toThrowError(/NG0600.*in a `computed`/);
+    });
+
+    it('should disallow writing to signals within a template', () => {
+      @Component({
+        selector: 'with-input',
+        template: '{{func()}}',
+      })
+      class WriteComputed {
+        sig = signal(0);
+        func() {
+          this.sig.set(this.sig() + 1);
+        }
+      }
+
+      const fixture = TestBed.createComponent(WriteComputed);
+
+      expect(() => fixture.detectChanges()).toThrowError(/NG0600.*template/);
+    });
+
     describe('effects created in components should first run after ngOnInit', () => {
       it('when created during bootstrapping', () => {
         let log: string[] = [];