@nrwl/angular 12.10.0-beta.3 → 12.10.0

package/README.md

@@ -17,6 +17,30 @@
 
 # Angular Plugin for Nx
 
+The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications, and libraries within an Nx workspace. It provides:
+
+- Integration with libraries such as Jest, Cypress, Karma, Protractor, and Storybook.
+- Helper services, and functions to use along with NgRx libraries.
+- Scaffolding for upgrading AngularJS applications.
+- Scaffolding for creating buildable libraries that can be published to npm.
+- Utilities for automatic workspace refactoring.
+
+## Adding the Angular plugin
+
+Adding the Angular plugin to a workspace can be done with the following:
+
+```bash
+#yarn
+yarn add @nrwl/angular
+```
+
+```bash
+#npm
+npm install @nrwl/angular
+```
+
+For more information about the `@nrwl/angular` package take a look at the [Angular Plugin Overview](https://nx.dev/l/a/angular/overview).
+
 ## What is Nx?
 
 🔎 **Smart, Extensible Build Framework**
@@ -94,10 +118,12 @@ Select the preset that works best for you.
 
 
 ```
-? Workspace name (e.g., org name)     happyorg
-? What to create in the new workspace angular    [a workspace with a single Angular application]
-? Application name                    myapp
-? Default stylesheet format           CSS
+
+✔ Workspace name (e.g., org name)     · happyorg
+✔ What to create in the new workspace · angular
+✔ Application name                    · my app
+✔ Default stylesheet format           · css
+
 ```
 
 ### Serving Application
@@ -106,16 +132,12 @@ Select the preset that works best for you.
 - Run `nx test myapp` to test it.
 - Run `nx e2e myapp-e2e` to run e2e tests for it.
 
-You can also use `ng` instead of `nx:
+You can also use `ng` instead of `nx`:
 
 - Run `ng serve myapp` to serve the newly generated application!
 - Run `ng test myapp` to test it.
 - Run `ng e2e myapp-e2e` to run e2e tests for it.
 
-### Adding Angular Plugin Into an Existing Workspace
-
-You can always add the Angular plugin to an existing workspace by installing `@nrwl/angular` and then generating an Angular application, as follows: `ng g @nrwl/angular:app myapp`.
-
 ## Quick Start Videos
 
 <a href="https://www.youtube.com/watch?v=mVKMse-gFBI" target="_blank">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrwl/angular",
-  "version": "12.10.0-beta.3",
+  "version": "12.10.0",
   "description": "Angular Plugin for Nx",
   "repository": {
     "type": "git",
@@ -35,11 +35,11 @@
   },
   "dependencies": {
     "@angular-devkit/schematics": "~12.2.0",
-    "@nrwl/cypress": "12.10.0-beta.3",
-    "@nrwl/devkit": "12.10.0-beta.3",
-    "@nrwl/jest": "12.10.0-beta.3",
-    "@nrwl/linter": "12.10.0-beta.3",
-    "@nrwl/storybook": "12.10.0-beta.3",
+    "@nrwl/cypress": "12.10.0",
+    "@nrwl/devkit": "12.10.0",
+    "@nrwl/jest": "12.10.0",
+    "@nrwl/linter": "12.10.0",
+    "@nrwl/storybook": "12.10.0",
     "@schematics/angular": "~12.2.0",
     "@phenomnomnominal/tsquery": "4.1.1",
     "ignore": "^5.0.4",

package/src/builders/webpack-browser/webpack-browser.impl.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const architect_1 = require("@angular-devkit/architect");
 const build_angular_1 = require("@angular-devkit/build-angular");
 const rxjs_1 = require("rxjs");
-const buildable_libs_utils_1 = require("@nrwl/workspace/src/utils/buildable-libs-utils");
+const buildable_libs_utils_1 = require("@nrwl/workspace/src/utilities/buildable-libs-utils");
 const devkit_1 = require("@nrwl/devkit");
 const path_1 = require("path");
 const project_graph_1 = require("@nrwl/workspace/src/core/project-graph");
@@ -50,9 +50,10 @@ function buildAppWithCustomWebpackConfiguration(options, context, pathToWebpackC
     });
 }
 function run(options, context) {
-    const { target, dependencies } = buildable_libs_utils_1.calculateProjectDependencies(project_graph_1.readCachedProjectGraph('4.0'), context);
+    const { target, dependencies } = buildable_libs_utils_1.calculateProjectDependencies(project_graph_1.readCachedProjectGraph('4.0'), context.workspaceRoot, context.target.project, context.target.target, context.target.configuration);
     options.tsConfig = buildable_libs_utils_1.createTmpTsConfig(path_1.join(context.workspaceRoot, options.tsConfig), context.workspaceRoot, target.data.root, dependencies);
-    return rxjs_1.of(buildable_libs_utils_1.checkDependentProjectsHaveBeenBuilt(context, dependencies)).pipe(operators_1.switchMap((result) => {
+    process.env.NX_TSCONFIG_PATH = options.tsConfig;
+    return rxjs_1.of(buildable_libs_utils_1.checkDependentProjectsHaveBeenBuilt(context.workspaceRoot, context.target.project, context.target.target, dependencies)).pipe(operators_1.switchMap((result) => {
         if (result) {
             return buildApp(options, context);
         }

package/src/builders/webpack-browser/webpack-browser.impl.js.map

@@ -1 +1 @@
-{"version":3,"file":"webpack-browser.impl.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/builders/webpack-browser/webpack-browser.impl.ts"],"names":[],"mappings":";;;AAAA,yDAImC;AACnC,iEAAsE;AAEtE,+BAA4C;AAC5C,yFAIwD;AACxD,yCAAiD;AACjD,+BAA4B;AAC5B,0EAAgF;AAEhF,8CAA2C;AAC3C,2BAAgC;AAChC,iDAAsC;AAQtC,SAAS,QAAQ,CACf,OAA6B,EAC7B,OAAuB;IAEvB,MAAM,EAAE,mBAAmB,KAAyB,OAAO,EAA3B,eAAe,kBAAK,OAAO,EAArD,uBAA2C,CAAU,CAAC;IAC5D,8CAA8C;IAC9C,mDAAmD;IACnD,IAAI,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,EAAE;QACnD,MAAM,mBAAmB,GAAG,0BAAiB,CAC3C,OAAO,CAAC,aAAa,EACrB,mBAAmB,CAAC,IAAI,CACzB,CAAC;QAEF,IAAI,eAAU,CAAC,mBAAmB,CAAC,EAAE;YACnC,OAAO,sCAAsC,CAC3C,eAAe,EACf,OAAO,EACP,mBAAmB,CACpB,CAAC;SACH;aAAM;YACL,MAAM,IAAI,KAAK,CACb,0IAA0I,mBAAmB,EAAE,CAChK,CAAC;SACH;KACF;IAED,MAAM,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAC9C,uCAAuC,EACvC,eAAsC,EACtC;QACE,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,MAAM,EAAE,OAAO,CAAC,MAAa;KAC9B,CACF,CAAC;IAEF,OAAO,WAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,qBAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AACjE,CAAC;AAED,SAAS,sCAAsC,CAC7C,OAAe,EACf,OAAuB,EACvB,mBAA2B;IAE3B,OAAO,qCAAqB,CAAC,OAAO,EAAE,OAAO,EAAE;QAC7C,oBAAoB,EAAE,CAAO,iBAAiB,EAAE,EAAE;YAChD,MAAM,0BAA0B,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAChE,0FAA0F;YAC1F,4DAA4D;YAC5D,IAAI,OAAO,0BAA0B,KAAK,UAAU,EAAE;gBACpD,OAAO,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;aACtD;iBAAM;gBACL,OAAO,qBAAK,CACV,iBAAiB;gBACjB,gFAAgF;gBAChF,yFAAyF;gBACzF,4CAA4C;gBAC5C,MAAM,0BAA0B,CACjC,CAAC;aACH;QACH,CAAC,CAAA;KACF,CAAC,CAAC;AACL,CAAC;AAED,SAAS,GAAG,CACV,OAA6B,EAC7B,OAAuB;IAEvB,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,mDAA4B,CAC3D,sCAAsB,CAAC,KAAK,CAAC,EAC7B,OAAO,CACR,CAAC;IAEF,OAAO,CAAC,QAAQ,GAAG,wCAAiB,CAClC,WAAI,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC7C,OAAO,CAAC,aAAa,EACrB,MAAM,CAAC,IAAI,CAAC,IAAI,EAChB,YAAY,CACb,CAAC;IAEF,OAAO,SAAE,CAAC,0DAAmC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CACxE,qBAAS,CAAC,CAAC,MAAM,EAAE,EAAE;QACnB,IAAI,MAAM,EAAE;YACV,OAAO,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;SACnC;aAAM;YACL,0BAA0B;YAC1B,OAAO,SAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC,CACH,CAAC;AACJ,CAAC;AAED,kBAAe,yBAAa,CAAoC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"webpack-browser.impl.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/builders/webpack-browser/webpack-browser.impl.ts"],"names":[],"mappings":"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"}

package/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__

@@ -2,10 +2,23 @@ const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPl
 const mf = require("@angular-architects/module-federation/webpack");
 const path = require("path");
 
+
+/**
+* We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
+* builder as it will generate a temporary tsconfig file which contains any required remappings of
+* shared libraries.
+* A remapping will occur when a library is buildable, as webpack needs to know the location of the
+* built files for the buildable library.
+* This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
+* the location of the generated temporary tsconfig file.
+*/
+const tsConfigPath = process.env.NX_TSCONFIG_PATH ?? path.join(__dirname, '<%= offsetFromRoot %>tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '<%= offsetFromRoot %>');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, "../../tsconfig.base.json"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {

package/src/generators/setup-mfe/lib/generate-config.js

@@ -21,6 +21,7 @@ function generateWebpackConfig(host, options, appRoot, remotesWithPorts) {
         remotes: remotesWithPorts !== null && remotesWithPorts !== void 0 ? remotesWithPorts : [],
         sourceRoot: appRoot,
         sharedLibraries: SHARED_SINGLETON_LIBRARIES,
+        offsetFromRoot: devkit_1.offsetFromRoot(appRoot),
     });
 }
 exports.generateWebpackConfig = generateWebpackConfig;

package/src/generators/setup-mfe/lib/generate-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-config.js","sourceRoot":"","sources":["../../../../../../../packages/angular/src/generators/setup-mfe/lib/generate-config.ts"],"names":[],"mappings":";;;AAEA,yCAAwE;AAExE,MAAM,0BAA0B,GAAG;IACjC,eAAe;IACf,iBAAiB;IACjB,sBAAsB;IACtB,iBAAiB;CAClB,CAAC;AAEF,SAAgB,qBAAqB,CACnC,IAAU,EACV,OAAe,EACf,OAAe,EACf,gBAAwD;IAExD,IACE,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,oBAAoB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,yBAAyB,CAAC,EAChD;QACA,eAAM,CAAC,IAAI,CACT,+DAA+D,OAAO,CAAC,OAAO;qKACiF,CAChK,CAAC;KACH;IACD,sBAAa,CACX,IAAI,EACJ,0BAAiB,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,OAAO,EACP;QACE,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,OAAO,CAAC,OAAO;QACrB,IAAI,EAAE,OAAO,CAAC,OAAO;QACrB,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE;QAC/B,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,0BAA0B;KAC5C,CACF,CAAC;AACJ,CAAC;AA5BD,sDA4BC"}
+{"version":3,"file":"generate-config.js","sourceRoot":"","sources":["../../../../../../../packages/angular/src/generators/setup-mfe/lib/generate-config.ts"],"names":[],"mappings":";;;AAEA,yCAKsB;AAEtB,MAAM,0BAA0B,GAAG;IACjC,eAAe;IACf,iBAAiB;IACjB,sBAAsB;IACtB,iBAAiB;CAClB,CAAC;AAEF,SAAgB,qBAAqB,CACnC,IAAU,EACV,OAAe,EACf,OAAe,EACf,gBAAwD;IAExD,IACE,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,oBAAoB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,yBAAyB,CAAC,EAChD;QACA,eAAM,CAAC,IAAI,CACT,+DAA+D,OAAO,CAAC,OAAO;qKACiF,CAChK,CAAC;KACH;IACD,sBAAa,CACX,IAAI,EACJ,0BAAiB,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,OAAO,EACP;QACE,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,OAAO,CAAC,OAAO;QACrB,IAAI,EAAE,OAAO,CAAC,OAAO;QACrB,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE;QAC/B,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,0BAA0B;QAC3C,cAAc,EAAE,uBAAc,CAAC,OAAO,CAAC;KACxC,CACF,CAAC;AACJ,CAAC;AA7BD,sDA6BC"}

package/src/generators/setup-mfe/setup-mfe.js

@@ -16,7 +16,7 @@ function setupMfe(host, options) {
         lib_1.setupServeTarget(host, options);
         lib_1.fixBootstrap(host, projectConfig.root);
         // add package to install
-        const installPackages = devkit_1.addDependenciesToPackageJson(host, { '@angular-architects/module-federation': '^12.2.0' }, {});
+        const installPackages = devkit_1.addDependenciesToPackageJson(host, { '@angular-architects/module-federation': '^12.5.3' }, {});
         // format files
         if (!options.skipFormat) {
             yield devkit_1.formatFiles(host);

package/src/utils/versions.d.ts

@@ -6,3 +6,4 @@ export declare const ngrxVersion = "~12.4.0";
 export declare const rxjsVersion = "~6.6.0";
 export declare const jestPresetAngularVersion = "10.0.1";
 export declare const angularEslintVersion = "~12.3.0";
+export declare const webpackVersion = "5.45.1";

package/src/utils/versions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.angularEslintVersion = exports.jestPresetAngularVersion = exports.rxjsVersion = exports.ngrxVersion = exports.angularJsVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
-exports.nxVersion = '12.10.0-beta.3';
+exports.webpackVersion = exports.angularEslintVersion = exports.jestPresetAngularVersion = exports.rxjsVersion = exports.ngrxVersion = exports.angularJsVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
+exports.nxVersion = '12.10.0';
 exports.angularVersion = '^12.2.0';
 exports.angularDevkitVersion = '~12.2.0';
 exports.angularJsVersion = '1.7.9';
@@ -9,4 +9,5 @@ exports.ngrxVersion = '~12.4.0';
 exports.rxjsVersion = '~6.6.0';
 exports.jestPresetAngularVersion = '10.0.1';
 exports.angularEslintVersion = '~12.3.0';
+exports.webpackVersion = '5.45.1';
 //# sourceMappingURL=versions.js.map

package/src/utils/versions.js.map

@@ -1 +1 @@
-{"version":3,"file":"versions.js","sourceRoot":"","sources":["../../../../../packages/angular/src/utils/versions.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,GAAG,CAAC;AAChB,QAAA,cAAc,GAAG,SAAS,CAAC;AAC3B,QAAA,oBAAoB,GAAG,SAAS,CAAC;AACjC,QAAA,gBAAgB,GAAG,OAAO,CAAC;AAC3B,QAAA,WAAW,GAAG,SAAS,CAAC;AACxB,QAAA,WAAW,GAAG,QAAQ,CAAC;AACvB,QAAA,wBAAwB,GAAG,QAAQ,CAAC;AACpC,QAAA,oBAAoB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"versions.js","sourceRoot":"","sources":["../../../../../packages/angular/src/utils/versions.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,GAAG,CAAC;AAChB,QAAA,cAAc,GAAG,SAAS,CAAC;AAC3B,QAAA,oBAAoB,GAAG,SAAS,CAAC;AACjC,QAAA,gBAAgB,GAAG,OAAO,CAAC;AAC3B,QAAA,WAAW,GAAG,SAAS,CAAC;AACxB,QAAA,WAAW,GAAG,QAAQ,CAAC;AACvB,QAAA,wBAAwB,GAAG,QAAQ,CAAC;AACpC,QAAA,oBAAoB,GAAG,SAAS,CAAC;AACjC,QAAA,cAAc,GAAG,QAAQ,CAAC"}