Skip to content

fix(@schematics/angular): default component templates to not use .ng.html extension #30052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 8, 2025
Merged

fix(@schematics/angular): default component templates to not use .ng.html extension #30052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93076be
fix(@schematics/angular): default component templates to not use `.ng…
clydin Apr 7, 2025
bd28465
test: update E2E tests to account for the `.html` template extension
clydin Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...common-files/src/app/app.ng.html.template → ...es/common-files/src/app/app.html.template
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/schematics/angular/application/files/module-files/src/app/app.ts.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Component } from '@angular/core';
%><router-outlet /><%
} %>
`,<% } else { %>
templateUrl: './app.ng.html',<% } %>
templateUrl: './app.html',<% } %>
standalone: false,<% if(inlineStyle) { %>
styles: []<% } else { %>
styleUrl: './app.<%= style %>'<% } %>
Expand Down
2 changes: 1 addition & 1 deletion packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { RouterOutlet } from '@angular/router';<% } %>
%><router-outlet /><%
} %>
`,<% } else { %>
templateUrl: './app.ng.html',<% } if(inlineStyle) { %>
templateUrl: './app.html',<% } if(inlineStyle) { %>
styles: [],<% } else { %>
styleUrl: './app.<%= style %>'<% } %>
})
Expand Down
2 changes: 1 addition & 1 deletion packages/schematics/angular/application/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default function (options: ApplicationOptions): Rule {
? filter((path) => !path.endsWith('tsconfig.spec.json.template'))
: noop(),
componentOptions.inlineTemplate
? filter((path) => !path.endsWith('.ng.html.template'))
? filter((path) => !path.endsWith('app.html.template'))
: noop(),
applyTemplates({
utils: strings,
Expand Down
14 changes: 7 additions & 7 deletions packages/schematics/angular/application/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ describe('Application Schematic', () => {
'/projects/foo/src/styles.css',
'/projects/foo/src/app/app.module.ts',
'/projects/foo/src/app/app.css',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.spec.ts',
'/projects/foo/src/app/app.ts',
]),
Expand Down Expand Up @@ -266,7 +266,7 @@ describe('Application Schematic', () => {
'/src/main.ts',
'/src/styles.css',
'/src/app/app.css',
'/src/app/app.ng.html',
'/src/app/app.html',
'/src/app/app.spec.ts',
'/src/app/app.ts',
]),
Expand Down Expand Up @@ -447,7 +447,7 @@ describe('Application Schematic', () => {
[
'/projects/foo/tsconfig.spec.json',
'/projects/foo/src/app/app.css',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.spec.ts',
].forEach((x) => expect(files).not.toContain(x));

Expand All @@ -472,7 +472,7 @@ describe('Application Schematic', () => {
'/projects/foo/tsconfig.spec.json',
'/projects/foo/karma.conf.js',
'/projects/foo/src/test.ts',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.spec.ts',
].forEach((x) => expect(files).not.toContain(x));

Expand Down Expand Up @@ -509,7 +509,7 @@ describe('Application Schematic', () => {
'/projects/foo/src/index.html',
'/projects/foo/src/main.ts',
'/projects/foo/src/styles.css',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.ts',
]),
);
Expand All @@ -531,7 +531,7 @@ describe('Application Schematic', () => {
'/projects/foo/src/styles.css',
'/projects/foo/src/app/app.config.ts',
'/projects/foo/src/app/app.css',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.spec.ts',
'/projects/foo/src/app/app.ts',
]),
Expand Down Expand Up @@ -672,7 +672,7 @@ describe('Application Schematic', () => {
'/projects/foo/src/app/app-routing.module.ts',
'/projects/foo/src/app/app.module.ts',
'/projects/foo/src/app/app.css',
'/projects/foo/src/app/app.ng.html',
'/projects/foo/src/app/app.html',
'/projects/foo/src/app/app.spec.ts',
'/projects/foo/src/app/app.ts',
]),
Expand Down
6 changes: 3 additions & 3 deletions packages/schematics/angular/component/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,13 +310,13 @@ describe('Component Schematic', () => {
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.ng.html');
});

it('should use `.ng.html` extension when ngHtml is not present', async () => {
it('should not use `.ng.html` extension when ngHtml is not present', async () => {
const options = { ...defaultOptions, ngHtml: undefined };
const tree = await schematicRunner.runSchematic('component', options, appTree);
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(content).toContain('foo.component.ng.html');
expect(content).toContain('foo.component.html');
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.css');
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.ng.html');
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.html');
});

it('should create the right selector with a path in the name', async () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/schematics/angular/component/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@
},
"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."
"default": false,
"description": "Generate component template files with an '.ng.html' file extension instead of '.html'."
}
},
"required": ["name", "project"]
Expand Down
6 changes: 3 additions & 3 deletions packages/schematics/angular/module/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ describe('Module Schematic', () => {
'/projects/bar/src/app/foo/foo.module.ts',
'/projects/bar/src/app/foo/foo-routing.module.ts',
'/projects/bar/src/app/foo/foo.ts',
'/projects/bar/src/app/foo/foo.ng.html',
'/projects/bar/src/app/foo/foo.html',
'/projects/bar/src/app/foo/foo.css',
]),
);
Expand Down Expand Up @@ -203,7 +203,7 @@ describe('Module Schematic', () => {
expect(files).toContain('/projects/bar/src/app/foo/foo.module.ts');
expect(files).not.toContain('/projects/bar/src/app/foo/foo-routing.module.ts');
expect(files).toContain('/projects/bar/src/app/foo/foo.ts');
expect(files).toContain('/projects/bar/src/app/foo/foo.ng.html');
expect(files).toContain('/projects/bar/src/app/foo/foo.html');
expect(files).toContain('/projects/bar/src/app/foo/foo.css');

const appModuleContent = tree.readContent('/projects/bar/src/app/app.module.ts');
Expand Down Expand Up @@ -231,7 +231,7 @@ describe('Module Schematic', () => {
'/projects/bar/src/app/foo.module.ts',
'/projects/bar/src/app/foo-routing.module.ts',
'/projects/bar/src/app/foo.ts',
'/projects/bar/src/app/foo.ng.html',
'/projects/bar/src/app/foo.html',
'/projects/bar/src/app/foo.css',
]),
);
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/basic/rebuild.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default async function () {
await Promise.all([
waitForAnyProcessOutputToMatch(validBundleRegEx),
writeMultipleFiles({
'src/app/app.ng.html': '<h1>testingTESTING123</h1>',
'src/app/app.html': '<h1>testingTESTING123</h1>',
}),
]);

Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/build/app-shell/app-shell-with-schematic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { updateJsonFile } from '../../../utils/project';
const snapshots = require('../../../ng-snapshot/package.json');

export default async function () {
await appendToFile('src/app/app.ng.html', '<router-outlet></router-outlet>');
await appendToFile('src/app/app.html', '<router-outlet></router-outlet>');
await ng('generate', 'app-shell', '--project', 'test-project');

const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/build/app-shell/app-shell-with-service-worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { updateJsonFile } from '../../../utils/project';
const snapshots = require('../../../ng-snapshot/package.json');

export default async function () {
await appendToFile('src/app/app.ng.html', '<router-outlet></router-outlet>');
await appendToFile('src/app/app.html', '<router-outlet></router-outlet>');
await ng('generate', 'service-worker', '--project', 'test-project');
await ng('generate', 'app-shell', '--project', 'test-project');

Expand Down
4 changes: 2 additions & 2 deletions tests/legacy-cli/e2e/tests/build/library/setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export async function libraryConsumptionSetup(): Promise<void> {

// Force an external template
await writeMultipleFiles({
'projects/my-lib/src/lib/my-lib.ng.html': `<p>my-lib works!</p>`,
'projects/my-lib/src/lib/my-lib.html': `<p>my-lib works!</p>`,
'projects/my-lib/src/lib/my-lib.ts': `import { Component } from '@angular/core';

