@nrwl/angular 15.9.0-beta.4 → 15.9.0-beta.5

package/migrations.json

@@ -152,6 +152,12 @@
       "version": "15.8.0-beta.4",
       "description": "Update the @angular/cli package version to ~15.2.0.",
       "factory": "./src/migrations/update-15-8-0/update-angular-cli"
+    },
+    "update-tsconfig-spec-jest": {
+      "cli": "nx",
+      "version": "15.9.0-beta.3",
+      "description": "Update the tsconfig.spec.json to use target es2016 for jest-preset-angular v13",
+      "factory": "./src/migrations/update-15-9-0/update-testing-tsconfig"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrwl/angular",
-  "version": "15.9.0-beta.4",
+  "version": "15.9.0-beta.5",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -63,13 +63,13 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/cypress": "15.9.0-beta.4",
-    "@nrwl/devkit": "15.9.0-beta.4",
-    "@nrwl/jest": "15.9.0-beta.4",
-    "@nrwl/js": "15.9.0-beta.4",
-    "@nrwl/linter": "15.9.0-beta.4",
-    "@nrwl/webpack": "15.9.0-beta.4",
-    "@nrwl/workspace": "15.9.0-beta.4",
+    "@nrwl/cypress": "15.9.0-beta.5",
+    "@nrwl/devkit": "15.9.0-beta.5",
+    "@nrwl/jest": "15.9.0-beta.5",
+    "@nrwl/js": "15.9.0-beta.5",
+    "@nrwl/linter": "15.9.0-beta.5",
+    "@nrwl/webpack": "15.9.0-beta.5",
+    "@nrwl/workspace": "15.9.0-beta.5",
     "@phenomnomnominal/tsquery": "4.1.1",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
@@ -108,5 +108,5 @@
   "fesm2015": "fesm2015/nrwl-angular.mjs",
   "typings": "index.d.ts",
   "sideEffects": false,
-  "gitHead": "a52e60910108149e13f241d9c0a47ad16fd5d134"
+  "gitHead": "02cd5f9445f8a2c78eb4d3b0b2f7d8fab63435ba"
 }

package/src/generators/application/application.js

@@ -4,7 +4,6 @@ exports.applicationGenerator = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nrwl/devkit");
 const path_1 = require("path");
-const test_runners_1 = require("../../utils/test-runners");
 const init_1 = require("../init/init");
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const version_utils_1 = require("../utils/version-utils");
@@ -34,44 +33,10 @@ function applicationGenerator(tree, schema) {
             return yield previousGenerator.default(tree, schema);
         }
         const options = (0, lib_1.normalizeOptions)(tree, schema);
+        const rootOffset = (0, devkit_1.offsetFromRoot)(options.appProjectRoot);
         yield (0, init_1.angularInitGenerator)(tree, Object.assign(Object.assign({}, options), { skipFormat: true }));
