feat(@schematics/angular): enable routing by default for new applications

alan-agius4 · alan-agius4 · commit 1a6a139aaf8d · 2023-09-08T16:00:01.000+02:00
This commits updates the `routing` option in the `ng new` and `ng generation application` schematics to `true` by default and also removed the `Would you like to add Angular routing?` prompt.

BREAKING CHANGE: Routing is enabled by default for new applications when using `ng generate application` and `ng new`. The `--no-routing` command line option can be used to disable this behaviour.
diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -31,7 +31,6 @@ describe('Application Schematic', () => {
 
   const defaultOptions: ApplicationOptions = {
     name: 'foo',
-    routing: false,
     skipPackageJson: false,
   };
 
@@ -566,8 +565,8 @@ describe('Application Schematic', () => {
       expect(component).toMatch(/standalone: true/);
     });
 
-    it('should create routing information when routing is true', async () => {
-      const options = { ...defaultOptions, standalone: true, routing: true };
+    it('should create routing information by default', async () => {
+      const options = { ...defaultOptions, standalone: true };
 
       const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
 
diff --git a/packages/schematics/angular/application/schema.json b/packages/schematics/angular/application/schema.json
@@ -39,9 +39,8 @@
     },
     "routing": {
       "type": "boolean",
-      "description": "Create a routing NgModule.",
-      "default": false,
-      "x-prompt": "Would you like to add Angular routing?",
+      "description": "Creates an application with routing enabled.",
+      "default": true,
       "x-user-analytics": "ep.ng_routing"
     },
     "prefix": {
diff --git a/packages/schematics/angular/ng-new/index_spec.ts b/packages/schematics/angular/ng-new/index_spec.ts
@@ -51,6 +51,7 @@ describe('Ng New Schematic', () => {
       jasmine.arrayContaining([
         '/bar/tsconfig.app.json',
         '/bar/src/main.ts',
+        '/bar/src/app/app.routes.ts',
         '/bar/src/app/app.config.ts',
       ]),
     );
diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json
@@ -91,7 +91,7 @@
     },
     "routing": {
       "type": "boolean",
-      "description": "Generate a routing module for the initial project.",
+      "description": "Enable routing in the initial project.",
       "x-user-analytics": "ep.ng_routing"
     },
     "prefix": {
diff --git a/packages/schematics/angular/utility/standalone/rules_spec.ts b/packages/schematics/angular/utility/standalone/rules_spec.ts
@@ -31,6 +31,7 @@ describe('standalone utilities', () => {
       {
         name: projectName,
         standalone,
+        routing: false,
       },
       host,
     );
diff --git a/tests/legacy-cli/e2e/tests/basic/rebuild.ts b/tests/legacy-cli/e2e/tests/basic/rebuild.ts
@@ -58,6 +58,7 @@ export default async function () {
       'src/app/app.module.ts': `
         import { BrowserModule } from '@angular/platform-browser';
         import { NgModule } from '@angular/core';
+        import { RouterModule } from '@angular/router';
 
         import { AppComponent } from './app.component';
 
@@ -66,6 +67,7 @@ export default async function () {
             AppComponent
           ],
           imports: [
+            RouterModule,
             BrowserModule
           ],
           providers: [],
@@ -95,14 +97,15 @@ export default async function () {
       'src/app/app.module.ts': `
         import { BrowserModule } from '@angular/platform-browser';
         import { NgModule } from '@angular/core';
-
+        import { RouterModule } from '@angular/router';
         import { AppComponent } from './app.component';
 
         @NgModule({
           declarations: [
             AppComponent
           ],
           imports: [
+            RouterModule,
             BrowserModule
           ],
           providers: [],
diff --git a/tests/legacy-cli/e2e/tests/build/lazy-load-syntax.ts b/tests/legacy-cli/e2e/tests/build/lazy-load-syntax.ts
@@ -6,38 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { appendToFile, prependToFile, readFile, replaceInFile, writeFile } from '../../utils/fs';
+import { readFile, replaceInFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 
 export default async function () {
   const projectName = 'test-project';
   const appRoutingModulePath = 'src/app/app-routing.module.ts';
 
-  // Add app routing.
-  // This is done automatically on a new app with --routing.
-  await writeFile(
-    appRoutingModulePath,
-    `
-      import { NgModule } from '@angular/core';
-      import { Routes, RouterModule } from '@angular/router';
-
-      const routes: Routes = [];
-
-      @NgModule({
-        imports: [RouterModule.forRoot(routes)],
-        exports: [RouterModule]
-      })
-      export class AppRoutingModule { }
-    `,
-  );
-  await prependToFile(
-    'src/app/app.module.ts',
-    `import { AppRoutingModule } from './app-routing.module';`,
-  );
-  await replaceInFile('src/app/app.module.ts', `imports: [`, `imports: [ AppRoutingModule,`);
-  await appendToFile('src/app/app.component.html', '<router-outlet></router-outlet>');
-
   const originalAppRoutingModule = await readFile(appRoutingModulePath);
   // helper to replace loadChildren
   const replaceLoadChildren = async (route: string) => {
diff --git a/tests/legacy-cli/e2e/tests/build/library-with-demo-app.ts b/tests/legacy-cli/e2e/tests/build/library-with-demo-app.ts
@@ -25,6 +25,7 @@ export default async function () {
     `
       import {NgModule} from '@angular/core';
       import {BrowserModule} from '@angular/platform-browser';
+      import {RouterModule} from '@angular/router';
       import {SecondaryModule} from 'mylib/secondary';
       import {AnotherModule} from 'mylib/another';
 
@@ -35,6 +36,7 @@ export default async function () {
           AppComponent
         ],
         imports: [
+          RouterModule,
           SecondaryModule,
           AnotherModule,
           BrowserModule
diff --git a/tests/legacy-cli/e2e/tests/build/no-angular-router.ts b/tests/legacy-cli/e2e/tests/build/no-angular-router.ts
diff --git a/tests/legacy-cli/e2e/tests/build/prod-build.ts b/tests/legacy-cli/e2e/tests/build/prod-build.ts
@@ -45,5 +45,5 @@ export default async function () {
   await expectFileToMatch(`dist/test-project/${mainPath}`, bootstrapRegExp);
 
   // Size checks in bytes
-  verifySize(mainPath, 124000);
+  verifySize(mainPath, 210000);
 }

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ describe('standalone utilities', () => {`
`31`	`31`	`{`
`32`	`32`	`name: projectName,`
`33`	`33`	`standalone,`
	`34`	`+ routing: false,`
`34`	`35`	`},`
`35`	`36`	`host,`
`36`	`37`	`);`
Original file line number	Diff line number	Diff line change
`@@ -45,5 +45,5 @@ export default async function () {`
`45`	`45`	await expectFileToMatch(`dist/test-project/${mainPath}`, bootstrapRegExp);
`46`	`46`
`47`	`47`	`// Size checks in bytes`
`48`		`- verifySize(mainPath, 124000);`
	`48`	`+ verifySize(mainPath, 210000);`
`49`	`49`	`}`