web-dev-qa-db-ja.com

typeError：未定義のプロパティ 'tappromise'を読み取ることができません

Angular 9プロジェクトでAngularのビルド最適化を使用し、バンドルを生成するために以下のコードを使用していますが、エラーが発生します。私はエラーでグーグルしますが、具体的な答えが見つかりませんでした。

エラーが発行を示唆しているため、ライブラリ自体のみです。私はNPMインストールとNPM監査を修正しましたが、再び同じエラーを再度取得しました。

エラーの詳細

_An error occurred during the build:
TypeError: Cannot read property 'tapPromise' of undefined
    at compiler.hooks.compilation.tap.compilation (E:\Code\blogui\BlogApp\node_modules\compression-webpack-plugin\dist\index.js:269:39)
    at SyncHook.eval [as call] (eval at create (E:\Code\blogui\BlogApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:25:1)
    at SyncHook.lazyCompileHook (E:\Code\blogui\BlogApp\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:631:26)
    at hooks.beforeCompile.callAsync.err (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:667:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Code\blogui\BlogApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Code\blogui\BlogApp\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:662:28)
    at readRecords.err (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:321:11)

_

angular.jsonファイル

_ "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "outputPath": "dist/BlogApp",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "customWebpackConfig": {
                            "path": "**src/custom-webpack.config.js**"
                        },
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/sitemap.xml",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": ["./node_modules/jquery/dist/jquery.min.js"]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ]
                        }
                    }
                },

_

custom-webpack.config.jsファイル

_const CompressionPlugin = require(`compression-webpack-plugin`);
const BrotliPlugin = require(`brotli-webpack-plugin`);
const path = require(`path`);
module.exports = {
    plugins: [
        new BrotliPlugin({
            asset: '[fileWithoutExt].[ext].br',
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/
        }),
        new CompressionPlugin({
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
            filename(info) {
                let opFile = info.path.split('.'),
                    opFileType = opFile.pop(),
                    opFileName = opFile.join('.');
                return `${opFileName}.${opFileType}.gzip`;
            }
        })
    ],
}


_

package.jsonファイル

_{
    "name": "blog-app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular-builders/custom-webpack": "^10.0.1",
        "@angular/animations": "~9.1.6",
        "@angular/common": "~9.1.6",
        "@angular/compiler": "~9.1.6",
        "@angular/core": "~9.1.6",
        "@angular/forms": "~9.1.6",
        "@angular/platform-browser": "~9.1.6",
        "@angular/platform-browser-dynamic": "~9.1.6",
        "@angular/router": "~9.1.6",
        "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",
        "aws-sdk": "^2.797.0",
        "express-static-gzip": "^2.1.0",
        "jquery": "^3.5.1",
        "ng-lazyload-image": "^9.1.0",
        "ngx-spinner": "^10.0.1",
        "rxjs": "~6.5.4",
        "schema-utils": "^3.0.0",
        "tslib": "^1.10.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.1100.3",
        "@angular/cli": "~9.1.5",
        "@angular/compiler-cli": "~9.1.6",
        "@types/jasmine": "~3.5.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.19.6",
        "brotli-webpack-plugin": "^1.0.0",
        "codelyzer": "^5.1.2",
        "compression-webpack-plugin": "^7.0.0",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~5.0.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.0",
        "karma-jasmine": "~3.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "^7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "TypeScript": "~3.8.3"
    }
}

_

tsconfig.app.json.

_{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

_
webpackcompressionangular9
2
Atif

私はその問題を抱えていましたが、反応しました。そして、原因は、圧縮プラグインバージョンとWebPackのバージョンの間の不適合性でした。

あなたの場合では、"@angular-builders/custom-webpack"の中でそれを見ないから、package.jsonを通してWebPACKを使用すると思います。

あなたのウェブパックには次の起点があるということでしょうか。

"@angular-builders/custom-webpack": "^10.0.1" - > "webpack-merge": "^4.2.2" - > "webpack": "^5.3.2"

とにかく、"compression-webpack-plugin": "^7.0.0"、"webpack": "^5.9.0"を必要とします。そのため、"compression-webpack-plugin": "^6.0.5"に依存する"webpack": "^5.3.2"にダウングレードすることをお勧めします。

何が起こるかを確認するには、そのバージョンまたは下位のものを試してください。

クレジット

8
eniel.rod