-        const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
-        const angularAppSchematic = wrapAngularDevkitSchematic('@schematics/angular', 'application');
-        yield 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) {
-            (0, devkit_1.moveFilesToNewDirectory)(tree, options.ngCliSchematicAppRoot, options.appProjectRoot);
-        }
-        (0, lib_1.createFiles)(tree, options);
-        (0, lib_1.updateConfigFiles)(tree, options);
-        (0, lib_1.updateAppComponentTemplate)(tree, options);
-        if (!options.minimal) {
-            // Create the NxWelcomeComponent
-            const angularComponentSchematic = wrapAngularDevkitSchematic('@schematics/angular', 'component');
-            yield 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,
-            });
-            (0, lib_1.updateNxComponentTemplate)(tree, options);
-        }
+        (0, lib_1.createProject)(tree, options);
+        yield (0, lib_1.createFiles)(tree, options, rootOffset);
         if (options.addTailwind) {
             yield (0, setup_tailwind_1.setupTailwindGenerator)(tree, {
                 project: options.name,
@@ -79,12 +44,6 @@ function applicationGenerator(tree, schema) {
                 skipPackageJson: options.skipPackageJson,
             });
         }
-        if (options.unitTestRunner !== test_runners_1.UnitTestRunner.None) {
-            (0, lib_1.updateComponentSpec)(tree, options);
-        }
-        if (options.routing) {
-            (0, lib_1.addRouterRootConfiguration)(tree, options);
-        }
         yield (0, lib_1.addLinting)(tree, options);
         yield (0, lib_1.addUnitTestRunner)(tree, options);
         yield (0, lib_1.addE2e)(tree, options);
@@ -103,9 +62,6 @@ function applicationGenerator(tree, schema) {
         else {
             (0, lib_1.setApplicationStrictDefault)(tree, false);
         }
-        if (options.standalone) {
-            (0, lib_1.convertToStandaloneApp)(tree, options);
-        }
         if (!options.skipFormat) {
             yield (0, devkit_1.formatFiles)(tree);
         }

package/src/generators/application/application.js.map

@@ -1 +1 @@
-{"version":3,"file":"application.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/application/application.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"application.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/application/application.ts"],"names":[],"mappings":"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"}

package/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>

package/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 */

package/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"]
+}

package/src/generators/application/files/base/tsconfig.editor.json__tpl__

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

package/src/generators/application/files/base/tsconfig.json__tpl__

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    <% if(unitTesting) { %>{
+      "path": "./tsconfig.spec.json"
+    },<% } %>
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "extends": "<%= rootTsConfig %>"
+}

package/src/generators/application/files/base/tsconfig.spec.json__tpl__

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

package/src/generators/application/files/ng-module/src/app/app.component.html__tpl__

@@ -0,0 +1 @@
+<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>

package/src/generators/application/files/ng-module/src/app/app.component.spec.ts__tpl__

@@ -0,0 +1,26 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';<% if(!minimal) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing) { %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %>
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [<% if(routing) { %>RouterTestingModule<% } %>],
+      declarations: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %>]
+    }).compileComponents();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
+  });<% if(!minimal) { %>
+
+  it(`should have as title '<%= appName %>'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('<%= appName %>');
+  });<% } %>
+});

package/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__

@@ -0,0 +1,13 @@
+import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from '@angular/core';
+
+@Component({
+  selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
+  templateUrl: './app.component.html',<% } else { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  styleUrls: ['./app.component.<%= style %>'],<% } else { %>
+  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
+})
+export class AppComponent {<% if(!minimal) { %>
+  title = '<%= appName %>';
+<% } %>}

package/src/generators/application/files/ng-module/src/app/app.module.ts__tpl__

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';<% if(routing) { %>
+import { RouterModule } from '@angular/router';<% } %>
+import { AppComponent } from './app.component';<% if(routing) { %>
+import { appRoutes } from './app.routes';<% } %><% if(!minimal) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
+
+@NgModule({
+  declarations: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %>],
+  imports: [
+    BrowserModule,<% if(routing) { %>
+    RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),<% } %>
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/src/generators/application/files/{src → ng-module/src}/app/app.routes.ts__tpl__

@@ -1,3 +1,3 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [];

package/src/generators/application/{lib/nrwl-home-tpl.js → files/ng-module/src/app/nx-welcome.component.ts__tpl__}

@@ -1,10 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.nrwlHomeTemplate = void 0;
-exports.nrwlHomeTemplate = {
-    getSelector: (prefix) => `<${prefix}-nx-welcome></${prefix}-nx-welcome>`,
-    template: (title) => `
-     <!--
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: '<%= nxWelcomeSelector %>',
+  template: `
+    <!--
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *
      This is a starter component and can be deleted.
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@@ -58,7 +57,6 @@ exports.nrwlHomeTemplate = {
         display: block;
         vertical-align: middle;
       }
-
       svg {
         shape-rendering: auto;
         text-rendering: optimizeLegibility;
@@ -72,7 +70,6 @@ exports.nrwlHomeTemplate = {
         overflow: scroll;
         padding: 0.5rem 0.75rem;
       }
-
       .shadow {
         box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
           0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -80,7 +77,6 @@ exports.nrwlHomeTemplate = {
       .rounded {
         border-radius: 1.5rem;
       }
-
       .wrapper {
         width: 100%;
       }
@@ -159,7 +155,6 @@ exports.nrwlHomeTemplate = {
         color: rgba(255, 255, 255, 1);
         width: 66.666667%;
       }
-
       #middle-content {
         align-items: flex-start;
         display: grid;
@@ -167,7 +162,6 @@ exports.nrwlHomeTemplate = {
         grid-template-columns: 1fr;
         margin-top: 3.5rem;
       }
-
       #learning-materials {
         padding: 2.5rem 2rem;
       }
@@ -243,7 +237,6 @@ exports.nrwlHomeTemplate = {
       .list-item-link:hover svg:last-child {
         transform: translateX(0.25rem);
       }
-
       #other-links {
       }
       .button-pill {
@@ -290,14 +283,12 @@ exports.nrwlHomeTemplate = {
       .nx-console svg {
         color: rgba(0, 122, 204, 1);
       }
-
       #nx-repo:hover {
         background-color: rgba(24, 23, 23, 1);
       }
       #nx-repo svg {
         color: rgba(24, 23, 23, 1);
       }
-
       #nx-cloud {
         margin-bottom: 2rem;
         margin-top: 2rem;
@@ -345,10 +336,8 @@ exports.nrwlHomeTemplate = {
       #nx-cloud a:hover {
         text-decoration: underline;
       }
-
       #commands {
         padding: 2.5rem 2rem;
-
         margin-top: 3.5rem;
       }
       #commands h2 {
@@ -398,7 +387,6 @@ exports.nrwlHomeTemplate = {
         margin-right: 1rem;
         width: 1.5rem;
       }
-
       #love {
         color: rgba(107, 114, 128, 1);
         font-size: 0.875rem;
@@ -414,7 +402,6 @@ exports.nrwlHomeTemplate = {
         display: inline;
         margin-top: -0.25rem;
       }
-
       @media screen and (min-width: 768px) {
         #hero {
           grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -433,10 +420,9 @@ exports.nrwlHomeTemplate = {
         <div id="welcome">
           <h1>
             <span> Hello there, </span>
-            Welcome ${title} 👋
+            Welcome <%= appName %> 👋
           </h1>
         </div>
-
         <!--  HERO  -->
         <div id="hero" class="rounded">
           <div class="text-container">
@@ -471,7 +457,6 @@ exports.nrwlHomeTemplate = {
             </svg>
           </div>
         </div>
-
         <!--  MIDDLE CONTENT  -->
         <div id="middle-content">
           <div id="learning-materials" class="rounded shadow">
@@ -725,7 +710,6 @@ exports.nrwlHomeTemplate = {
             </a>
           </div>
         </div>
-
         <!--  COMMANDS  -->
         <div id="commands" class="rounded shadow">
           <h2>Next steps</h2>
@@ -749,7 +733,6 @@ exports.nrwlHomeTemplate = {
             </summary>
             <pre><span># Generate UI lib</span>
 nx g @nrwl/angular:lib ui
-
 <span># Add a component</span>
 nx g @nrwl/angular:component button --project ui</pre>
           </details>
@@ -791,15 +774,12 @@ nx g @nrwl/angular:component button --project ui</pre>
             </summary>
             <pre><span># see what&apos;s been affected by changes</span>
 nx affected:graph
-
 <span># run tests for current changes</span>
 nx affected:test
-
 <span># run e2e tests for current changes</span>
 nx affected:e2e</pre>
           </details>
         </div>
-
         <p id="love">
           Carefully crafted with
           <svg
@@ -819,5 +799,7 @@ nx affected:e2e</pre>
       </div>
     </div>
   `,
-};
-//# sourceMappingURL=nrwl-home-tpl.js.map
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+})
+export class NxWelcomeComponent {}

