webpack Angular 9生产构建(带网络包)

qlfbtfca  于 2022-11-24  发布在  Webpack
关注(0)|答案(2)|浏览(183)

我有一个Angular 的应用程序,我定期更新和建立与最新的Webpack捆绑。
几天前我升级到Angular 9的项目,遇到了一些问题,我无法解决。
1.npm运行内部版本:prod

  • 错误TS 2307:找不到模块'./app/app.module. ngfactory'。*

我认为这是由于这部分的webpack配置,因为模块导入是改变了Angular 9。但是,我不是绝对肯定。

plugins: [
    new ngw.AngularCompilerPlugin({
      tsConfigPath: path.resolve(rootPath, 'tsconfig.aot.json'),
      entryModule: path.resolve(rootPath, 'src', 'app', 'app.module#AppModule')
    })
  ]

1.npm运行测试

  • 未找到文件:./node_modules/jest-preset-angular/内联HtmlStripStylesTransformer(解析为:.../Angular webpack构建/节点模块/jest预设Angular /内联HtmlStripStylesTransformer)*

这个错误对我来说有点神秘。我读过一些关于类似问题的帖子,但那些建议都不起作用。
下面你可以找到我的配置文件,但整个项目都可以在GitHub上找到:https://github.com/aszidien/angular-webpack-build

包.json

...
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack --mode development",
    "build:prod": "cross-env NODE_ENV=production webpack --mode production",
    "test": "jest"
  }
...

配置自动生成器json

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  }
}

webpack.配置.公共.js

const webpackMerge = require('webpack-merge');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader', options: {
              transpileOnly: true
            }
          },
          { loader: 'angular2-template-loader' },
          { loader: 'angular-router-loader' }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

网页包.配置.产品.js

const webpackMerge = require('webpack-merge');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader', options: {
              transpileOnly: true
            }
          },
          { loader: 'angular2-template-loader' },
          { loader: 'angular-router-loader' }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});
roejwanj

roejwanj1#

1.在带Ivy的Angular 9中,不再有ngfactory文件,您应该删除main-aot.ts文件

nwlls2ji

nwlls2ji2#

我有类似的问题,但与Angular 通用& webpack。我准备了一些样本回购:https://github.com/MDzyga/universal

相关问题