我有Angular 9应用程序。我正在使用提供模块联合功能的beta Webpack 5。只是尝试使用这个新工具。
我有一个独立的商店应用程序，通过模块联合在localhost：9006上提供，它提供了外部远程捆绑包，并且shell（Angular 9）应用程序可以在运行时将其用作导入的捆绑包。
例如
import('s1').then( m => {
});
但是路径
s1
不是角度的一部分，我将其声明为告诉打字稿不引发任何错误的模块
declare module 's1'
它的路径是src，文件名是decl.d.ts
但是当我启动应用程序时，出现错误：
ERROR in ./src/app/app.component.ts 78:8-20
Module not found: Error: Can't resolve 's1' in '/home/alecoder/Projects/JS/adj_integration/packages/shell/src/app'
resolve 's1' in '/home/alecoder/Projects/JS/adj_integration/packages/shell/src/app'
Parsed request is a module
using description file: /home/alecoder/Projects/JS/adj_integration/packages/shell/package.json (relative path: ./src/app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/alecoder/Projects/JS/adj_integration/packages/shell/src/app/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/JS/adj_integration/packages/shell/src/node_modules doesn't exist or is not a directory
looking for modules in /home/alecoder/Projects/JS/adj_integration/packages/shell/node_modules
single file module
using description file: /home/alecoder/Projects/JS/adj_integration/packages/shell/package.json (relative path: ./node_modules/s1)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/adj_integration/packages/shell/node_modules/s1 doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/adj_integration/packages/shell/node_modules/s1.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/adj_integration/packages/shell/node_modules/s1.js doesn't exist
/home/alecoder/Projects/JS/adj_integration/packages/shell/node_modules/s1 doesn't exist
/home/alecoder/Projects/JS/adj_integration/packages/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/JS/adj_integration/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/JS/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/node_modules doesn't exist or is not a directory
/home/alecoder/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/app/app.module.ts 16:0-47 63:22-34 80:16-28 87:24-36
@ ./src/main.ts 5:0-45 9:41-50
这是我的webpack配置
const AotPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
devtool: 'eval-cheap-source-map',
mode: "development",
entry: ["./src/polyfills.ts", "./src/main.ts"],
node: false,
output: {
path: resolve('./dist'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
devServer: {
https: true,
host: 'dev.adjarabet.com',
port: 443,
historyApiFallback: true,
disableHostCheck: true,
watchOptions: {
ignored: /node_modules/
},
inline: true,
open: true,
hot: true,
//quiet: true
//stats: 'minimal'
stats: {
colors: true,
chunks: false,
hash: true,
version: true,
timings: true,
assets: false,
children: false,
source: true,
warnings: true,
noInfo: true,
contentBase: './dist',
hot: true,
modules: false,
errors: true,
reasons: true,
errorDetails: true,
},
},
resolve: {
extensions: ['.ts', '.js'],
plugins: [new TsconfigPathsPlugin(
{
configFile: "./src/tsconfig.app.json"
})
]
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
exclude: /node_modules/,
// {loader: 'ts-loader', options: {configFile: 'tsconfig.webpack.json'} },
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(eot|svg|cur|ico)$/,
loader: 'file-loader',
options: {
name: `[name].[ext]`,
limit: 10000
}
},
// {
// test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani|ico)$/,
// loader: 'url-loader',
// options: {
// name: `[name].[ext]`,
// limit: 10000
// }
// },
// {
// test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
// parser: { system: true },
// }
]
},
plugins: [
new ModuleFederationPlugin({
name: 'shell_app',
library: { type: 'var', name: 'shell_app' },
filename: 'remoteEntry.js',
remotes: {
s1: 's1'
},
exposes: {
},
shared: []
}),
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
// new AotPlugin({
// mainPath: resolve('./src/main.ts'),
// sourceMap: true,
// nameLazyFiles: true,
// tsConfigPath: resolve('./src/tsconfig.app.json'),
// skipCodeGeneration: true
// }),
// new CircularDependencyPlugin(),
new ProgressPlugin({
activeModules: false,
}),
]
};
这是我的tsconfig.app.json配置
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
// "types": ["node"]
},
"exclude": [
"src/test.ts",
"**/*.spec.ts",
"node_modules"
],
"angularCompilerOptions": {
"enableIvy": false
}
}
和扩展tsconfig.app.json的tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@services/*": ["./app/services/*", "./app/modules/form/services/*"],
"@typings/*": ["./app/typings/*"],
"@app/*": ["./app/*"],
"@env/*": ["./environments/*"]
},
"target": "es5",
"module": "esnext",
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"lib": ["es2018", "dom"],
"mapRoot": "./maps",
"moduleResolution": "node",
"outDir": "./dist",
"sourceMap": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
},
"files": [
"./decl.d.ts"
],
}
看来打字稿看不到那个模块，并试图在node_modules下找到它。我错过了配置中的某些内容，但看不到哪里。
作为模块联盟的创建者，请在Twitter上与我联系。我正在与Angle Core开发人员合作进行模块联盟，我们应该能够解决您的问题。 @ScriptedAlchemy