package/src/generators/application/files/ng-module/src/main.ts__tpl__

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/src/generators/application/files/standalone-components/src/app/app.component.html__tpl__

@@ -0,0 +1 @@
+<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>

package/src/generators/application/files/standalone-components/src/app/app.component.spec.ts__tpl__

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';<% if(!minimal) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %><% if(routing) { %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %>
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %><% if(routing) { %>, RouterTestingModule<% } %>],
+    }).compileComponents();
+  });
+
+  it('should render title', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement as HTMLElement;
+      expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
+  });<% if(!minimal) { %>
+
+  it(`should have as title '<%= appName %>'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('<%= appName %>');
+  });<% } %>
+});

package/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__

@@ -0,0 +1,17 @@
+import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from '@angular/core';<% if(routing) { %>
+import { RouterModule } from '@angular/router';<% } %><% if(!minimal) { %>
+import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
+
+@Component({
+  standalone: true,
+  imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
+  selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
+  templateUrl: './app.component.html',<% } else { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  styleUrls: ['./app.component.<%= style %>'],<% } else { %>
+  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
+})
+export class AppComponent {<% if(!minimal) { %>
+  title = '<%= appName %>';
+<% } %>}

package/src/generators/application/files/standalone-components/src/app/app.routes.ts__tpl__

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];