@schematics/angular 19.0.0-next.8 → 19.0.0-rc.0

package/server/files/application-builder/standalone-src/app/app.config.server.ts.template

@@ -0,0 +1,14 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';<% if(serverRouting) { %>
+import { provideServerRoutesConfig } from '@angular/ssr';<% } %>
+import { appConfig } from './app.config';<% if(serverRouting) { %>
+import { serverRoutes } from './app.routes.server';<% } %>
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),<% if(serverRouting) { %>
+    provideServerRoutesConfig(serverRoutes)<% } %>
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/server/files/application-builder/standalone-src/app/app.routes.server.ts.template

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

package/server/files/server-builder/ngmodule-src/main.server.ts.template

@@ -0,0 +1 @@
+export { AppServerModule as default } from './app/app.module.server';

package/server/files/server-builder/standalone-src/main.server.ts.template

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

package/server/index.js

@@ -83,11 +83,14 @@ function updateConfigFileApplicationBuilder(options) {
             return;
         }
         const buildTarget = project.targets.get('build');
-        if (buildTarget?.builder !== workspace_models_1.Builders.Application) {
-            throw new schematics_1.SchematicsException(`This schematic requires "${workspace_models_1.Builders.Application}" to be used as a build builder.`);
+        if (!buildTarget) {
+            return;
         }
         buildTarget.options ??= {};
         buildTarget.options['server'] = node_path_1.posix.join(project.sourceRoot ?? node_path_1.posix.join(project.root, 'src'), serverMainEntryName);
+        if (options.serverRouting) {
+            buildTarget.options['outputMode'] = 'static';
+        }
     });
 }
 function updateTsConfigFile(tsConfigPath) {
@@ -137,7 +140,8 @@ function default_1(options) {
         if (!clientBuildTarget) {
             throw (0, project_targets_1.targetBuildNotFoundError)();
         }
-        const isUsingApplicationBuilder = clientBuildTarget.builder === workspace_models_1.Builders.Application;
+        const isUsingApplicationBuilder = clientBuildTarget.builder === workspace_models_1.Builders.Application ||
+            clientBuildTarget.builder === workspace_models_1.Builders.BuildApplication;
         if (clientProject.targets.has('server') ||
             (isUsingApplicationBuilder && clientBuildTarget.options?.server !== undefined)) {
             // Server has already been added.
@@ -146,12 +150,18 @@ function default_1(options) {
         const clientBuildOptions = clientBuildTarget.options;
         const browserEntryPoint = await (0, util_1.getMainFilePath)(host, options.project);
         const isStandalone = (0, ng_ast_utils_1.isStandaloneApp)(host, browserEntryPoint);
-        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)(isStandalone ? './files/standalone-src' : './files/src'), [
+        const sourceRoot = clientProject.sourceRoot ?? (0, core_1.join)((0, core_1.normalize)(clientProject.root), 'src');
+        let filesUrl = `./files/${isUsingApplicationBuilder ? 'application-builder/' : 'server-builder/'}`;
+        filesUrl += isStandalone ? 'standalone-src' : 'ngmodule-src';
+        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)(filesUrl), [
+            options.serverRouting
+                ? (0, schematics_1.noop)()
+                : (0, schematics_1.filter)((path) => !path.endsWith('app.routes.server.ts.template')),
             (0, schematics_1.applyTemplates)({
                 ...schematics_1.strings,
                 ...options,
             }),
-            (0, schematics_1.move)((0, core_1.join)((0, core_1.normalize)(clientProject.root), 'src')),
+            (0, schematics_1.move)(sourceRoot),
         ]);
         const clientTsConfig = (0, core_1.normalize)(clientBuildOptions.tsConfig);
         const tsConfigExtends = (0, core_1.basename)(clientTsConfig);
@@ -164,7 +174,7 @@ function default_1(options) {
                     updateTsConfigFile(clientBuildOptions.tsConfig),
                 ]
                 : [
-                    (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)('./files/root'), [
+                    (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)('./files/server-builder/root'), [
                         (0, schematics_1.applyTemplates)({
                             ...schematics_1.strings,
                             ...options,

package/server/schema.d.ts

@@ -6,6 +6,11 @@ export interface Schema {
      * The name of the project.
      */
     project: string;
+    /**
+     * Creates a server application using the Server Routing and App Engine APIs (Developer
+     * Preview).
+     */
+    serverRouting?: boolean;
     /**
      * Do not install packages for dependencies.
      */

package/server/schema.json

@@ -17,6 +17,10 @@
       "description": "Do not install packages for dependencies.",
       "type": "boolean",
       "default": false
+    },
+    "serverRouting": {
+      "description": "Creates a server application using the Server Routing and App Engine APIs (Developer Preview).",
+      "type": "boolean"
     }
   },
   "required": ["project"]

package/service-worker/files/ngsw-config.json.template

@@ -8,6 +8,7 @@
       "resources": {
         "files": [
           "/favicon.ico",
+          "/index.csr.html",
           "/index.html",
           "/manifest.webmanifest",
           "/*.css",

package/ssr/files/application-builder/server.ts.template

@@ -1,57 +1,72 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr/node';
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
 import express from 'express';
+import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import <% if (isStandalone) { %>bootstrap<% } else { %>AppServerModule<% } %> from './src/main.server';
 
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../<%= browserDistDirectory %>');
-  const indexHtml = join(serverDistFolder, 'index.server.html');
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../<%= browserDistDirectory %>');
 
-  const commonEngine = new CommonEngine();
+const app = express();
+const angularApp = new AngularNodeAppEngine();
 
-  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
 
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /<%= browserDistDirectory %>
-  server.get('**', express.static(browserDistFolder, {
+/**
+ * Serve static files from /<%= browserDistDirectory %>
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
     maxAge: '1y',
     index: 'index.html',
-  }));
+    setHeaders: (res) => {
+      const headers = angularApp.getPrerenderHeaders(res.req);
+      for (const [key, value] of headers) {
+        res.setHeader(key, value);
+      }
+    },
+  }),
+);
 
-  // All regular routes use the Angular engine
-  server.get('**', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  angularApp
+    .render(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
 
-    commonEngine
-      .render({
-        <% if (isStandalone) { %>bootstrap<% } else { %>bootstrap: AppServerModule<% } %>,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: browserDistFolder,
-        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err));
-  });
-
-  return server;
-}
-
-function run(): void {
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
   const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
+  app.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });
 }
 
-run();
+/**
+ * The request handler used by the Angular CLI (dev-server and during build).
+ */
+export const reqHandler = createNodeRequestHandler(app);

package/ssr/files/application-builder-common-engine/server.ts.template

@@ -0,0 +1,65 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import <% if (isStandalone) { %>bootstrap<% } else { %>AppServerModule<% } %> from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../<%= browserDistDirectory %>');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /<%= browserDistDirectory %>
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      <% if (isStandalone) { %>bootstrap<% } else { %>bootstrap: AppServerModule<% } %>,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

package/ssr/files/server-builder/server.ts.template

@@ -5,7 +5,7 @@ import { CommonEngine } from '@angular/ssr/node';
 import * as express from 'express';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
-import <% if (isStandalone) { %>bootstrap<% } else { %>AppServerModule<% } %> from './src/main.server';
+import <% if (isStandalone) { %>bootstrap<% } else { %>AppServerModule<% } %> from './main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {

package/ssr/index.js

@@ -108,15 +108,14 @@ function updateApplicationBuilderTsConfigRule(options) {
             // No tsconfig path
             return;
         }
-        const tsConfig = new json_file_1.JSONFile(host, tsConfigPath);
-        const filesAstNode = tsConfig.get(['files']);
-        const serverFilePath = 'server.ts';
-        if (Array.isArray(filesAstNode) && !filesAstNode.some(({ text }) => text === serverFilePath)) {
-            tsConfig.modify(['files'], [...filesAstNode, serverFilePath]);
-        }
+        const json = new json_file_1.JSONFile(host, tsConfigPath);
+        const filesPath = ['files'];
+        const files = new Set(json.get(filesPath) ?? []);
+        files.add('src/server.ts');
+        json.modify(filesPath, [...files]);
     };
 }
-function updateApplicationBuilderWorkspaceConfigRule(projectRoot, options, { logger }) {
+function updateApplicationBuilderWorkspaceConfigRule(projectSourceRoot, options, { logger }) {
     return (0, utility_1.updateWorkspace)((workspace) => {
         const buildTarget = workspace.projects.get(options.project)?.targets.get('build');
         if (!buildTarget) {
@@ -140,14 +139,15 @@ function updateApplicationBuilderWorkspaceConfigRule(projectRoot, options, { log
         buildTarget.options = {
             ...buildTarget.options,
             outputPath,
-            prerender: true,
+            outputMode: options.serverRouting ? 'server' : undefined,
+            prerender: options.serverRouting ? undefined : true,
             ssr: {
-                entry: (0, core_1.join)((0, core_1.normalize)(projectRoot), 'server.ts'),
+                entry: (0, core_1.join)((0, core_1.normalize)(projectSourceRoot), 'server.ts'),
             },
         };
     });
 }
-function updateWebpackBuilderWorkspaceConfigRule(options) {
+function updateWebpackBuilderWorkspaceConfigRule(projectSourceRoot, options) {
     return (0, utility_1.updateWorkspace)((workspace) => {
         const projectName = options.project;
         const project = workspace.projects.get(projectName);
@@ -156,7 +156,7 @@ function updateWebpackBuilderWorkspaceConfigRule(options) {
         }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const serverTarget = project.targets.get('server');
-        (serverTarget.options ??= {}).main = (0, core_1.join)((0, core_1.normalize)(project.root), 'server.ts');
+        (serverTarget.options ??= {}).main = node_path_1.posix.join(projectSourceRoot, 'server.ts');
         const serveSSRTarget = project.targets.get(SERVE_SSR_TARGET_NAME);
         if (serveSSRTarget) {
             return;
@@ -216,7 +216,7 @@ function updateWebpackBuilderServerTsConfigRule(options) {
         }
         const tsConfig = new json_file_1.JSONFile(host, tsConfigPath);
         const filesAstNode = tsConfig.get(['files']);
-        const serverFilePath = 'server.ts';
+        const serverFilePath = 'src/server.ts';
         if (Array.isArray(filesAstNode) && !filesAstNode.some(({ text }) => text === serverFilePath)) {
             tsConfig.modify(['files'], [...filesAstNode, serverFilePath]);
         }
@@ -242,7 +242,7 @@ function addDependencies({ skipInstall }, isUsingApplicationBuilder) {
     }
     return (0, schematics_1.chain)(rules);
 }
-function addServerFile(options, isStandalone) {
+function addServerFile(projectSourceRoot, options, isStandalone) {
     return async (host) => {
         const projectName = options.project;
         const workspace = await (0, utility_1.readWorkspace)(host);
@@ -254,14 +254,15 @@ function addServerFile(options, isStandalone) {
         const browserDistDirectory = isUsingApplicationBuilder
             ? (await getApplicationBuilderOutputPaths(host, projectName)).browser
             : await getLegacyOutputPaths(host, projectName, 'build');
-        return (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)(`./files/${isUsingApplicationBuilder ? 'application-builder' : 'server-builder'}`), [
+        const applicationBuilderFiles = 'application-builder' + (options.serverRouting ? '' : '-common-engine');
+        return (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)(`./files/${isUsingApplicationBuilder ? applicationBuilderFiles : 'server-builder'}`), [
             (0, schematics_1.applyTemplates)({
                 ...core_1.strings,
                 ...options,
                 browserDistDirectory,
                 isStandalone,
             }),
-            (0, schematics_1.move)(project.root),
+            (0, schematics_1.move)(projectSourceRoot),
         ]));
     };
 }
@@ -275,6 +276,7 @@ function default_1(options) {
             throw (0, project_targets_1.targetBuildNotFoundError)();
         }
         const isUsingApplicationBuilder = usingApplicationBuilder(clientProject);
+        const sourceRoot = clientProject.sourceRoot ?? node_path_1.posix.join(clientProject.root, 'src');
         return (0, schematics_1.chain)([
             (0, schematics_1.schematic)('server', {
                 ...options,
@@ -282,14 +284,14 @@ function default_1(options) {
             }),
             ...(isUsingApplicationBuilder
                 ? [
-                    updateApplicationBuilderWorkspaceConfigRule(clientProject.root, options, context),
+                    updateApplicationBuilderWorkspaceConfigRule(sourceRoot, options, context),
                     updateApplicationBuilderTsConfigRule(options),
                 ]
                 : [
                     updateWebpackBuilderServerTsConfigRule(options),
-                    updateWebpackBuilderWorkspaceConfigRule(options),
+                    updateWebpackBuilderWorkspaceConfigRule(sourceRoot, options),
                 ]),
-            addServerFile(options, isStandalone),
+            addServerFile(sourceRoot, options, isStandalone),
             addScriptsRule(options, isUsingApplicationBuilder),
             addDependencies(options, isUsingApplicationBuilder),
         ]);

package/ssr/schema.d.ts

@@ -3,6 +3,11 @@ export interface Schema {
      * The name of the project.
      */
     project: string;
+    /**
+     * Creates a server application using the Server Routing and App Engine APIs (Developer
+     * Preview).
+     */
+    serverRouting?: boolean;
     /**
      * Skip installing dependency packages.
      */

package/ssr/schema.json

@@ -15,6 +15,12 @@
       "description": "Skip installing dependency packages.",
       "type": "boolean",
       "default": false
+    },
+    "serverRouting": {
+      "description": "Creates a server application using the Server Routing and App Engine APIs (Developer Preview).",
+      "x-prompt": "Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application?",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["project"],

package/utility/latest-versions/package.json

@@ -9,7 +9,7 @@
     "@types/node": "^18.18.0",
     "browser-sync": "^3.0.0",
     "express": "^4.18.2",
-    "jasmine-core": "~5.3.0",
+    "jasmine-core": "~5.4.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

package/utility/latest-versions.js

@@ -15,6 +15,6 @@ exports.latestVersions = {
     ...dependencies,
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
     Angular: dependencies['@angular/core'],
-    DevkitBuildAngular: '^19.0.0-next.8',
-    AngularSSR: '^19.0.0-next.8',
+    DevkitBuildAngular: '^19.0.0-rc.0',
+    AngularSSR: '^19.0.0-rc.0',
 };

package/utility/workspace-models.d.ts

@@ -28,7 +28,7 @@ export declare enum Builders {
     NgPackagr = "@angular-devkit/build-angular:ng-packagr",
     DevServer = "@angular-devkit/build-angular:dev-server",
     ExtractI18n = "@angular-devkit/build-angular:extract-i18n",
-    Protractor = "@angular-devkit/build-angular:protractor",
+    Protractor = "@angular-devkit/build-angular:private-protractor",
     BuildApplication = "@angular/build:application"
 }
 export interface FileReplacements {

package/utility/workspace-models.js

@@ -33,6 +33,6 @@ var Builders;
     Builders["NgPackagr"] = "@angular-devkit/build-angular:ng-packagr";
     Builders["DevServer"] = "@angular-devkit/build-angular:dev-server";
     Builders["ExtractI18n"] = "@angular-devkit/build-angular:extract-i18n";
-    Builders["Protractor"] = "@angular-devkit/build-angular:protractor";
+    Builders["Protractor"] = "@angular-devkit/build-angular:private-protractor";
     Builders["BuildApplication"] = "@angular/build:application";
 })(Builders || (exports.Builders = Builders = {}));

package/workspace/files/README.md.template

@@ -1,27 +1,59 @@
 # <%= utils.classify(name) %>
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version <%= version %>.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version <%= version %>.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
 
-## Build
+## Building
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
 
 ## Running unit tests
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-## Further help
+## Additional Resources
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.