Angular 打字脚本可以'；无法理解声明的d.ts文件-字段'；浏览器&x27；不'；不包含有效的别名配置

我有一份申请表。我正在使用提供模块联合功能的beta Webpack 5。只是想玩一下这个新工具

我有一个独立的存储应用程序，它在localhost:9006上提供，带有模块联合，它提供外部远程捆绑，shell（Angular 9）应用程序可以在运行时将其作为导入的捆绑使用

比如说

import('s1').then( m => {

});

然而，这条路

s1

不是angular的一部分，我声明它为模块，告诉typescript不要抛出任何错误

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

这是我的网页配置

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,
    }),
  ]
};

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../dist",
    // "types": ["node"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts",
    "node_modules"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }  
}

这是我的tsconfig.app.json配置

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,
    }),
  ]
};

{
  "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"
  ], 
}

---

typescript似乎看不到该模块，并试图在node_模块下找到它。我在配置中遗漏了一些内容，但看不到在哪里。

您的问题可能是您包含了从远程导入的模块，如“s1/模块”

您解决过这个问题吗？