2

我正在使用Manfred Steyer模块联合插件，并且 在尝试加载导入ReactiveFormsModule 和 FormsModule的外部模块时在控制台中遇到NullInjectorError ，这些模块已在主机和子 mfe 上的 webpack 配置中共享。独立运行遇到问题的子 mfe（允许 Angular 通过 AppModule 引导）应用程序运行完美，所以这让我相信我的 webpack 配置有问题或者与这个库不兼容。

这是错误 - 仅在尝试通过 shell 加载时发生： chrome开发工具错误

这是我的 shell 应用程序 webpack.config.js：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "qrcodesMFE",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      
      name: "qrcodesMFE",
      filename: "remoteEntry.js",
      exposes: {
        './Module': './src/app/QRCodes/qrcodes.module.ts'
      },

        shared: {
          "@angular/core": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true },
          "@angular/flex-layout": { singleton: true, strictVersion: true, eager: true, requiredVersion: "^12.0.0-beta.34" },
          "@angular/forms": { singleton: true, strictVersion: true, eager: true },
          "@angular/animations": { singleton: true, strictVersion: true, eager: true, requiredVersion: "^12.0.0" },
          "mfecommon": { singleton: true, strictVersion: true, eager: true },
          "@angular/cdk": { singleton: true, strictVersion: true, eager: true },
          "@ngrx/store": { singleton: true, strictVersion: true, eager: true },

          ...sharedMappings.getDescriptors()
        }
        
    }),
    sharedMappings.getPlugin()
  ],
};

这是我的应用模块：

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule, mfecommonModule } from 'mfecommon'
import { AppRoutingModule } from './app-routing.module';

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    mfecommonModule.forRoot(environment),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 authenticate-mfe webpack.config.js 在这种情况下的子 mfe：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "authenticationMFE",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({
        name: "authenticationMFE",
        filename: "remoteEntry.js",
        exposes: {
          './Module': './src/app/authentication/authentication.module.ts'
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true },
          "@angular/flex-layout": { singleton: true, strictVersion: true, eager: true },
          "@angular/forms": { singleton: true, strictVersion: true, eager: true },
          "mfecommon": { singleton: true, strictVersion: true, eager: true },
          "@angular/cdk": { singleton: true, strictVersion: true, eager: true },
          "@ngrx/store": { singleton: true, strictVersion: true, eager: true },
          ...sharedMappings.getDescriptors()
        }
        
    }),
    sharedMappings.getPlugin()
  ],
};

这是 authenticate-mfe 的 AuthenticationModule：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { AuthenticationRoutingModule } from "./authentication-routing.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { FlexLayoutModule } from "@angular/flex-layout";
import { MaterialModule, mfecommonModule } from 'mfecommon';
import { environment } from "src/environments/environment";
import { TestComponent } from './components/test/test.component';

@NgModule({
    declarations: [
        TestComponent
    ],
    imports: [
        CommonModule,
        AuthenticationRoutingModule,
        ReactiveFormsModule,
        FormsModule,
        mfecommonModule.forRoot(environment),
        MaterialModule,
        FlexLayoutModule
    ],
})
export class AuthenticationModule {}

调用表单指令的 html 导致问题：

<div class="primary-theme-color">

    <mat-card id="login-card">
        <form [formGroup]="loginForm" class="form">
            <mat-form-field>
                <input matInput placeholder="Email" formControlName="emailControl" tabindex="1" autocomplete="email" />
                <button type="button" mat-icon-button matSuffix tabindex="-1">
                    <mat-icon>email</mat-icon>
                </button>
            </mat-form-field>
        </form>
    </mat-card>
</div>

对此的任何帮助将不胜感激。我有点不知所措，因为如果在加载 mfe 的 shell 方面删除了 HTML 中的表单代码，它工作正常，但在独立加载时表单代码工作正常，编译或控制台内没有错误。

提前致谢。

4

0 回答 0