Question
I am currently developing a microfrontend-based application in angular and I noticed that my MF does not update when I make any changes to the code, it builds correctly but does not reflect on the screen, I have to refresh the screen for the change to be reflected. Can you tell me if it is because of my command that I run the project with the "--live-reload false" flag?
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"build:single-spa:mfe-test": "ng build mfe-test --output-hashing=none --configuration production",
"serve:single-spa:mfe-test": "ng s --project mfe-test --disable-host-check --port 9001 --live-reload false"
},
When I run with --live-reload true, I got these errors and still live reload doesn't work
In my angular.json file I'm not using customWebpackConfig because since v17, Angular provides an improved builder which is based on Vite (dev server) and esbuild (output bundling).
Since esbuild does not support SystemJS as an output format (and likely never will) it makes perfect sense to refactor the MF setup to align with the envisioned native-ESM approach which will be recommended by single-spa core team going forward.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mfe-test": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/mfe-test",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "mfe-test:build:production"
},
"development": {
"buildTarget": "mfe-test:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
}
}
Environment
Libs:
- @angular/core version: 19.1.0
- single-spa-angular version: 9.2.0
Question
I am currently developing a microfrontend-based application in angular and I noticed that my MF does not update when I make any changes to the code, it builds correctly but does not reflect on the screen, I have to refresh the screen for the change to be reflected. Can you tell me if it is because of my command that I run the project with the "--live-reload false" flag?
"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "build:single-spa:mfe-test": "ng build mfe-test --output-hashing=none --configuration production", "serve:single-spa:mfe-test": "ng s --project mfe-test --disable-host-check --port 9001 --live-reload false" },When I run with --live-reload true, I got these errors and still live reload doesn't work
In my angular.json file I'm not using customWebpackConfig because since v17, Angular provides an improved builder which is based on Vite (dev server) and esbuild (output bundling).
Since esbuild does not support SystemJS as an output format (and likely never will) it makes perfect sense to refactor the MF setup to align with the envisioned native-ESM approach which will be recommended by single-spa core team going forward.
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "mfe-test": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/mfe-test", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "mfe-test:build:production" }, "development": { "buildTarget": "mfe-test:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss" ], "scripts": [] } } } } } }Environment
Libs: