Я пытался создать проект POC для работы с Native Federation в монорепо NX, следуя структуре подхода DDD.
Приложение mfe1 в проекте зависит от своего домена и содержимого функций, существующих в репозитории и определенных в tsconfig.base.json.
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "esnext",
"lib": ["ES2022", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@native-federation/mfe1/domain": ["libs/mfe1/domain/src/index.ts"],
"@native-federation/mfe1/feature-content": ["libs/mfe1/feature-content/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
}
Я использую компонент, определенный в содержимом функции в app.comComponent.ts файла mfe1.
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContentComponent } from '@native-federation/mfe1/feature-content';
@Component({
standalone: true,
imports: [RouterModule, ContentComponent],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {}
Это просто показывает случайный контент через тег <mfe1-content />
в app.comComponent.html.
Но когда я вношу изменения в файлы, определенные в содержимом функции mfe1, сборка кажется запущенной, но похоже, что изменения не обнаружены и перезагрузка в реальном времени не запускается. Мне приходится обновить страницу вручную, чтобы увидеть, что изменения вступили в силу.
Я не уверен, что делаю что-то не так, но когда я запускаю приложение без процесса сборки Native Federation, все работает так, как ожидалось.
Я создал репозиторий github этого проекта, чтобы опробовать его.
Этапы воспроизведения
npm i
npx nx run mfe1:serve
libs/mfe1/feature-content/src/lib/content.component.html
Оперативная перезагрузка не запускается, но она произойдет, если что-то невозможно построить.
С другой стороны npx nx run mfe1:serve-original --configuration=development
принимайте изменения как положено.
Дополнительная информация
пакет.json
{
"name": "@native-federation/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {},
"private": true,
"dependencies": {
"@angular-architects/native-federation": "^17.1.7",
"@angular/animations": "17.3.3",
"@angular/common": "17.3.3",
"@angular/compiler": "17.3.3",
"@angular/core": "17.3.3",
"@angular/forms": "17.3.3",
"@angular/platform-browser": "17.3.3",
"@angular/platform-browser-dynamic": "17.3.3",
"@angular/router": "17.3.3",
"@ngrx/signals": "^17.1.1",
"es-module-shims": "^1.9.0",
"rxjs": "7.8.1",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.3.3",
"@angular-devkit/core": "17.3.3",
"@angular-devkit/schematics": "17.3.3",
"@angular-eslint/eslint-plugin": "17.3.0",
"@angular-eslint/eslint-plugin-template": "17.3.0",
"@angular-eslint/template-parser": "17.3.0",
"@angular/cli": "~17.3.0",
"@angular/compiler-cli": "17.3.3",
"@angular/language-service": "17.3.3",
"@nx/angular": "18.2.3",
"@nx/eslint": "18.2.3",
"@nx/eslint-plugin": "18.2.3",
"@nx/jest": "18.2.3",
"@nx/js": "18.2.3",
"@nx/workspace": "18.2.3",
"@schematics/angular": "17.3.3",
"@swc-node/register": "1.8.0",
"@swc/core": "1.3.101",
"@swc/helpers": "0.5.3",
"@types/jest": "29.4.4",
"@types/node": "^18.16.9",
"@typescript-eslint/eslint-plugin": "7.3.0",
"@typescript-eslint/parser": "7.3.0",
"autoprefixer": "^10.4.0",
"eslint": "8.57.0",
"eslint-config-prettier": "9.1.0",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",
"jest-preset-angular": "14.0.3",
"jsonc-eslint-parser": "^2.1.0",
"ng-packagr": "17.3.0",
"nx": "18.2.3",
"postcss": "^8.4.21",
"postcss-url": "10.1.3",
"prettier": "2.8.3",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "5.4.4"
}
}
проект mfe1.json
{
"name": "mfe1",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"prefix": "app",
"sourceRoot": "apps/mfe1/src",
"tags": [],
"targets": {
"build": {
"executor": "@angular-architects/native-federation:build",
"options": {},
"configurations": {
"production": {
"target": "mfe1:esbuild:production"
},
"development": {
"target": "mfe1:esbuild:development",
"dev": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-architects/native-federation:build",
"options": {
"target": "mfe1:serve-original:development",
"rebuildDelay": 0,
"dev": true,
"port": 0
}
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "mfe1:build"
}
},
"lint": {
"executor": "@nx/eslint:lint"
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/mfe1/jest.config.ts"
}
},
"esbuild": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/mfe1",
"index": "apps/mfe1/src/index.html",
"browser": "apps/mfe1/src/main.ts",
"polyfills": ["zone.js", "es-module-shims"],
"tsConfig": "apps/mfe1/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["apps/mfe1/src/favicon.ico", "apps/mfe1/src/assets"],
"styles": ["apps/mfe1/src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve-original": {
"executor": "@angular-devkit/build-angular:dev-server",
"options": {
"port": 4201
},
"configurations": {
"production": {
"buildTarget": "mfe1:esbuild:production"
},
"development": {
"buildTarget": "mfe1:esbuild:development"
}
},
"defaultConfiguration": "development"
}
}
}
Для этого есть целый репозиторий GitHub, ссылку на который я дал в описании. Также этот вопрос решен на данный момент.
Я нашел решение, есть 2 возможных варианта
Разработайте/отладьте приложение Microfrontend (MF1), запустив сервер разработки без объединения модулей (nx run имя проекта:исходный сервер)
Если нет необходимости совместно использовать библиотеку в микроинтерфейсе, добавьте имя библиотеки в список пропуска в файле Federation.config.js.
skip: [
'test-lib',
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
'@native-federation/mfe1/domain',
'@native-federation/mfe1/feature-content',
// Add further packages you don't need at runtime
]
Как вы включили встроенную федерацию в приложение Nx monorepo? Поделитесь ссылкой на некоторые документы.