4.23.2017

Angular 2 webpack: WARNING in ./~/@angular/core/@angular/core.es5.js 5870:15-36 Critical dependency: the request of a dependency is an expression

Проблема с предупреждением о критической зависимости  (Critical dependency) может возникать как с angular 2 + webpack так и с angular 4 + webpack. Данная проблема в большинстве случаев связанна с контекстом вывоза и решается при помощи плагина ContextReplacementPlugin.

В своем проекте я использую следующее окружение, package.json:

"dependencies": {
  "@angular/common": "~4.0.0",
  "@angular/compiler": "~4.0.0",
  "@angular/compiler-cli": "~4.0.0",
  "@angular/core": "~4.0.0",
  "@angular/forms": "~4.0.0",
  "@angular/http": "~4.0.0",
  "@angular/platform-browser": "~4.0.0",
  "@angular/platform-browser-dynamic": "~4.0.0",
  "@angular/platform-server": "~4.0.0",
  "@angular/router": "~4.0.0",
  "@angular/tsc-wrapped": "~4.0.0",
  "@angular/upgrade": "~4.0.0",
  "@ngrx/core": "^1.2.0",
  "@ngrx/effects": "^2.0.3",
  "@ngrx/store": "^2.2.2",
  "angular-in-memory-web-api": "~0.3.1",
  "core-js": "^2.4.1",
  "rxjs": "5.0.1",
  "zone.js": "^0.8.4"},
"devDependencies": {
  "@types/core-js": "^0.9.41",
  "@types/jasmine": "2.5.36",
  "@types/node": "^6.0.45",
  "angular2-template-loader": "^0.6.0",
  "awesome-typescript-loader": "^3.0.4",
  "css-loader": "^0.26.1",
  "css-to-string-loader": "^0.1.2",
  "extract-text-webpack-plugin": "^2.1.0",
  "file-loader": "^0.9.0",
  "html-loader": "^0.4.4",
  "html-webpack-plugin": "^2.24.1",
  "jasmine": "~2.4.1",
  "jasmine-core": "~2.4.1",
  "karma": "^1.3.0",
  "karma-chrome-launcher": "^2.0.0",
  "karma-cli": "^1.0.1",
  "karma-jasmine": "^1.0.2",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-phantomjs-launcher": "^1.0.2",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "^2.0.1",
  "lodash": "^4.16.2",
  "node-sass": "^4.5.2",
  "null-loader": "^0.1.1",
  "phantomjs-prebuilt": "^2.1.7",
  "protractor": "~4.0.14",
  "raw-loader": "^0.5.1",
  "rimraf": "^2.5.4",
  "sass-loader": "^6.0.3",
  "source-map-loader": "^0.1.5",
  "style-loader": "^0.13.1",
  "tslint": "^3.15.1",
  "typescript": "~2.2.0",
  "uikit": "^3.0.0-beta.21",
  "webpack": "^2.4.1",
  "webpack-dev-server": "2.4.1",
  "webpack-merge": "^3.0.0"}

В моем случае первый раз проблема возникла когда я самостоятельно настраивал webpack.config, после чего я решил использовал готовый конфиг с сайта angular.io.


Но данная ошибка возникала даже в скачанном примере:








В поисках решения проблемы я нашел отличный модуль для старта приложения на angular 2/4 - angular 2 starter. Для меня сейчас там слишком много всего, и пока мне требуется решение чуть проще. Итого я решил, что нужно избавиться от данного предупреждения в той конфигурации которую предлагает сайт https://angular.io.

Решение

Рабочим кодом конфигурации для меня стала следующий код:

new webpack.ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)@angular/,
    helpers.root('./src'),
    {}
),