fix(core): clear line escape code shouldn't erase prefix in output (n…

…rwl#15674)

e2e/angular-core/src/config.test.ts

@@ -2,7 +2,6 @@ import {
   cleanupProject,
   expectTestsPass,
   newProject,
-  readJson,
   runCLI,
   runCLIAsync,
   uniq,
@@ -19,31 +18,13 @@ describe('Angular Config', () => {
 
     // update the angular.json, first reset to v1 config
     updateFile(`angular.json`, angularV1Json(myapp));
-    const workspaceJson = readJson(`angular.json`);
-    workspaceJson.version = 2;
-    workspaceJson.projects[myapp].targets = updateConfig(
-      workspaceJson.projects[myapp].architect
-    );
-    workspaceJson.generators = workspaceJson.schematics;
-    delete workspaceJson.schematics;
-    updateFile('angular.json', JSON.stringify(workspaceJson, null, 2));
 
     const myapp2 = uniq('myapp');
     runCLI(`generate @nrwl/angular:app ${myapp2} --no-interactive`);
     expectTestsPass(await runCLIAsync(`test ${myapp2} --no-watch`));
   }, 1000000);
 });
 
-function updateConfig(targets: any) {
-  const res = {};
-  Object.entries(targets).forEach(([name, t]: any) => {
-    t.executor = t.builder;
-    delete t.builder;
-    res[name] = t;
-  });
-  return res;
-}
-
 const angularV1Json = (appName: string) => `{
     "version": 1,
     "projects": {

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -3,55 +3,58 @@
 exports[`app --minimal should skip Nx specific \`nx-welcome.component.ts\` file creation 1`] = `
 "import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
-    BrowserModule
+    BrowserModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 "
 `;
 
 exports[`app --standalone should generate a standalone app correctly with routing 1`] = `
 "import { bootstrapApplication } from '@angular/platform-browser';
-import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
-import { AppComponent } from './app/app.component';
+import {
+  provideRouter,
+  withEnabledBlockingInitialNavigation,
+} from '@angular/router';
 import { appRoutes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
   providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
-}).catch((err) => console.error(err));"
+}).catch((err) => console.error(err));
+"
 `;
 
 exports[`app --standalone should generate a standalone app correctly with routing 2`] = `
 "import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];"
+export const appRoutes: Route[] = [];
+"
 `;
 
 exports[`app --standalone should generate a standalone app correctly with routing 3`] = `
-"import { NxWelcomeComponent } from './nx-welcome.component';
+"import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { Component } from '@angular/core';
+import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
   standalone: true,
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'standalone';
-}"
+}
+"
 `;
 
 exports[`app --standalone should generate a standalone app correctly with routing 4`] = `
@@ -62,53 +65,51 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
-    await TestBed.configureTestingModule({imports: [AppComponent, NxWelcomeComponent, RouterTestingModule] }).compileComponents();
+    await TestBed.configureTestingModule({
+      imports: [AppComponent, NxWelcomeComponent, RouterTestingModule],
+    }).compileComponents();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  it('should render title', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement as HTMLElement;
+      expect(compiled.querySelector('h1')?.textContent).toContain('Welcome standalone');
   });
-
   it(\`should have as title 'standalone'\`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('standalone');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome standalone');
-  });
 });
 "
 `;
 
 exports[`app --standalone should generate a standalone app correctly without routing 1`] = `
-"import { bootstrapApplication } from '@angular/platform-browser';;
+"import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
-
-bootstrapApplication(AppComponent).catch((err) => console.error(err));"
+bootstrapApplication(AppComponent, {
+  providers: [],
+}).catch((err) => console.error(err));
+"
 `;
 
 exports[`app --standalone should generate a standalone app correctly without routing 2`] = `
-"import { NxWelcomeComponent } from './nx-welcome.component';
-import { Component } from '@angular/core';
+"import { Component } from '@angular/core';
+import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent],
+  imports: [NxWelcomeComponent, ],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'standalone';
-}"
+}
+"
 `;
 
 exports[`app --standalone should generate a standalone app correctly without routing 3`] = `
@@ -118,27 +119,22 @@ import { NxWelcomeComponent } from './nx-welcome.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
-    await TestBed.configureTestingModule({imports: [AppComponent, NxWelcomeComponent]}).compileComponents();
+    await TestBed.configureTestingModule({
+      imports: [AppComponent, NxWelcomeComponent],
+    }).compileComponents();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  it('should render title', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement as HTMLElement;
+      expect(compiled.querySelector('h1')?.textContent).toContain('Welcome standalone');
   });
-
   it(\`should have as title 'standalone'\`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('standalone');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome standalone');
-  });
 });
 "
 `;

