如何使用Angular 链接器解决我的JIT编译时错误并在我的webpack中添加规则

nbnkbykc  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(164)

我有JIT编译时间错误。我调试了，原因是外部库在angularCompilerOptions中设置了"compilationMode": "partial"
你可以在这里查看图书馆
https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/tsconfig.lib.json
我按照这件事的Angular 文件https://angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
对于这种情况，他们说我们需要使用角连接器和巴别塔装载机
我的Angular 版本是12，我的package.json看起来像这样

{
  "name": "xecm",
  "version": "3.7.0-SNAPSHOT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host=0.0.0.0 --port 4200",
    "build:prod": "npm run lint && ng build --configuration production && npm run copy-url-handlers",
    "build:debug": "npm run build:prod -- --source-map",
    "build:int": "ng build --configuration production --optimization=false && npm run copy-url-handlers",
    "bundle-report": "ng build --configuration production --stats-json && webpack-bundle-analyzer target/dist/stats-es5.json",
    "test": "ng test",
    "lint": "ng lint xecm",
    "lint:watch": "nodemon --exec \"npm run lint || exit 1\" --ext ts",
    "lint:fix": "npm run lint -- --fix",
    "e2e": "ng e2e",
    "copy-url-handlers": "cpr ./src/WEB-INF ./target/dist/WEB-INF"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.16",
    "@angular/common": "~12.2.16",
    "@angular/compiler": "~12.2.16",
    "@angular/core": "~12.2.16",
    "@angular/forms": "~12.2.16",
    "@angular/platform-browser": "~12.2.16",
    "@angular/platform-browser-dynamic": "~12.2.16",
    "@angular/router": "~12.2.16",
    "@babel/core": "^7.20.2",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "bootstrap": "4.5.3",
    "bootstrap.native": "3.0.13",
    "file-saver": "^2.0.2",
    "html-lint": "^2.4.2",
    "moment": "2.29.1",
    "ng2-file-upload": "^1.4.0",
    "rxjs": "~6.6.3",
    "rxjs-compat": "~6.5.2",
    "tslib": "^2.0.0",
    "xcomponent-angular": "^3.0.0-rc.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "10.0.1",
    "@angular-devkit/build-angular": "12.2.16",
    "@angular/cli": "12.2.16",
    "@angular/compiler-cli": "12.2.16",
    "@angular/language-service": "12.2.16",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "14.11.8",
    "codelyzer": "^6.0.0",
    "cpr": "3.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "7.0.0",
    "ts-node": "9.0.0",
    "tslint": "6.1.3",
    "typescript": "4.3.5",
    "webpack-bundle-analyzer": "3.9.0",
    "dotenv": "~8.2.0"
  },
  "proxy": {
    "profiles": {
      "vntils13": [
        {
          "authorization": {
            "username": "DEV_VN_USERNAME",
            "password": "DEV_VN_PASSWORD"
          },
          "context": [
            "/xecm-web",
            "/xframework-saas-web/rest",
            "/xframework-security-web/rest",
            "/xframework-event-web/rest",
            "/xframework-objectstore-web/rest"
          ],
          "target": {
            "protocol": "https",
            "hostname": "192.168.73.44",
            "port": "8443"
          }
        }
      ],
      "localhost": [
        {
          "authorization": {
            "username": "DEV_VN_USERNAME",
            "password": "DEV_VN_PASSWORD"
          },
          "context": [
            "/xecm-web",
            "/xframework-saas-web/rest",
            "/xframework-security-web/rest",
            "/xframework-event-web/rest",
            "/xframework-objectstore-web/rest"
          ],
          "target": {
            "protocol": "https",
            "hostname": "localhost",
            "port": "8443"
          }
        }
      ],
      "dev-sk": [
        {
          "authorization": {
            "username": "DEV_SK_USERNAME",
            "password": "DEV_SK_PASSWORD"
          },
          "context": [
            "/xecm-web",
            "/xframework-saas-web/rest",
            "/xframework-security-web/rest",
            "/xframework-event-web/rest",
            "/xframework-objectstore-web/rest"
          ],
          "target": {
            "protocol": "https",
            "hostname": "localhost",
            "port": "9543"
          }
        }
      ]
    }
  },
  "publishConfig": {
    "registry": "https://npm.external.io/npm-private/"
  }
}

现在，如果我根据extra-webpack.config.js文件中的示例添加代码

const webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
const linkerPlugin = require("@angular/compiler-cli/linker/babel");

module.exports = {
    /**
     * Remove all unused MomentJS locales
     * The problem is described in this article
     * https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173
     */
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|en|fr|it/),
    ],
    module: {
        rules: [
            {
                include: /node_modules/,
                test: /\.mjs$/,
                type: 'javascript/auto'
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              ecma: undefined,
              parse: {},
              compress: {},
              mangle: true, // Note `mangle.properties` is `false` by default.
              module: false,
              // Deprecated
              output: null,
              format: null,
              toplevel: false,
              nameCache: null,
              ie8: false,
              keep_classnames: undefined,
              keep_fnames: false,
              safari10: false,
            },
          }),
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            ngDevMode: true,
        })
    ],
    rules: [
        {
          test: /\.m?js$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [linkerPlugin],
              compact: false,
              cacheDirectory: true,
            }
          }
        }
    ]
}

注意：我在文档中添加了rules，但出现错误

An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           rules: …
         }
       })
     ]

我应该包括什么，而不是规则在这里？当我搜索的webpack文档有rules的东西，但在我这边它不工作。
据我所知，angular 12正在使用开箱即用的webpack版本5。
以前我有Angular 12，我迁移到Angular 12。它是自动制作的还是没有？我如何检查哪个版本的webpack是用在我的Angular 项目，并修复我的错误，使我可以链接库通过Angular 和我的编译错误将消失

webpack

1条答案

按热度按时间
kqqjbcuj

kqqjbcuj1#

因此，因为我有旧版本的webpack，我需要使用以下语法

const webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
const linkerPlugin = require("@angular/compiler-cli/linker/babel");

module.exports = {
    /**
     * Remove all unused MomentJS locales
     * The problem is described in this article
     * https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173
     */
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|en|fr|it/),
    ],
    module: {
        rules: [
            {
                include: /node_modules/,
                test: /\.mjs$/,
                type: 'javascript/auto'
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              ecma: undefined,
              parse: {},
              compress: {},
              mangle: true, // Note `mangle.properties` is `false` by default.
              module: false,
              // Deprecated
              output: null,
              format: null,
              toplevel: false,
              nameCache: null,
              ie8: false,
              keep_classnames: undefined,
              keep_fnames: false,
              safari10: false,
            },
          }),
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            ngDevMode: true,
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                rules: [
                    {
                      test: /.*\.js$/,
                      include: /node_modules\/@ng-select/,
                      use: {
                        loader: 'babel-loader',
                        options: {
                          configFile: false,
                          plugins: [linkerPlugin],
                        }
                      }
                    }
                ]
            }
        })
    ],
}

所以

new webpack.LoaderOptionsPlugin({ inside plugins

而不是直接规则

赞(0）分享  回复(0）举报  2022-11-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com