Блог

Со вчерашнего дня я пытаюсь настроить сборку webpack для приложения angular 12. За последние пару часов я боролся со множеством ошибок, но теперь я застрял. Можете ли вы сказать мне, чего не хватает в моем webpack.config.js правильно ли создавать приложение Angular и все ресурсы и обслуживать его с помощью webpack-dev-сервера? Нужен ли мне какой-либо другой плагин или загрузчики для его правильной компиляции и обслуживания?

с текущей конфигурацией это дало мне такой результат

но когда я пытаюсь запустить localhost:4200, я вижу пустую страницу и получаю такую ошибку:

webpack.config.js

 const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: 'development',
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      filename: '[name].bundle.js',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          filename: 'vendor.bundle.js',
          chunks: 'all',
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },
  entry: {
    main: [
      './src/main.ts'
    ],
    polyfills: [
      "./src/polyfills.ts"
    ]
  },
  module: {
    rules: [
      {
        test: /.html$/i,
        loader: 'html-loader'
      },
      {
        test: /.(scss|sass)$/,
        use: [
          'to-string-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /.tsx?$/,
        loader: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    "modules": [
      "./node_modules"
    ],
    "symlinks": true
  },
  output: {
    path: __dirname   "/public",
    filename: "[name].bundle.js",
    chunkFilename: '[name].js'

  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 4200,
  }
}
 

tsconfig.json

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "emitDecoratorMetadata": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "files": [
    "./src/main.ts",
    "./src/polyfills.ts"
  ],
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false
  }
}
 

package.json

 {
  "name": "print",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "webpack serve",
    "build": "webpack",
    "build-stage": "ng build --configuration=stage",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/animations": "12.0.5",
    "@angular/cdk": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/forms": "12.0.5",
    "@angular/material": "12.0.5",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",
    "@fortawesome/fontawesome-free": "5.5.0",
    "@ngtools/webpack": "^11.0.5",
    "@ngx-translate/core": "11.0.1",
    "@ngxs/store": "^3.7.2",
    "bootstrap": "5.1.2",
    "core-js": "2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "ngx-toastr": "14.1.3",
    "rxjs": "7.3.1",
    "rxjs-compat": "6.6.7",
    "to-string-loader": "^1.1.6",
    "tslib": "2.3.1",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.0.5",
    "@angular/cli": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@types/codemirror": "0.0.67",
    "@types/jasminewd2": "^2.0.10",
    "@types/lodash": "4.14.118",
    "@types/node": "12.11.1",
    "angular-named-lazy-chunks-webpack-plugin": "^2.1.0",
    "base-href-webpack-plugin": "^3.0.1",
    "codelyzer": "6.0.0",
    "css-loader": "^6.3.0",
    "exports-loader": "^3.0.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "image-webpack-loader": "^8.0.1",
    "jasmine-core": "3.7.0",
    "jasmine-spec-reporter": "5.0.0",
    "karma": "6.3.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "3.0.2",
    "karma-jasmine": "4.0.0",
    "karma-jasmine-html-reporter": "1.5.0",
    "karma-read-json": "1.1.0",
    "loaders.css": "0.1.2",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "postcss-url": "^10.1.3",
    "protractor": "7.0.0",
    "sass": "^1.42.1",
    "sass-loader": "^12.1.0",
    "ts-loader": "^9.2.6",
    "ts-node": "8.3.0",
    "tslint": "6.1.0",
    "typescript": "4.2.3",
    "webdriver-manager": "10.2.5",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  }
}