@Component({
standalone: true,
selector: 'lib-my-lib',
templateUrl: './my-lib.ng.html',
templateUrl: './my-lib.html',
})
export class MyLibComponent {}`,
'./src/app/app.ts': `
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/build/prerender/error-with-sourcemaps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default async function () {
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.ng.html',
templateUrl: './app.html',
styleUrls: ['./app.css']
})
export class App {
Expand Down
2 changes: 1 addition & 1 deletion ...cli/e2e/tests/build/server-rendering/server-routes-output-mode-server-platform-neutral.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default async function () {

await writeMultipleFiles({
// Replace the template of app.ng.html as it makes it harder to debug
'src/app/app.ng.html': '<router-outlet />',
'src/app/app.html': '<router-outlet />',
'src/app/app.routes.ts': `
import { Routes } from '@angular/router';
import { Home } from './home/home';
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/generate/component/component-basic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function () {
.then(() => expectFileToExist(componentDir))
.then(() => expectFileToExist(join(componentDir, 'test-component.ts')))
.then(() => expectFileToExist(join(componentDir, 'test-component.spec.ts')))
.then(() => expectFileToExist(join(componentDir, 'test-component.ng.html')))
.then(() => expectFileToExist(join(componentDir, 'test-component.html')))
.then(() => expectFileToExist(join(componentDir, 'test-component.css')))

// Try to run the unit tests.
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/generate/component/component-child-dir.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default async function () {
const componentDirectory = join(childDirectory, 'test-component');
await expectFileToExist(join(componentDirectory, 'test-component.ts'));
await expectFileToExist(join(componentDirectory, 'test-component.spec.ts'));
await expectFileToExist(join(componentDirectory, 'test-component.ng.html'));
await expectFileToExist(join(componentDirectory, 'test-component.html'));
await expectFileToExist(join(componentDirectory, 'test-component.css'));

// Ensure unit test execute and pass
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/generate/component/component-flat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function () {
.then(() => expectFileToExist(appDir))
.then(() => expectFileToExist(join(appDir, 'test-component.ts')))
.then(() => expectFileToExist(join(appDir, 'test-component.spec.ts')))
.then(() => expectFileToExist(join(appDir, 'test-component.ng.html')))
.then(() => expectFileToExist(join(appDir, 'test-component.html')))
.then(() => expectFileToExist(join(appDir, 'test-component.css')))

// Try to run the unit tests.
Expand Down
4 changes: 1 addition & 3 deletions tests/legacy-cli/e2e/tests/generate/component/component-inline-template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@ export default function () {
.then(() => expectFileToExist(componentDir))
.then(() => expectFileToExist(join(componentDir, 'test-component.ts')))
.then(() => expectFileToExist(join(componentDir, 'test-component.spec.ts')))
.then(() =>
expectToFail(() => expectFileToExist(join(componentDir, 'test-component.ng.html'))),
)
.then(() => expectToFail(() => expectFileToExist(join(componentDir, 'test-component.html'))))
.then(() => expectFileToExist(join(componentDir, 'test-component.css')))

// Try to run the unit tests.
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/generate/component/component-not-flat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function () {
.then(() => expectFileToExist(componentDir))
.then(() => expectFileToExist(join(componentDir, 'test-component.ts')))
.then(() => expectFileToExist(join(componentDir, 'test-component.spec.ts')))
.then(() => expectFileToExist(join(componentDir, 'test-component.ng.html')))
.then(() => expectFileToExist(join(componentDir, 'test-component.html')))
.then(() => expectFileToExist(join(componentDir, 'test-component.css')))

// Try to run the unit tests.
Expand Down
4 changes: 2 additions & 2 deletions tests/legacy-cli/e2e/tests/generate/component/component-path-case.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default async function () {
// Ensure component is created in the correct location relative to the workspace root
await expectFileToExist(join(componentDirectory, 'test-component.ts'));
await expectFileToExist(join(componentDirectory, 'test-component.spec.ts'));
await expectFileToExist(join(componentDirectory, 'test-component.ng.html'));
await expectFileToExist(join(componentDirectory, 'test-component.html'));
await expectFileToExist(join(componentDirectory, 'test-component.css'));

// Generate another component
Expand All @@ -25,7 +25,7 @@ export default async function () {
// Ensure component is created in the correct location relative to the workspace root
await expectFileToExist(join(componentTwoDirectory, 'test-component-two.ts'));
await expectFileToExist(join(componentTwoDirectory, 'test-component-two.spec.ts'));
await expectFileToExist(join(componentTwoDirectory, 'test-component-two.ng.html'));
await expectFileToExist(join(componentTwoDirectory, 'test-component-two.html'));
await expectFileToExist(join(componentTwoDirectory, 'test-component-two.css'));

// Ensure unit test execute and pass
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/generate/generate-name-check.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function () {
.then(() => expectFileToExist(compDir))
.then(() => expectFileToExist(join(compDir, 'test-component.ts')))
.then(() => expectFileToExist(join(compDir, 'test-component.spec.ts')))
.then(() => expectFileToExist(join(compDir, 'test-component.ng.html')))
.then(() => expectFileToExist(join(compDir, 'test-component.html')))
.then(() => expectFileToExist(join(compDir, 'test-component.css')))

// Try to run the unit tests.
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/i18n/extract-ivy-disk-cache.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default async function () {

// Setup an i18n enabled component
await ng('generate', 'component', 'i18n-test');
await writeFile(join('src/app/i18n-test', 'i18n-test.ng.html'), '<p i18n>Hello world</p>');
await writeFile(join('src/app/i18n-test', 'i18n-test.html'), '<p i18n>Hello world</p>');

await writeFile(
'src/app/app.ts',
Expand Down
4 changes: 2 additions & 2 deletions tests/legacy-cli/e2e/tests/i18n/extract-ivy-libraries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default async function () {
await prependToFile('src/app/app.ts', `import { I18nLibTest } from 'i18n-lib-test';`);

await writeFile(
'src/app/app.ng.html',
'src/app/app.html',
`
<p i18n>Hello world</p>
<lib-i18n-lib-test></lib-i18n-lib-test>
Expand All @@ -35,7 +35,7 @@ export default async function () {
await ng('extract-i18n');
await expectFileToMatch('messages.xlf', 'Hello world');
await expectFileToMatch('messages.xlf', 'i18n-lib-test works!');
await expectFileToMatch('messages.xlf', 'src/app/app.ng.html');
await expectFileToMatch('messages.xlf', 'src/app/app.html');
await expectFileToMatch('messages.xlf', 'projects/i18n-lib-test/src/lib/i18n-lib-test.ts');

await uninstallPackage('@angular/localize');
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { readNgVersion } from '../../utils/version';
export default async function () {
// Setup an i18n enabled component
await ng('generate', 'component', 'i18n-test');
await writeFile(join('src/app/i18n-test', 'i18n-test.ng.html'), '<p i18n>Hello world</p>');
await writeFile(join('src/app/i18n-test', 'i18n-test.html'), '<p i18n>Hello world</p>');
// Actually use the generated component to ensure it is present in the application output
await writeFile(
'src/app/app.ts',
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/tests/i18n/ivy-localize-app-shell-service-worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default async function () {
: readNgVersion();
});

await appendToFile('src/app/app.ng.html', '<router-outlet></router-outlet>');
await appendToFile('src/app/app.html', '<router-outlet></router-outlet>');

// Add app-shell and service-worker
await silentNg('generate', 'app-shell');
Expand Down
8 changes: 4 additions & 4 deletions tests/legacy-cli/e2e/tests/i18n/ivy-localize-app-shell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default async function () {
: readNgVersion();
});

await appendToFile('src/app/app.ng.html', '<router-outlet></router-outlet>');
await appendToFile('src/app/app.html', '<router-outlet></router-outlet>');
await ng('generate', 'app-shell', '--project', 'test-project');

if (isSnapshotBuild) {
Expand Down Expand Up @@ -62,15 +62,15 @@ export default async function () {
});

await writeFile(
'src/app/app-shell/app-shell.ng.html',
'src/app/app-shell/app-shell.html',
'<h1 i18n="An introduction header for this sample">Hello i18n!</h1>',
);

// Add a translatable element
// Extraction of i18n only works on browser targets.
// Let's add the same translation that there is in the app-shell
await writeFile(
'src/app/app.ng.html',
'src/app/app.html',
'<h1 i18n="An introduction header for this sample">Hello i18n!</h1>',
);

Expand All @@ -81,7 +81,7 @@ export default async function () {

// Clean up app.ng.html so that we can easily
// find the translation text
await writeFile('src/app/app.ng.html', '<router-outlet></router-outlet>');
await writeFile('src/app/app.html', '<router-outlet></router-outlet>');

for (const { lang, translation } of langTranslations) {
if (lang != 'en-US') {
Expand Down
Loading