packages/angular/src/generators/application/application.spec.ts

@@ -861,9 +861,9 @@ describe('app', () => {
 
       import { AppModule } from './app/app.module';
 
-
-      platformBrowserDynamic().bootstrapModule(AppModule)
-        .catch(err => console.error(err));
+      platformBrowserDynamic()
+        .bootstrapModule(AppModule)
+        .catch((err) => console.error(err));
       "
     `);
   });

packages/angular/src/generators/application/application.ts

@@ -2,14 +2,13 @@ import {
   formatFiles,
   GeneratorCallback,
   installPackagesTask,
-  moveFilesToNewDirectory,
+  offsetFromRoot,
   readNxJson,
   stripIndents,
   Tree,
   updateNxJson,
 } from '@nrwl/devkit';
 import { join } from 'path';
-import { UnitTestRunner } from '../../utils/test-runners';
 import { angularInitGenerator } from '../init/init';
 import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind';
 import {
@@ -20,18 +19,13 @@ import {
   addE2e,
   addLinting,
   addProxyConfig,
-  addRouterRootConfiguration,
   addUnitTestRunner,
-  convertToStandaloneApp,
   createFiles,
+  createProject,
   enableStrictTypeChecking,
   normalizeOptions,
   setApplicationStrictDefault,
-  updateAppComponentTemplate,
-  updateComponentSpec,
-  updateConfigFiles,
   updateEditorTsConfig,
-  updateNxComponentTemplate,
 } from './lib';
 import type { Schema } from './schema';
 import { gte, lt } from 'semver';
@@ -70,62 +64,16 @@ export async function applicationGenerator(
   }
 
   const options = normalizeOptions(tree, schema);
+  const rootOffset = offsetFromRoot(options.appProjectRoot);
 
   await angularInitGenerator(tree, {
     ...options,
     skipFormat: true,
   });
 
-  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
-  const angularAppSchematic = wrapAngularDevkitSchematic(
-    '@schematics/angular',
-    'application'
-  );
-  await angularAppSchematic(tree, {
-    name: options.name,
-    inlineStyle: options.inlineStyle,
-    inlineTemplate: options.inlineTemplate,
-    prefix: options.prefix,
-    skipTests: options.skipTests,
-    style: options.style,
-    viewEncapsulation: options.viewEncapsulation,
-    routing: false,
-    skipInstall: true,
-    skipPackageJson: options.skipPackageJson,
-  });
-
-  if (options.ngCliSchematicAppRoot !== options.appProjectRoot) {
-    moveFilesToNewDirectory(
-      tree,
-      options.ngCliSchematicAppRoot,
-      options.appProjectRoot
-    );
-  }
+  createProject(tree, options);
 
-  createFiles(tree, options);
-  updateConfigFiles(tree, options);
-  updateAppComponentTemplate(tree, options);
-
-  if (!options.minimal) {
-    // Create the NxWelcomeComponent
-    const angularComponentSchematic = wrapAngularDevkitSchematic(
-      '@schematics/angular',
-      'component'
-    );
-    await angularComponentSchematic(tree, {
-      name: 'NxWelcome',
-      inlineTemplate: true,
-      inlineStyle: true,
-      prefix: options.prefix,
-      skipTests: true,
-      style: options.style,
-      flat: true,
-      viewEncapsulation: 'None',
-      project: options.name,
-      standalone: options.standalone,
-    });
-    updateNxComponentTemplate(tree, options);
-  }
+  await createFiles(tree, options, rootOffset);
 
   if (options.addTailwind) {
     await setupTailwindGenerator(tree, {
@@ -135,14 +83,6 @@ export async function applicationGenerator(
     });
   }
 
-  if (options.unitTestRunner !== UnitTestRunner.None) {
-    updateComponentSpec(tree, options);
-  }
-
-  if (options.routing) {
-    addRouterRootConfiguration(tree, options);
-  }
-
   await addLinting(tree, options);
   await addUnitTestRunner(tree, options);
   await addE2e(tree, options);
@@ -164,10 +104,6 @@ export async function applicationGenerator(
     setApplicationStrictDefault(tree, false);
   }
 
-  if (options.standalone) {
-    convertToStandaloneApp(tree, options);
-  }
-
   if (!options.skipFormat) {
     await formatFiles(tree);
   }

packages/angular/src/generators/application/files/base/src/index.html__tpl__

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= appName %></title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <<%= rootSelector %>></<%= rootSelector %>>
+  </body>
+</html>

packages/angular/src/generators/application/files/base/src/styles.__style__

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

packages/angular/src/generators/application/files/base/tsconfig.app.json__tpl__

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= rootOffset %>dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

packages/angular/src/generators/application/files/base/tsconfig.editor.json__tpl__

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {}
+}