@schematics/angular 20.0.0-next.0 → 20.0.0-next.1

package/application/files/module-files/src/app/app.component.ts.template

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.html',<% } %>
+  templateUrl: './app.component.ng.html',<% } %>
   standalone: false,<% if(inlineStyle) { %>
   styles: []<% } else { %>
   styleUrl: './app.component.<%= style %>'<% } %>

package/application/files/standalone-files/src/app/app.component.ts.template

@@ -11,7 +11,7 @@ import { RouterOutlet } from '@angular/router';<% } %>
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.html',<% } if(inlineStyle) { %>
+  templateUrl: './app.component.ng.html',<% } if(inlineStyle) { %>
   styles: [],<% } else { %>
   styleUrl: './app.component.<%= style %>'<% } %>
 })

package/application/index.js

@@ -63,7 +63,7 @@ function default_1(options) {
                     ? (0, schematics_1.filter)((path) => !path.endsWith('tsconfig.spec.json.template'))
                     : (0, schematics_1.noop)(),
                 componentOptions.inlineTemplate
-                    ? (0, schematics_1.filter)((path) => !path.endsWith('component.html.template'))
+                    ? (0, schematics_1.filter)((path) => !path.endsWith('.ng.html.template'))
                     : (0, schematics_1.noop)(),
                 (0, schematics_1.applyTemplates)({
                     utils: schematics_1.strings,

package/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -9,7 +9,7 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
       <%= dasherize(name) %> works!
     </p>
   `<% } else { %>
-  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %><%= ngext %>.html'<% } if(inlineStyle) { %>,
   styles: `<% if(displayBlock){ %>
     :host {
       display: block;

package/component/index.js

@@ -51,6 +51,7 @@ function default_1(options) {
             (0, schematics_1.applyTemplates)({
                 ...schematics_1.strings,
                 'if-flat': (s) => (options.flat ? '' : s),
+                'ngext': options.ngHtml ? '.ng' : '',
                 ...options,
             }),
             !options.type

package/component/schema.d.ts

@@ -49,6 +49,11 @@ export type Schema = {
      * `my-component.component.css`.
      */
     name: string;
+    /**
+     * Generate component template files with an '.ng.html' file extension instead of '.html'.
+     * The '.ng.html' file extension is recommended by the Angular style guide.
+     */
+    ngHtml?: boolean;
     /**
      * The path where the component files should be created, relative to the current workspace.
      * If not provided, a folder with the same name as the component will be created in the

package/component/schema.json

@@ -135,6 +135,11 @@
       "type": "boolean",
       "default": false,
       "description": "Use a default export for the component in its TypeScript file instead of a named export."
+    },
+    "ngHtml": {
+      "type": "boolean",
+      "default": true,
+      "description": "Generate component template files with an '.ng.html' file extension instead of '.html'. The '.ng.html' file extension is recommended by the Angular style guide."
     }
   },
   "required": ["name", "project"]

package/migrations/migration-collection.json

@@ -1,22 +1,12 @@
 {
   "schematics": {
     "use-application-builder": {
-      "version": "19.0.0",
+      "version": "20.0.0",
       "factory": "./use-application-builder/migration",
       "description": "Migrate application projects to the new build system. Application projects that are using the '@angular-devkit/build-angular' package's 'browser' and/or 'browser-esbuild' builders will be migrated to use the new 'application' builder. You can read more about this, including known issues and limitations, here: https://angular.dev/tools/cli/build-system-migration",
       "optional": true,
       "recommended": true,
       "documentation": "tools/cli/build-system-migration"
-    },
-    "update-workspace-config": {
-      "version": "19.0.0",
-      "factory": "./update-workspace-config/migration",
-      "description": "Update the workspace configuration by replacing deprecated options in 'angular.json' for compatibility with the latest Angular CLI changes."
-    },
-    "update-ssr-imports": {
-      "version": "19.0.0",
-      "factory": "./update-ssr-imports/migration",
-      "description": "Update '@angular/ssr' import paths to use the new '/node' entry point when 'CommonEngine' is detected."
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "20.0.0-next.0",
+  "version": "20.0.0-next.1",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -22,14 +22,15 @@
   },
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "20.0.0-next.0",
-    "@angular-devkit/schematics": "20.0.0-next.0",
+    "@angular-devkit/core": "20.0.0-next.1",
+    "@angular-devkit/schematics": "20.0.0-next.1",
     "jsonc-parser": "3.3.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/angular-cli.git"
   },
+  "packageManager": "pnpm@9.15.6",
   "engines": {
     "node": "^20.11.1 || >=22.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",

package/utility/latest-versions.js

@@ -16,7 +16,7 @@ exports.latestVersions = {
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
     Angular: '^20.0.0-next.0',
     NgPackagr: '^20.0.0-next.0',
-    DevkitBuildAngular: '^20.0.0-next.0',
-    AngularBuild: '^20.0.0-next.0',
-    AngularSSR: '^20.0.0-next.0',
+    DevkitBuildAngular: '^20.0.0-next.1',
+    AngularBuild: '^20.0.0-next.1',
+    AngularSSR: '^20.0.0-next.1',
 };

package/workspace/files/tsconfig.json.template

@@ -11,12 +11,10 @@
     "noFallthroughCasesInSwitch": true,<% } %>
     "skipLibCheck": true,
     "isolatedModules": true,
-    "esModuleInterop": true,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "preserve"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false<% if (strict) { %>,

package/migrations/update-ssr-imports/migration.d.ts

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-import { Rule } from '@angular-devkit/schematics';
-/**
- * Schematics rule that identifies and updates import declarations in TypeScript files.
- * Specifically, it modifies imports of '@angular/ssr' by appending '/node' if the
- * `CommonEngine` is used from the old entry point.
- *
- */
-export default function (): Rule;

package/migrations/update-ssr-imports/migration.js

@@ -1,107 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const ts = __importStar(require("../../third_party/github.com/Microsoft/TypeScript/lib/typescript"));
-const dependencies_1 = require("../../utility/dependencies");
-function* visit(directory) {
-    for (const path of directory.subfiles) {
-        if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
-            const entry = directory.file(path);
-            if (entry) {
-                const content = entry.content;
-                if (content.includes('CommonEngine') && !content.includes('@angular/ssr/node')) {
-                    const source = ts.createSourceFile(entry.path, content.toString().replace(/^\uFEFF/, ''), ts.ScriptTarget.Latest, true);
-                    yield source;
-                }
-            }
-        }
-    }
-    for (const path of directory.subdirs) {
-        if (path === 'node_modules' || path.startsWith('.')) {
-            continue;
-        }
-        yield* visit(directory.dir(path));
-    }
-}
-/**
- * Schematics rule that identifies and updates import declarations in TypeScript files.
- * Specifically, it modifies imports of '@angular/ssr' by appending '/node' if the
- * `CommonEngine` is used from the old entry point.
- *
- */
-function default_1() {
-    return (tree) => {
-        if (!(0, dependencies_1.getPackageJsonDependency)(tree, '@angular/ssr')) {
-            return;
-        }
-        for (const sourceFile of visit(tree.root)) {
-            let recorder;
-            const allImportDeclarations = sourceFile.statements.filter((n) => ts.isImportDeclaration(n));
-            if (allImportDeclarations.length === 0) {
-                continue;
-            }
-            const ssrImports = allImportDeclarations.filter((n) => ts.isStringLiteral(n.moduleSpecifier) && n.moduleSpecifier.text === '@angular/ssr');
-            for (const ssrImport of ssrImports) {
-                const ssrNamedBinding = getNamedImports(ssrImport);
-                if (ssrNamedBinding) {
-                    const isUsingOldEntryPoint = ssrNamedBinding.elements.some((e) => e.name.text.startsWith('CommonEngine'));
-                    if (!isUsingOldEntryPoint) {
-                        continue;
-                    }
-                    recorder ??= tree.beginUpdate(sourceFile.fileName);
-                    recorder.insertRight(ssrImport.moduleSpecifier.getEnd() - 1, '/node');
-                }
-            }
-            if (recorder) {
-                tree.commitUpdate(recorder);
-            }
-        }
-    };
-}
-function getNamedImports(importDeclaration) {
-    const namedBindings = importDeclaration?.importClause?.namedBindings;
-    if (namedBindings && ts.isNamedImports(namedBindings)) {
-        return namedBindings;
-    }
-    return undefined;
-}

package/migrations/update-workspace-config/migration.d.ts

@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-import { Rule } from '@angular-devkit/schematics';
-/**
- * Main entry point for the migration rule.
- *
- * This schematic migration performs updates to the Angular workspace configuration
- * to ensure that application projects are properly configured with polyfills
- * required for internationalization (`localize`).
- *
- * It specifically targets application projects that use either the `application`
- * or `browser-esbuild` builders.
- *
- * The migration process involves:
- *
- * 1. Iterating over all projects in the workspace.
- * 2. Checking each project to determine if it is an application-type project.
- * 3. For each application project, examining the associated build targets.
- * 4. If a build target's `localize` option is enabled but the polyfill
- *    `@angular/localize/init` is missing from the `polyfills` array, the polyfill
- *    is automatically added to ensure proper internationalization support.
- *
- * Additionally, this migration updates projects that use the `dev-server` or `extract-i18n`
- * builders to ensure that deprecated `browserTarget` options are migrated to the
- * newer `buildTarget` field.
- *
- */
-export default function (): Rule;

package/migrations/update-workspace-config/migration.js

@@ -1,77 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const workspace_1 = require("../../utility/workspace");
-const workspace_models_1 = require("../../utility/workspace-models");
-/**
- * Main entry point for the migration rule.
- *
- * This schematic migration performs updates to the Angular workspace configuration
- * to ensure that application projects are properly configured with polyfills
- * required for internationalization (`localize`).
- *
- * It specifically targets application projects that use either the `application`
- * or `browser-esbuild` builders.
- *
- * The migration process involves:
- *
- * 1. Iterating over all projects in the workspace.
- * 2. Checking each project to determine if it is an application-type project.
- * 3. For each application project, examining the associated build targets.
- * 4. If a build target's `localize` option is enabled but the polyfill
- *    `@angular/localize/init` is missing from the `polyfills` array, the polyfill
- *    is automatically added to ensure proper internationalization support.
- *
- * Additionally, this migration updates projects that use the `dev-server` or `extract-i18n`
- * builders to ensure that deprecated `browserTarget` options are migrated to the
- * newer `buildTarget` field.
- *
- */
-function default_1() {
-    return (0, workspace_1.updateWorkspace)((workspace) => {
-        for (const project of workspace.projects.values()) {
-            if (project.extensions.projectType !== workspace_models_1.ProjectType.Application) {
-                continue;
-            }
-            for (const target of project.targets.values()) {
-                if (target.builder === workspace_models_1.Builders.DevServer || target.builder === workspace_models_1.Builders.ExtractI18n) {
-                    // Migrate `browserTarget` to `buildTarget`
-                    for (const [, options] of (0, workspace_1.allTargetOptions)(target, false)) {
-                        if (options['browserTarget'] && !options['buildTarget']) {
-                            options['buildTarget'] = options['browserTarget'];
-                        }
-                        delete options['browserTarget'];
-                    }
-                }
-                // Check if the target uses application-related builders
-                if (target.builder !== workspace_models_1.Builders.BuildApplication &&
-                    target.builder !== workspace_models_1.Builders.Application &&
-                    target.builder !== workspace_models_1.Builders.BrowserEsbuild) {
-                    continue;
-                }
-                // Check if polyfills include '@angular/localize/init'
-                const polyfills = target.options?.['polyfills'];
-                if (Array.isArray(polyfills) &&
-                    polyfills.some((polyfill) => typeof polyfill === 'string' && polyfill.startsWith('@angular/localize'))) {
-                    // Skip if the polyfill is already present
-                    continue;
-                }
-                // Add '@angular/localize/init' polyfill if localize option is enabled
-                for (const [, options] of (0, workspace_1.allTargetOptions)(target, false)) {
-                    if (options['localize']) {
-                        target.options ??= {};
-                        (target.options['polyfills'] ??= []).push('@angular/localize/init');
-                        break;
-                    }
-                }
-            }
-        }
-    });
-}