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

…ions

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.

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);
 

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": {

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',
       ]),
     );

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": {

packages/schematics/angular/utility/standalone/rules_spec.ts

@@ -31,6 +31,7 @@ describe('standalone utilities', () => {
       {
         name: projectName,
         standalone,
+        routing: false,
       },
       host,
     );

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: [],

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) => {

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

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);
 }