feat(nf): update schematics for using application builder

Author: manfredsteyer

libs/native-federation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/native-federation",
-  "version": "17.0.7",
+  "version": "17.1.0-beta.1",
   "main": "src/index.js",
   "generators": "./collection.json",
   "builders": "./builders.json",

libs/native-federation/src/builders/build/builder.ts

@@ -1,3 +1,7 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as mrmime from 'mrmime';
+
 import {
   BuilderContext,
   BuilderOutput,
@@ -12,11 +16,6 @@ import { serveWithVite } from '@angular-devkit/build-angular/src/builders/dev-se
 import { DevServerBuilderOptions } from '@angular-devkit/build-angular/src/builders/dev-server';
 import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
 
-import * as path from 'path';
-import * as fs from 'fs';
-
-import * as mrmime from 'mrmime';
-
 import { setLogLevel, logger } from '@softarc/native-federation/build';
 
 import { FederationOptions } from '@softarc/native-federation/build';
@@ -129,13 +128,15 @@ export async function* runBuilder(
       const exists = fs.existsSync(fileName);
 
       if (req.url !== '/' && req.url !== '' && exists) {
-        console.log('loading from disk', req.url);
         const lookup = mrmime.lookup;
         const mimeType = lookup(path.extname(fileName)) || 'text/javascript';
         const rawBody = fs.readFileSync(fileName, 'utf-8');
         const body = addDebugInformation(req.url, rawBody);
         res.writeHead(200, {
           'Content-Type': mimeType,
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
+          'Access-Control-Allow-Headers': 'Content-Type'
         });
         res.end(body);
       } else {
@@ -174,17 +175,17 @@ export async function* runBuilder(
 
   const builderRun = nfOptions.dev
     ? serveWithVite(
-        normOuterOptions,
-        appBuilderName,
-        context,
-        {
-          indexHtml: transformIndexHtml,
-        },
-        {
-          buildPlugins: plugins,
-          middleware,
-        }
-      )
+      normOuterOptions,
+      appBuilderName,
+      context,
+      {
+        indexHtml: transformIndexHtml,
+      },
+      {
+        buildPlugins: plugins,
+        middleware,
+      }
+    )
     : buildApplication(options, context, plugins);
 
   // builderRun.output.subscribe(async (output) => {

libs/native-federation/src/schematics/init/schematic.ts

@@ -101,16 +101,24 @@ function updateWorkspaceConfig(
   const originalBuild = projectConfig.architect.build;
 
   if (
-    originalBuild.builder !== '@angular-devkit/build-angular:browser-esbuild'
+    originalBuild.builder !== '@angular-devkit/build-angular:application'
   ) {
-    console.log('Switching project to esbuild ...');
-    originalBuild.builder = '@angular-devkit/build-angular:browser-esbuild';
+    console.log('Switching project to the application builder using esbuild ...');
+    originalBuild.builder = '@angular-devkit/build-angular:application';
+    delete originalBuild.configurations?.development?.buildOptimizer;
+    delete originalBuild.configurations?.development?.vendorChunk;
   }
 
-  if (originalBuild.options.browser) {
-    const browser = originalBuild.options.browser;
-    delete originalBuild.options.browser;
-    originalBuild.options.main = browser;
+  // if (originalBuild.options.browser) {
+  //   const browser = originalBuild.options.browser;
+  //   delete originalBuild.options.browser;
+  //   originalBuild.options.main = browser;
+  // }
+
+  if (originalBuild.options.main) {
+    const main = originalBuild.options.main;
+    delete originalBuild.options.main;
+    originalBuild.options.browser = main;
   }
 
   projectConfig.architect.esbuild = originalBuild;
@@ -130,15 +138,27 @@ function updateWorkspaceConfig(
     defaultConfiguration: 'production',
   };
 
+  const serveProd = projectConfig.architect.serve.configurations?.production;
+  if(serveProd) {
+    serveProd.buildTarget = `${projectName}:esbuild:production`;
+    delete serveProd.browserTarget;
+  }
+
+  const serveDev = projectConfig.architect.serve.configurations?.development;
+  if(serveDev) {
+    serveDev.buildTarget = `${projectName}:esbuild:development`;
+    delete serveDev.browserTarget;
+  }
+
   projectConfig.architect['serve-original'] = projectConfig.architect.serve;
 
   projectConfig.architect.serve = {
     builder: '@angular-architects/native-federation:build',
     options: {
-      target: `${projectName}:esbuild:development`,
+      target: `${projectName}:serve-original:development`,
       rebuildDelay: 0,
       dev: true,
-      port: port,
+      port: 0,
     },
   };