feat(core): enable block syntax

Enables the new `@` block syntax by default by removing the `enabledBlockTypes` flags. There are still some internal flags that allow special use cases to opt out of the block syntax, like during XML parsing and when compiling older libraries (see angular#51979).

aio/content/examples/inputs-outputs/src/app/app.component.html

@@ -13,7 +13,7 @@ <h1>Inputs and Outputs</h1>
 <!-- #docregion output-parent -->
 <app-item-output (newItemEvent)="addItem($event)"></app-item-output>
 <!-- #enddocregion output-parent -->
-<h3>Parent component receiving value via @Output()</h3>
+<h3>Parent component receiving value via &#64;Output()</h3>
 
 <ul>
   <li *ngFor="let item of items">{{item}}</li>

aio/content/examples/inputs-outputs/src/app/item-detail.component.html

@@ -1,4 +1,4 @@
-<h2>Child component with @Input()</h2>
+<h2>Child component with &#64;Input()</h2>
 
 <!-- #docregion property-in-template -->
 <p>

aio/content/examples/inputs-outputs/src/app/item-details-metadata.component.ts

@@ -9,7 +9,7 @@ import { booleanAttribute } from '@angular/core'; // First, import booleanAttrib
   standalone: true,
   selector: 'app-item-detail-metadata',
   template: `
-  <h2>Child component with @Input() metadata configurations</h2>
+  <h2>Child component with &#64;Input() metadata configurations</h2>
 
   <p>
     Today's item: {{item}}

aio/content/examples/inputs-outputs/src/app/item-output.component.html

@@ -1,4 +1,4 @@
-<h2>Child component with @Output()</h2>
+<h2>Child component with &#64;Output()</h2>
 
 <!-- #docregion child-output -->
 <label for="item-input">Add an item:</label>

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.html

@@ -1,4 +1,4 @@
 <div class="section">
-	<h2>Child of @Host() Component</h2>
+	<h2>Child of &#64;Host() Component</h2>
   <p>Flower emoji: {{flower.emoji}}</p>
 </div>

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.html

@@ -1,5 +1,5 @@
 <div class="section">
-	<h2>Parent of @Host() Component</h2>
+	<h2>Parent of &#64;Host() Component</h2>
 	<p>Flower emoji: {{flower.emoji}}</p>
 	<app-host></app-host>
 </div>

aio/content/examples/resolution-modifiers/src/app/host/host.component.html

@@ -1,6 +1,6 @@
 <div class="section">
-	<h2>@Host() Component</h2>
+	<h2>&#64;Host() Component</h2>
 	<p>Flower emoji: {{flower?.emoji}}</p>
-	<p><i>(@Host() stops it here)</i></p>
+	<p><i>(&#64;Host() stops it here)</i></p>
 	<app-host-child></app-host-child>
 </div>

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.html

@@ -1,4 +1,4 @@
 <div class="section">
-	<h2>@Optional() Component</h2>
-	<p>This component still works even though the OptionalService (notice @Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
+	<h2>&#64;Optional() Component</h2>
+	<p>This component still works even though the OptionalService (notice &#64;Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
 </div>

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.html

@@ -1,4 +1,4 @@
 <div class="section">
-	<h2>@Self() Component (without a provider)</h2>
+	<h2>&#64;Self() Component (without a provider)</h2>
   <p>Leaf emoji: {{leaf?.emoji}}</p>
 </div>

aio/content/examples/resolution-modifiers/src/app/self/self.component.html

@@ -1,4 +1,4 @@
 <div class="section">
-	<h2>@Self() Component</h2>
+	<h2>&#64;Self() Component</h2>
   <p>Flower emoji: {{flower?.emoji}}</p>
 </div>

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.html

@@ -1,4 +1,4 @@
 <div class="section">
-	<h2>@SkipSelf() Component</h2>
+	<h2>&#64;SkipSelf() Component</h2>
   <p>Leaf emoji: {{leaf.emoji}}</p>
 </div>

aio/content/marketing/presskit.html

@@ -431,7 +431,7 @@ <h2>Press and Media</h2>
 
     <p>
       For inquiries regarding press and media please contact us at
-      <a href="mailto:press@angular.io">press@angular.io</a>.
+      <a href="mailto:press@angular.io">press&#64;angular.io</a>.
     </p>
   </div>
 

aio/src/app/custom-elements/events/events.component.html

@@ -7,7 +7,7 @@ <h2>Where we'll be presenting:</h2>
       and follow us on <a href="https://twitter.com/angular">social media</a>.
     </p>
     <p>
-      If you want us to be part of your event reach out on <a href="mailto:devrel@angular.io">devrel@angular.io</a>!
+      If you want us to be part of your event reach out on <a href="mailto:devrel@angular.io">devrel&#64;angular.io</a>!
     </p>
   </div>
   <ng-container *ngSwitchDefault>

aio/tools/transforms/templates/api/includes/annotations.html

@@ -3,7 +3,7 @@
   <h2>Annotations</h2>
 
   {%- for decorator in doc.decorators %}
-  <code-example language="ts" hideCopy="true" class="no-box api-heading{% if decorator.deprecated %} deprecated-api-item{% endif %}">@{$ decorator.name $}({$ decorator.arguments $})</code-example>
+  <code-example language="ts" hideCopy="true" class="no-box api-heading{% if decorator.deprecated %} deprecated-api-item{% endif %}">&#64;{$ decorator.name $}({$ decorator.arguments $})</code-example>
 
   {%- if not decorator.notYetDocumented %}
   {$ decorator.description | marked $}

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -28,7 +28,7 @@
 {%- endmacro -%}
 
 {%- macro renderMemberSyntax(member, truncateLines) -%}
-    {%- if member.boundTo %}<span class="property-binding">@{$ member.boundTo.type $}(
+    {%- if member.boundTo %}<span class="property-binding">&#64;{$ member.boundTo.type $}(
     {%- if member.boundTo.propertyName != member.boundTo.bindingName %}'{$ member.boundTo.bindingName $}'{% endif -%}
     )</span><br>{% endif -%}
     {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}

integration/cli-hello-world-lazy/src/app/app.component.html

@@ -412,8 +412,8 @@ <h2>Next Steps</h2>
   <!-- Terminal -->
   <div class="terminal" [ngSwitch]="selection.value">
       <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
       <pre *ngSwitchCase="'dependency'">ng add _____</pre>
       <pre *ngSwitchCase="'test'">ng test</pre>
       <pre *ngSwitchCase="'build'">ng build --prod</pre>

integration/cli-hello-world-mocha/src/app/app.component.html

@@ -412,8 +412,8 @@ <h2>Next Steps</h2>
   <!-- Terminal -->
   <div class="terminal" [ngSwitch]="selection.value">
       <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
       <pre *ngSwitchCase="'dependency'">ng add _____</pre>
       <pre *ngSwitchCase="'test'">ng test</pre>
       <pre *ngSwitchCase="'build'">ng build --prod</pre>

integration/cli-hello-world/src/app/app.component.html

@@ -412,8 +412,8 @@ <h2>Next Steps</h2>
   <!-- Terminal -->
   <div class="terminal" [ngSwitch]="selection.value">
       <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
       <pre *ngSwitchCase="'dependency'">ng add _____</pre>
       <pre *ngSwitchCase="'test'">ng test</pre>
       <pre *ngSwitchCase="'build'">ng build --prod</pre>

integration/trusted-types/src/app/app.component.html

@@ -415,8 +415,8 @@ <h2>Next Steps</h2>
   <!-- Terminal -->
   <div class="terminal" [ngSwitch]="selection.value">
       <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
+      <pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
+      <pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
       <pre *ngSwitchCase="'dependency'">ng add _____</pre>
       <pre *ngSwitchCase="'test'">ng test</pre>
       <pre *ngSwitchCase="'build'">ng build --prod</pre>

packages/bazel/src/ngc-wrapped/index.ts

@@ -86,7 +86,6 @@ export async function runOneBuild(
     'preserveWhitespaces',
     'createExternalSymbolFactoryReexports',
     'extendedDiagnostics',
-    '_enabledBlockTypes',
   ]);
 
   const userOverrides = Object.entries(userOptions)

packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts

@@ -69,7 +69,7 @@ export class PartialComponentLinkerVersion1<TStatement, TExpression> implements
 
     // Enable the new block syntax if compiled with v17 and
     // above, or when using the local placeholder version.
-    const supportsBlockSyntax = semver.major(version) >= 17 || version === PLACEHOLDER_VERSION;
+    const enableBlockSyntax = semver.major(version) >= 17 || version === PLACEHOLDER_VERSION;
 
     const template = parseTemplate(templateInfo.code, templateInfo.sourceUrl, {
       escapedString: templateInfo.isEscaped,
@@ -80,12 +80,7 @@ export class PartialComponentLinkerVersion1<TStatement, TExpression> implements
           metaObj.has('preserveWhitespaces') ? metaObj.getBoolean('preserveWhitespaces') : false,
       // We normalize line endings if the template is was inline.
       i18nNormalizeLineEndingsInICUs: isInline,
-
-      // TODO(crisbeto): hardcode the supported blocks for now. Before the final release
-      // `enabledBlockTypes` will be replaced with a boolean, at which point `supportsBlockSyntax`
-      // can be passed in directly here.
-      enabledBlockTypes: supportsBlockSyntax ? new Set(['if', 'switch', 'for', 'defer']) :
-                                               undefined,
+      enableBlockSyntax,
     });
     if (template.errors !== null) {
       const errors = template.errors.map(err => err.toString()).join('\n');

packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts

@@ -74,10 +74,9 @@ export class ComponentDecoratorHandler implements
       private rootDirs: ReadonlyArray<string>, private defaultPreserveWhitespaces: boolean,
       private i18nUseExternalIds: boolean, private enableI18nLegacyMessageIdFormat: boolean,
       private usePoisonedData: boolean, private i18nNormalizeLineEndingsInICUs: boolean,
-      private enabledBlockTypes: Set<string>, private moduleResolver: ModuleResolver,
-      private cycleAnalyzer: CycleAnalyzer, private cycleHandlingStrategy: CycleHandlingStrategy,
-      private refEmitter: ReferenceEmitter, private referencesRegistry: ReferencesRegistry,
-      private depTracker: DependencyTracker|null,
+      private moduleResolver: ModuleResolver, private cycleAnalyzer: CycleAnalyzer,
+      private cycleHandlingStrategy: CycleHandlingStrategy, private refEmitter: ReferenceEmitter,
+      private referencesRegistry: ReferencesRegistry, private depTracker: DependencyTracker|null,
       private injectableRegistry: InjectableClassRegistry,
       private semanticDepGraphUpdater: SemanticDepGraphUpdater|null,
       private annotateForClosureCompiler: boolean, private perf: PerfRecorder,
@@ -88,7 +87,6 @@ export class ComponentDecoratorHandler implements
       enableI18nLegacyMessageIdFormat: this.enableI18nLegacyMessageIdFormat,
       i18nNormalizeLineEndingsInICUs: this.i18nNormalizeLineEndingsInICUs,
       usePoisonedData: this.usePoisonedData,
-      enabledBlockTypes: this.enabledBlockTypes,
     };
   }
 
@@ -107,7 +105,6 @@ export class ComponentDecoratorHandler implements
     enableI18nLegacyMessageIdFormat: boolean,
     i18nNormalizeLineEndingsInICUs: boolean,
     usePoisonedData: boolean,
-    enabledBlockTypes: Set<string>,
   };
 
   readonly precedence = HandlerPrecedence.PRIMARY;
@@ -362,7 +359,6 @@ export class ComponentDecoratorHandler implements
             enableI18nLegacyMessageIdFormat: this.enableI18nLegacyMessageIdFormat,
             i18nNormalizeLineEndingsInICUs: this.i18nNormalizeLineEndingsInICUs,
             usePoisonedData: this.usePoisonedData,
-            enabledBlockTypes: this.enabledBlockTypes,
           },
           this.compilationMode);
     }

packages/compiler-cli/src/ngtsc/annotations/component/src/resources.ts

@@ -119,7 +119,6 @@ export interface ExtractTemplateOptions {
   usePoisonedData: boolean;
   enableI18nLegacyMessageIdFormat: boolean;
   i18nNormalizeLineEndingsInICUs: boolean;
-  enabledBlockTypes: Set<string>;
 }
 
 export function extractTemplate(
@@ -238,7 +237,6 @@ function parseExtractedTemplate(
     enableI18nLegacyMessageIdFormat: options.enableI18nLegacyMessageIdFormat,
     i18nNormalizeLineEndingsInICUs,
     alwaysAttemptHtmlToR3AstConversion: options.usePoisonedData,
-    enabledBlockTypes: options.enabledBlockTypes,
   });
 
   // Unfortunately, the primary parse of the template above may not contain accurate source map
@@ -266,7 +264,6 @@ function parseExtractedTemplate(
     i18nNormalizeLineEndingsInICUs,
     leadingTriviaChars: [],
     alwaysAttemptHtmlToR3AstConversion: options.usePoisonedData,
-    enabledBlockTypes: options.enabledBlockTypes,
   });
 
   return {

packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts

@@ -88,7 +88,6 @@ function setup(
       /* enableI18nLegacyMessageIdFormat */ false,
       !!usePoisonedData,
       /* i18nNormalizeLineEndingsInICUs */ false,
-      /* enabledBlockTypes */ new Set(),
       moduleResolver,
       cycleAnalyzer,
       CycleHandlingStrategy.UseRemoteScoping,

packages/compiler-cli/src/ngtsc/core/api/src/options.ts

@@ -30,14 +30,6 @@ export interface TestOnlyOptions {
    */
   _enableTemplateTypeChecker?: boolean;
 
-  /**
-   * Names of the blocks that should be enabled. E.g. `_enabledBlockTypes: ['defer']`
-   * would allow usages of `@defer {}` in templates.
-   *
-   * @internal
-   */
-  _enabledBlockTypes?: string[];
-
   /**
    * An option to enable ngtsc's internal performance tracing.
    *

packages/compiler-cli/src/ngtsc/core/src/compiler.ts

@@ -255,7 +255,6 @@ export class NgCompiler {
   private moduleResolver: ModuleResolver;
   private resourceManager: AdapterResourceLoader;
   private cycleAnalyzer: CycleAnalyzer;
-  private enabledBlockTypes: Set<string>;
   readonly ignoreForDiagnostics: Set<ts.SourceFile>;
   readonly ignoreForEmit: Set<ts.SourceFile>;
   readonly enableTemplateTypeChecker: boolean;
@@ -323,7 +322,6 @@ export class NgCompiler {
   ) {
     this.enableTemplateTypeChecker =
         enableTemplateTypeChecker || (options['_enableTemplateTypeChecker'] ?? false);
-    this.enabledBlockTypes = new Set(options['_enabledBlockTypes'] ?? []);
     this.constructionDiagnostics.push(
         ...this.adapter.constructionDiagnostics, ...verifyCompatibleTypeCheckOptions(this.options));
 
@@ -1095,11 +1093,11 @@ export class NgCompiler {
           this.resourceManager, this.adapter.rootDirs, this.options.preserveWhitespaces || false,
           this.options.i18nUseExternalIds !== false,
           this.options.enableI18nLegacyMessageIdFormat !== false, this.usePoisonedData,
-          this.options.i18nNormalizeLineEndingsInICUs === true, this.enabledBlockTypes,
-          this.moduleResolver, this.cycleAnalyzer, cycleHandlingStrategy, refEmitter,
-          referencesRegistry, this.incrementalCompilation.depGraph, injectableRegistry,
-          semanticDepGraphUpdater, this.closureCompilerEnabled, this.delegatingPerfRecorder,
-          hostDirectivesResolver, supportTestBed, compilationMode, deferredSymbolsTracker),
+          this.options.i18nNormalizeLineEndingsInICUs === true, this.moduleResolver,
+          this.cycleAnalyzer, cycleHandlingStrategy, refEmitter, referencesRegistry,
+          this.incrementalCompilation.depGraph, injectableRegistry, semanticDepGraphUpdater,
+          this.closureCompilerEnabled, this.delegatingPerfRecorder, hostDirectivesResolver,
+          supportTestBed, compilationMode, deferredSymbolsTracker),
 
       // TODO(alxhub): understand why the cast here is necessary (something to do with `null`
       // not being assignable to `unknown` when wrapped in `Readonly`).