feat(@schematics/angular): update ng new generated application

packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template

@@ -30,6 +30,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('<%= name %> app is running!');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');
   });
 });

packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template

@@ -3,26 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center" class="content">
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <span style="display: block">{{ title }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <ul>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
+    <h1>Welcome to {{title}}!</h1>
+
     <% if (routing) {
      %><router-outlet></router-outlet><%
     } %>

packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template

@@ -24,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('<%= name %> app is running!');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');
   });
 });

packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template

@@ -7,26 +7,8 @@ import { RouterOutlet } from '@angular/router';<% } %>
   standalone: true,
   imports: [CommonModule<% if(routing) { %>, RouterOutlet<% } %>],<% if(inlineTemplate) { %>
   template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center" class="content">
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <span style="display: block">{{ title }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <ul>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
+    <h1>Welcome to {{title}}!</h1>
+
     <% if (routing) {
      %><router-outlet></router-outlet><%
     } %>

packages/schematics/angular/e2e/files/src/app.e2e-spec.ts.template

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', async () => {
     await page.navigateTo();
-    expect(await page.getTitleText()).toEqual('<%= relatedAppName %> app is running!');
+    expect(await page.getTitleText()).toEqual('Hello, <%= relatedAppName %>');
   });
 
   afterEach(async () => {

packages/schematics/angular/e2e/files/src/app.po.ts.template

@@ -6,6 +6,6 @@ export class AppPage {
   }
 
   async getTitleText(): Promise<string> {
-    return element(by.css('<%= rootSelector %> .content span')).getText();
+    return element(by.css('h1')).getText();
   }
 }

packages/schematics/angular/e2e/index_spec.ts

@@ -62,29 +62,6 @@ describe('Application Schematic', () => {
     );
   });
 
-  it('should set the rootSelector in the app.po.ts', async () => {
-    const tree = await schematicRunner.runSchematic('e2e', defaultOptions, applicationTree);
-
-    const content = tree.readContent('/projects/foo/e2e/src/app.po.ts');
-    expect(content).toMatch(/app-root/);
-  });
-
-  it('should set the rootSelector in the app.po.ts from the option', async () => {
-    const options = { ...defaultOptions, rootSelector: 't-a-c-o' };
-    const tree = await schematicRunner.runSchematic('e2e', options, applicationTree);
-
-    const content = tree.readContent('/projects/foo/e2e/src/app.po.ts');
-    expect(content).toMatch(/t-a-c-o/);
-  });
-
-  it('should set the rootSelector in the app.po.ts from the option with emoji', async () => {
-    const options = { ...defaultOptions, rootSelector: '🌮-🌯' };
-    const tree = await schematicRunner.runSchematic('e2e', options, applicationTree);
-
-    const content = tree.readContent('/projects/foo/e2e/src/app.po.ts');
-    expect(content).toMatch(/🌮-🌯/);
-  });
-
   describe('workspace config', () => {
     it('should add e2e targets for the app', async () => {
       const tree = await schematicRunner.runSchematic('e2e', defaultOptions, applicationTree);

tests/legacy-cli/e2e/tests/basic/standalone.ts

@@ -30,7 +30,7 @@ import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/
   template: \`
     <ng-template [ngIf]="isVisible">
       <div class="content">
-        <span>{{name}} app is running!</span>
+        <h1>Hello, {{name}}</h1>
       </div>
     </ng-template>
   \`,

tests/legacy-cli/e2e/tests/build/ssr/express-engine-csp-nonce.ts

@@ -82,13 +82,13 @@ export default async function () {
           ).not.toBeNull();
 
           // Test the contents from the server.
-          expect(await element(by.css('div')).getText()).toMatch('Welcome');
+          expect(await element(by.css('h1')).getText()).toMatch('Hello');
 
           // Bootstrap the client side app.
           await browser.executeScript('doBootstrap()');
 
           // Retest the contents after the client bootstraps.
-          expect(await element(by.css('div')).getText()).toMatch('Welcome');
+          expect(await element(by.css('h1')).getText()).toMatch('Hello');
 
           // Make sure the server styles got replaced by client side ones.
           expect(

tests/legacy-cli/e2e/tests/build/ssr/express-engine-ngmodule.ts

@@ -104,14 +104,14 @@ export default async function () {
           expect(await style.getText()).not.toBeNull();
 
           // Test the contents from the server.
-          const serverDiv = await browser.driver.findElement(by.css('div'));
-          expect(await serverDiv.getText()).toMatch('Welcome');
+          const serverDiv = await browser.driver.findElement(by.css('h1'));
+          expect(await serverDiv.getText()).toMatch('Hello');
 
           // Bootstrap the client side app.
           await browser.executeScript('doBootstrap()');
 
           // Retest the contents after the client bootstraps.
-          expect(await element(by.css('div')).getText()).toMatch('Welcome');
+          expect(await element(by.css('h1')).getText()).toMatch('Hello');
 
           // Make sure the server styles got replaced by client side ones.
           expect(await element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeFalsy();

tests/legacy-cli/e2e/tests/build/ssr/express-engine-standalone.ts

@@ -69,14 +69,14 @@ export default async function () {
           expect(await style.getText()).not.toBeNull();
 
           // Test the contents from the server.
-          const serverDiv = await browser.driver.findElement(by.css('div'));
-          expect(await serverDiv.getText()).toMatch('Welcome');
+          const serverDiv = await browser.driver.findElement(by.css('h1'));
+          expect(await serverDiv.getText()).toMatch('Hello');
 
           // Bootstrap the client side app.
           await browser.executeScript('doBootstrap()');
 
           // Retest the contents after the client bootstraps.
-          expect(await element(by.css('div')).getText()).toMatch('Welcome');
+          expect(await element(by.css('h1')).getText()).toMatch('Hello');
 
           // Make sure the server styles got replaced by client side ones.
           expect(await element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeFalsy();

tests/legacy-cli/e2e/tests/update/update.ts

@@ -56,6 +56,9 @@ export default async function () {
   // Update Angular current build
   const extraUpdateArgs = isPrereleaseCli() ? ['--next', '--force'] : [];
 
+  // Generate e2e test prior to `ng update` as the asserted content changed in v17.
+  await ng('generate', 'e2e', '--related-app-name=fourteen-project');
+
   // For the latest/next release we purposely don't run `ng update @angular/core`.
 
   // During a major release when the branch version is bumped from `12.0.0-rc.x` to `12.0.0` there would be a period were in
@@ -72,7 +75,6 @@ export default async function () {
   await ng('update', '@angular/cli', ...extraUpdateArgs);
 
   // Setup testing to use CI Chrome.
-  await ng('generate', 'e2e', '--related-app-name=fourteen-project');
   await useCIChrome('fourteen-project', './');
   await useCIChrome('fourteen-project', './e2e/');
   await useCIDefaults('fourteen-project');