- - -
- - - Rocket Ship - - - - - +
+
+
+ - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- - - - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
-
ng generate component xyz
-
ng add @angular/material
-
ng add @angular/pwa
-
ng add _____
-
ng test
-
ng build
-
- - -
- - - Meetup Logo - - - - - - - Discord Logo - - + + + + + + + + + + + + + + - +

Hello, {{ title }}

+

Congratulations! Your app is running. 🎉

+
+ +
- - - - - - Gray Clouds Background - - - -
+ diff --git a/packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template index 8eda79d528db..eef727c672ca 100644 --- a/packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template +++ b/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 %>'); }); }); diff --git a/packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template index 8407fe8a6d1c..dc9b64eb10d2 100644 --- a/packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template +++ b/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: ` - -
-

- Welcome to {{title}}! -

- {{ title }} app is running! - Angular Logo -
-

Here are some links to help you start:

- +

Welcome to {{title}}!

+ <% if (routing) { %><% } %> diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template index c1749005eccb..fad53115332e 100644 --- a/packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template +++ b/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 %>'); }); }); diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template index c553fcab5232..f79a487e093a 100644 --- a/packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template +++ b/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: ` - -
-

- Welcome to {{title}}! -

- {{ title }} app is running! - Angular Logo -
-

Here are some links to help you start:

- +

Welcome to {{title}}!

+ <% if (routing) { %><% } %> diff --git a/packages/schematics/angular/e2e/files/src/app.e2e-spec.ts.template b/packages/schematics/angular/e2e/files/src/app.e2e-spec.ts.template index a6cfbf93e2f1..fdbe66b2ab46 100644 --- a/packages/schematics/angular/e2e/files/src/app.e2e-spec.ts.template +++ b/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 () => { diff --git a/packages/schematics/angular/e2e/files/src/app.po.ts.template b/packages/schematics/angular/e2e/files/src/app.po.ts.template index 16143fc955d4..602087cca38f 100644 --- a/packages/schematics/angular/e2e/files/src/app.po.ts.template +++ b/packages/schematics/angular/e2e/files/src/app.po.ts.template @@ -6,6 +6,6 @@ export class AppPage { } async getTitleText(): Promise { - return element(by.css('<%= rootSelector %> .content span')).getText(); + return element(by.css('h1')).getText(); } } diff --git a/packages/schematics/angular/e2e/index_spec.ts b/packages/schematics/angular/e2e/index_spec.ts index 370175e5ab9d..cf3d7dd194ea 100644 --- a/packages/schematics/angular/e2e/index_spec.ts +++ b/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); diff --git a/tests/legacy-cli/e2e/tests/basic/standalone.ts b/tests/legacy-cli/e2e/tests/basic/standalone.ts index 204d0572f87f..730c10eacb0f 100644 --- a/tests/legacy-cli/e2e/tests/basic/standalone.ts +++ b/tests/legacy-cli/e2e/tests/basic/standalone.ts @@ -30,7 +30,7 @@ import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/ template: \`
- {{name}} app is running! +

Hello, {{name}}

\`, diff --git a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-csp-nonce.ts b/tests/legacy-cli/e2e/tests/build/ssr/express-engine-csp-nonce.ts index b84a2af49f05..df39f2061733 100644 --- a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-csp-nonce.ts +++ b/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( diff --git a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-ngmodule.ts b/tests/legacy-cli/e2e/tests/build/ssr/express-engine-ngmodule.ts index f07f3697c977..351e9da64685 100644 --- a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-ngmodule.ts +++ b/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(); diff --git a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-standalone.ts b/tests/legacy-cli/e2e/tests/build/ssr/express-engine-standalone.ts index 2bdcafa3e34f..00de9ff1f2bd 100644 --- a/tests/legacy-cli/e2e/tests/build/ssr/express-engine-standalone.ts +++ b/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(); diff --git a/tests/legacy-cli/e2e/tests/update/update.ts b/tests/legacy-cli/e2e/tests/update/update.ts index 54530ad26204..0faf31316f18 100644 --- a/tests/legacy-cli/e2e/tests/update/update.ts +++ b/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');