fix(angular): incremental builds with mfes nrwl#6923

packages/angular/src/builders/webpack-browser/webpack-browser.impl.ts

@@ -10,7 +10,7 @@ import {
   calculateProjectDependencies,
   checkDependentProjectsHaveBeenBuilt,
   createTmpTsConfig,
-} from '@nrwl/workspace/src/utils/buildable-libs-utils';
+} from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 import { joinPathFragments } from '@nrwl/devkit';
 import { join } from 'path';
 import { readCachedProjectGraph } from '@nrwl/workspace/src/core/project-graph';
@@ -94,7 +94,10 @@ function run(
 ): Observable<BuilderOutput> {
   const { target, dependencies } = calculateProjectDependencies(
     readCachedProjectGraph('4.0'),
-    context
+    context.workspaceRoot,
+    context.target.project,
+    context.target.target,
+    context.target.configuration
   );
 
   options.tsConfig = createTmpTsConfig(
@@ -103,8 +106,16 @@ function run(
     target.data.root,
     dependencies
   );
+  process.env.NX_TSCONFIG_PATH = options.tsConfig;
 
-  return of(checkDependentProjectsHaveBeenBuilt(context, dependencies)).pipe(
+  return of(
+    checkDependentProjectsHaveBeenBuilt(
+      context.workspaceRoot,
+      context.target.project,
+      context.target.target,
+      dependencies
+    )
+  ).pipe(
     switchMap((result) => {
       if (result) {
         return buildApp(options, context);

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

@@ -5,10 +5,23 @@ exports[`app --mfe should add a remote application and add it to a specified hos
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -50,10 +63,23 @@ exports[`app --mfe should add a remote application and add it to a specified hos
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -94,10 +120,23 @@ exports[`app --mfe should generate a Module Federation correctly for a each app
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -137,10 +176,23 @@ exports[`app --mfe should generate a Module Federation correctly for a each app
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {

packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap

@@ -33,10 +33,23 @@ exports[`Init MFE should add a remote application and add it to a specified host
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -78,10 +91,23 @@ exports[`Init MFE should add a remote application and add it to a specified host
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -122,10 +148,23 @@ exports[`Init MFE should create webpack configs correctly 1`] = `
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {
@@ -165,10 +204,23 @@ exports[`Init MFE should create webpack configs correctly 2`] = `
 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, '../../tsconfig.base.json');
+
+const workspaceRootPath = path.join(__dirname, '../../');
 const sharedMappings = new mf.SharedMappings();
-sharedMappings.register(path.join(__dirname, \\"../../tsconfig.base.json\\"), [
+sharedMappings.register(tsConfigPath, [
   /* mapped paths to share */
-]);
+], workspaceRootPath);
 
 module.exports = {
   output: {

packages/angular/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: {

packages/angular/src/generators/setup-mfe/lib/generate-config.ts

@@ -1,6 +1,11 @@
 import type { Tree } from '@nrwl/devkit';
 import type { Schema } from '../schema';
-import { generateFiles, joinPathFragments, logger } from '@nrwl/devkit';
+import {
+  generateFiles,
+  joinPathFragments,
+  logger,
+  offsetFromRoot,
+} from '@nrwl/devkit';
 
 const SHARED_SINGLETON_LIBRARIES = [
   '@angular/core',
@@ -35,6 +40,7 @@ export function generateWebpackConfig(
       remotes: remotesWithPorts ?? [],
       sourceRoot: appRoot,
       sharedLibraries: SHARED_SINGLETON_LIBRARIES,
+      offsetFromRoot: offsetFromRoot(appRoot),
     }
   );
 }

packages/angular/src/generators/setup-mfe/setup-mfe.ts

@@ -36,7 +36,7 @@ export async function setupMfe(host: Tree, options: Schema) {
   // add package to install
   const installPackages = addDependenciesToPackageJson(
     host,
-    { '@angular-architects/module-federation': '^12.2.0' },
+    { '@angular-architects/module-federation': '^12.5.3' },
     {}
   );