Команда Angular Native Federation «serve» не перезагружает приложение в реальном времени

Я пытался создать проект 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, сборка кажется запущенной, но похоже, что изменения не обнаружены и перезагрузка в реальном времени не запускается. Мне приходится обновить страницу вручную, чтобы увидеть, что изменения вступили в силу.

Команда Angular Native Federation «serve» не перезагружает приложение в реальном времени

Я не уверен, что делаю что-то не так, но когда я запускаю приложение без процесса сборки Native Federation, все работает так, как ожидалось.

Я создал репозиторий github этого проекта, чтобы опробовать его.

Этапы воспроизведения

  1. Установите зависимости: npm i
  2. Подавайте mfe1 вместе с Native Federation: npx nx run mfe1:serve
  3. Измените что-нибудь в 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"
    }
  }
}

Как вы включили встроенную федерацию в приложение Nx monorepo? Поделитесь ссылкой на некоторые документы.

Suresh Kumar 15.07.2024 09:05

Для этого есть целый репозиторий GitHub, ссылку на который я дал в описании. Также этот вопрос решен на данный момент.

n_denny 16.07.2024 11:59
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
290
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение, есть 2 возможных варианта

  1. Разработайте/отладьте приложение Microfrontend (MF1), запустив сервер разработки без объединения модулей (nx run имя проекта:исходный сервер)

  2. Если нет необходимости совместно использовать библиотеку в микроинтерфейсе, добавьте имя библиотеки в список пропуска в файле 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

  ]

Другие вопросы по теме