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

package/app-shell/index.js

@@ -17,10 +17,9 @@ const typescript_1 = __importDefault(require("../third_party/github.com/Microsof
 const ast_utils_1 = require("../utility/ast-utils");
 const change_1 = require("../utility/change");
 const ng_ast_utils_1 = require("../utility/ng-ast-utils");
+const project_targets_1 = require("../utility/project-targets");
 const util_1 = require("../utility/standalone/util");
 const workspace_1 = require("../utility/workspace");
-const workspace_models_1 = require("../utility/workspace-models");
-const APP_SHELL_ROUTE = 'shell';
 function getSourceFile(host, path) {
     const content = host.readText(path);
     const source = typescript_1.default.createSourceFile(path, content, typescript_1.default.ScriptTarget.Latest, true);
@@ -120,110 +119,6 @@ function getMetadataProperty(metadata, propertyName) {
     })[0];
     return property;
 }
-function addAppShellConfigToWorkspace(options) {
-    return (0, workspace_1.updateWorkspace)((workspace) => {
-        const project = workspace.projects.get(options.project);
-        if (!project) {
-            return;
-        }
-        const buildTarget = project.targets.get('build');
-        if (buildTarget?.builder === workspace_models_1.Builders.Application ||
-            buildTarget?.builder === workspace_models_1.Builders.BuildApplication) {
-            // Application builder configuration.
-            const prodConfig = buildTarget.configurations?.production;
-            if (!prodConfig) {
-                throw new schematics_1.SchematicsException(`A "production" configuration is not defined for the "build" builder.`);
-            }
-            prodConfig.appShell = true;
-        }
-    });
-}
-function addServerRoutes(options) {
-    return async (host) => {
-        // The workspace gets updated so this needs to be reloaded
-        const workspace = await (0, workspace_1.getWorkspace)(host);
-        const project = workspace.projects.get(options.project);
-        if (!project) {
-            throw new schematics_1.SchematicsException(`Invalid project name (${options.project})`);
-        }
-        const modulePath = getServerModulePath(host, project.sourceRoot || 'src', 'main.server.ts');
-        if (modulePath === null) {
-            throw new schematics_1.SchematicsException('Server module not found.');
-        }
-        let moduleSource = getSourceFile(host, modulePath);
-        if (!(0, ast_utils_1.isImported)(moduleSource, 'Routes', '@angular/router')) {
-            const recorder = host.beginUpdate(modulePath);
-            const routesChange = (0, ast_utils_1.insertImport)(moduleSource, modulePath, 'Routes', '@angular/router');
-            if (routesChange) {
-                (0, change_1.applyToUpdateRecorder)(recorder, [routesChange]);
-            }
-            const imports = (0, ast_utils_1.getSourceNodes)(moduleSource)
-                .filter((node) => node.kind === typescript_1.default.SyntaxKind.ImportDeclaration)
-                .sort((a, b) => a.getStart() - b.getStart());
-            const insertPosition = imports[imports.length - 1].getEnd();
-            const routeText = `\n\nconst routes: Routes = [ { path: '${APP_SHELL_ROUTE}', component: AppShellComponent }];`;
-            recorder.insertRight(insertPosition, routeText);
-            host.commitUpdate(recorder);
-        }
-        moduleSource = getSourceFile(host, modulePath);
-        if (!(0, ast_utils_1.isImported)(moduleSource, 'RouterModule', '@angular/router')) {
-            const recorder = host.beginUpdate(modulePath);
-            const routerModuleChange = (0, ast_utils_1.insertImport)(moduleSource, modulePath, 'RouterModule', '@angular/router');
-            if (routerModuleChange) {
-                (0, change_1.applyToUpdateRecorder)(recorder, [routerModuleChange]);
-            }
-            const metadataChange = (0, ast_utils_1.addSymbolToNgModuleMetadata)(moduleSource, modulePath, 'imports', 'RouterModule.forRoot(routes)');
-            if (metadataChange) {
-                (0, change_1.applyToUpdateRecorder)(recorder, metadataChange);
-            }
-            host.commitUpdate(recorder);
-        }
-    };
-}
-function addStandaloneServerRoute(options) {
-    return async (host) => {
-        const workspace = await (0, workspace_1.getWorkspace)(host);
-        const project = workspace.projects.get(options.project);
-        if (!project) {
-            throw new schematics_1.SchematicsException(`Project name "${options.project}" doesn't not exist.`);
-        }
-        const configFilePath = (0, posix_1.join)(project.sourceRoot ?? 'src', 'app/app.config.server.ts');
-        if (!host.exists(configFilePath)) {
-            throw new schematics_1.SchematicsException(`Cannot find "${configFilePath}".`);
-        }
-        const recorder = host.beginUpdate(configFilePath);
-        let configSourceFile = getSourceFile(host, configFilePath);
-        if (!(0, ast_utils_1.isImported)(configSourceFile, 'ROUTES', '@angular/router')) {
-            const routesChange = (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'ROUTES', '@angular/router');
-            if (routesChange) {
-                (0, change_1.applyToUpdateRecorder)(recorder, [routesChange]);
-            }
-        }
-        configSourceFile = getSourceFile(host, configFilePath);
-        const providersLiteral = (0, ast_utils_1.findNodes)(configSourceFile, typescript_1.default.isPropertyAssignment).find((n) => typescript_1.default.isArrayLiteralExpression(n.initializer) && n.name.getText() === 'providers')?.initializer;
-        if (!providersLiteral) {
-            throw new schematics_1.SchematicsException(`Cannot find the "providers" configuration in "${configFilePath}".`);
-        }
-        // Add route to providers literal.
-        recorder.remove(providersLiteral.getStart(), providersLiteral.getWidth());
-        const updatedProvidersString = [
-            ...providersLiteral.elements.map((element) => '    ' + element.getText()),
-            `    {
-        provide: ROUTES,
-        multi: true,
-        useValue: [{
-          path: '${APP_SHELL_ROUTE}',
-          component: AppShellComponent
-        }]
-      }\n  `,
-        ];
-        recorder.insertRight(providersLiteral.getStart(), `[\n${updatedProvidersString.join(',\n')}]`);
-        (0, change_1.applyToUpdateRecorder)(recorder, [
-            (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'AppShellComponent', './app-shell/app-shell.component'),
-        ]);
-        host.commitUpdate(recorder);
-    };
-}
 function addServerRoutingConfig(options, isStandalone) {
     return async (host) => {
         const workspace = await (0, workspace_1.getWorkspace)(host);
@@ -241,15 +136,15 @@ function addServerRoutingConfig(options, isStandalone) {
         const configSourceFile = getSourceFile(host, configFilePath);
         const functionCall = (0, ast_utils_1.findNodes)(configSourceFile, typescript_1.default.isCallExpression, 
         /** max */ undefined, 
-        /** recursive */ true).find((n) => typescript_1.default.isIdentifier(n.expression) && n.expression.getText() === 'provideServerRouting');
+        /** recursive */ true).find((n) => typescript_1.default.isIdentifier(n.expression) && n.expression.getText() === 'provideServerRendering');
         if (!functionCall) {
-            throw new schematics_1.SchematicsException(`Cannot find the "provideServerRouting" function call in "${configFilePath}".`);
+            throw new schematics_1.SchematicsException(`Cannot find the "provideServerRendering" function call in "${configFilePath}".`);
         }
         recorder = host.beginUpdate(configFilePath);
-        recorder.insertLeft(functionCall.end - 1, `, withAppShell(AppShellComponent)`);
+        recorder.insertLeft(functionCall.end - 1, `, withAppShell(AppShell)`);
         (0, change_1.applyToUpdateRecorder)(recorder, [
             (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'withAppShell', '@angular/ssr'),
-            (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'AppShellComponent', './app-shell/app-shell.component'),
+            (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'AppShell', './app-shell/app-shell'),
         ]);
         host.commitUpdate(recorder);
     };
@@ -258,17 +153,15 @@ function default_1(options) {
     return async (tree) => {
         const browserEntryPoint = await (0, util_1.getMainFilePath)(tree, options.project);
         const isStandalone = (0, ng_ast_utils_1.isStandaloneApp)(tree, browserEntryPoint);
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const project = workspace.projects.get(options.project);
+        if (!project) {
+            throw (0, project_targets_1.targetBuildNotFoundError)();
+        }
         return (0, schematics_1.chain)([
             validateProject(browserEntryPoint),
             (0, schematics_1.schematic)('server', options),
-            ...(options.serverRouting
-                ? [(0, schematics_1.noop)()]
-                : isStandalone
-                    ? [addStandaloneServerRoute(options)]
-                    : [addServerRoutes(options)]),
-            options.serverRouting
-                ? addServerRoutingConfig(options, isStandalone)
-                : addAppShellConfigToWorkspace(options),
+            addServerRoutingConfig(options, isStandalone),
             (0, schematics_1.schematic)('component', {
                 name: 'app-shell',
                 module: 'app.module.server.ts',

package/app-shell/schema.d.ts

@@ -6,9 +6,4 @@ export type Schema = {
      * The name of the project where the app-shell should be generated.
      */
     project: string;
-    /**
-     * Set up a server application using the Server Routing and App Engine APIs (Developer
-     * Preview).
-     */
-    serverRouting?: boolean;
 };

package/app-shell/schema.json

@@ -12,11 +12,6 @@
       "$default": {
         "$source": "projectName"
       }
-    },
-    "serverRouting": {
-      "description": "Set up a server application using the Server Routing and App Engine APIs (Developer Preview).",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": ["project"]

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

@@ -2,17 +2,17 @@ import { NgModule<% if(experimentalZoneless) { %>, provideExperimentalZonelessCh
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing.module';<% } %>
-import { AppComponent } from './app.component';
+import { App } from './app';
 
 @NgModule({
   declarations: [
-    AppComponent
+    App
   ],
   imports: [
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
   ],
   providers: [<% if (experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } %>],
-  bootstrap: [AppComponent]
+  bootstrap: [App]
 })
 export class AppModule { }

package/application/files/module-files/src/app/{app.component.spec.ts.template → app.spec.ts.template}

@@ -1,35 +1,35 @@
 <% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';<% if (routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
-import { AppComponent } from './app.component';
+import { App } from './app';
 
-describe('AppComponent', () => {
+describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({<% if (routing) { %>
       imports: [
         RouterModule.forRoot([])
       ],<% } %>
       declarations: [
-        AppComponent
+        App
       ],<% if(experimentalZoneless) { %>
       providers: [provideExperimentalZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title '<%= name %>'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('<%= name %>');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');

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

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

package/application/files/module-files/src/main.ts.template

@@ -1,8 +1,8 @@
 <% if(!!viewEncapsulation) { %>import { ViewEncapsulation } from '@angular/core';
-<% }%>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+<% }%>import { platformBrowser } from '@angular/platform-browser';
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule, {
+platformBrowser().bootstrapModule(AppModule, {
   <% if(!experimentalZoneless) { %>ngZoneEventCoalescing: true,<% } %><% if(!!viewEncapsulation) { %>
   defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
 })

package/application/files/standalone-files/src/app/{app.component.spec.ts.template → app.spec.ts.template}

@@ -1,29 +1,29 @@
 <% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { App } from './app';
 
-describe('AppComponent', () => {
+describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],<% if(experimentalZoneless) { %>
+      imports: [App],<% if(experimentalZoneless) { %>
       providers: [provideExperimentalZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have the '<%= name %>' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('<%= name %>');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');

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

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

package/application/files/standalone-files/src/main.ts.template

@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { App } from './app/app';
 
-bootstrapApplication(AppComponent, appConfig)
+bootstrapApplication(App, appConfig)
   .catch((err) => console.error(err));

package/application/index.js

@@ -78,7 +78,6 @@ function default_1(options) {
             options.ssr
                 ? (0, schematics_1.schematic)('ssr', {
                     project: options.name,
-                    serverRouting: options.serverRouting,
                     skipInstall: true,
                 })
                 : (0, schematics_1.noop)(),

package/application/schema.d.ts

@@ -47,11 +47,6 @@ export type Schema = {
      * and modules for managing navigation between different views in your application.
      */
     routing?: boolean;
-    /**
-     * Set up a server application using the Server Routing and App Engine APIs (Developer
-     * Preview).
-     */
-    serverRouting?: boolean;
     /**
      * Skip the automatic installation of packages. You will need to manually install the
      * dependencies later.

package/application/schema.json

@@ -118,10 +118,6 @@
       "default": false,
       "x-user-analytics": "ep.ng_ssr"
     },
-    "serverRouting": {
-      "description": "Set up a server application using the Server Routing and App Engine APIs (Developer Preview).",
-      "type": "boolean"
-    },
     "experimentalZoneless": {
       "description": "Generate an application that does not use `zone.js`.",
       "type": "boolean",

package/component/index.js

@@ -36,6 +36,8 @@ function default_1(options) {
             options.path = (0, workspace_1.buildDefaultPath)(project);
         }
         options.module = (0, find_module_1.findModuleFromOptions)(host, options);
+        // Schematic templates require a defined type value
+        options.type ??= '';
         const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
         options.name = parsedPath.name;
         options.path = parsedPath.path;

package/component/schema.json

@@ -93,8 +93,7 @@
     },
     "type": {
       "type": "string",
-      "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`.",
-      "default": "Component"
+      "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`."
     },
     "skipTests": {
       "type": "boolean",

package/directive/files/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -0,0 +1,8 @@
+import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
+
+describe('<%= classify(name) %><%= classify(type) %>', () => {
+  it('should create an instance', () => {
+    const directive = new <%= classify(name) %><%= classify(type) %>();
+    expect(directive).toBeTruthy();
+  });
+});

package/directive/files/{__name@dasherize@if-flat__/__name@dasherize__.directive.ts.template → __name@dasherize__.__type@dasherize__.ts.template}

@@ -4,7 +4,7 @@ import { Directive } from '@angular/core';
   selector: '[<%= selector %>]'<% if(!standalone) {%>,
   standalone: false<%}%>
 })
-export class <%= classify(name) %>Directive {
+export class <%= classify(name) %><%= classify(type) %> {
 
   constructor() { }
 

package/directive/index.js

@@ -11,6 +11,7 @@ exports.default = default_1;
 const schematics_1 = require("@angular-devkit/schematics");
 const add_declaration_to_ng_module_1 = require("../utility/add-declaration-to-ng-module");
 const find_module_1 = require("../utility/find-module");
+const generate_from_files_1 = require("../utility/generate-from-files");
 const parse_name_1 = require("../utility/parse-name");
 const validation_1 = require("../utility/validation");
 const workspace_1 = require("../utility/workspace");
@@ -35,27 +36,20 @@ function default_1(options) {
             options.path = (0, workspace_1.buildDefaultPath)(project);
         }
         options.module = (0, find_module_1.findModuleFromOptions)(host, options);
+        // Schematic templates require a defined type value
+        options.type ??= '';
         const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
         options.name = parsedPath.name;
         options.path = parsedPath.path;
         options.selector = options.selector || buildSelector(options, project.prefix || '');
         (0, validation_1.validateHtmlSelector)(options.selector);
         (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
-        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
-            options.skipTests ? (0, schematics_1.filter)((path) => !path.endsWith('.spec.ts.template')) : (0, schematics_1.noop)(),
-            (0, schematics_1.applyTemplates)({
-                ...schematics_1.strings,
-                'if-flat': (s) => (options.flat ? '' : s),
-                ...options,
-            }),
-            (0, schematics_1.move)(parsedPath.path),
-        ]);
         return (0, schematics_1.chain)([
             (0, add_declaration_to_ng_module_1.addDeclarationToNgModule)({
                 type: 'directive',
                 ...options,
             }),
-            (0, schematics_1.mergeWith)(templateSource),
+            (0, generate_from_files_1.generateFromFiles)(options),
         ]);
     };
 }

package/directive/schema.d.ts

@@ -59,4 +59,9 @@ export type Schema = {
      * other standalone components or directives.
      */
     standalone?: boolean;
+    /**
+     * Append a custom type to the directive's filename. For example, if you set the type to
+     * `directive`, the file will be named `example.directive.ts`.
+     */
+    type?: string;
 };

package/directive/schema.json

@@ -80,6 +80,10 @@
       "type": "boolean",
       "default": false,
       "description": "Automatically export the directive from the specified NgModule, making it accessible to other modules in the application."
+    },
+    "type": {
+      "type": "string",
+      "description": "Append a custom type to the directive's filename. For example, if you set the type to `directive`, the file will be named `example.directive.ts`."
     }
   },
   "required": ["name", "project"]

package/library/files/src/__entryFile__.ts.template

@@ -2,6 +2,5 @@
  * Public API Surface of <%= dasherize(name) %>
  */
 
-export * from './lib/<%= dasherize(name) %>.service';
-export * from './lib/<%= dasherize(name) %>.component';<% if (!standalone) { %>
+export * from './lib/<%= dasherize(name) %>';<% if (!standalone) { %>
 export * from './lib/<%= dasherize(name) %>.module';<% } %>

package/library/index.js

@@ -155,12 +155,6 @@ function default_1(options) {
                 standalone: options.standalone,
                 project: packageName,
             }),
-            (0, schematics_1.schematic)('service', {
-                name: options.name,
-                flat: true,
-                path: sourceDir,
-                project: packageName,
-            }),
             (_tree, context) => {
                 if (!options.skipPackageJson && !options.skipInstall) {
                     context.addTask(new tasks_1.NodePackageInstallTask());

package/migrations/migration-collection.json

@@ -1,5 +1,15 @@
 {
   "schematics": {
+    "replace-provide-server-rendering-import": {
+      "version": "20.0.0",
+      "factory": "./replace-provide-server-rendering-import/migration",
+      "description": "Migrate imports of 'provideServerRendering' from '@angular/platform-server' to '@angular/ssr'."
+    },
+    "replace-provide-server-routing": {
+      "version": "20.0.0",
+      "factory": "./replace-provide-server-routing/migration",
+      "description": "Migrate 'provideServerRendering' to use 'withRoutes' and remove 'provideServerRouting' from '@angular/ssr'."
+    },
     "use-application-builder": {
       "version": "20.0.0",
       "factory": "./use-application-builder/migration",

package/migrations/replace-provide-server-rendering-import/migration.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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';
+export default function (): Rule;