title: No for InjectionToken Config in Angular Application after upgrading to webpack 4
body: <p>I recently upgraded from Webpack 2 to 4. Webpack compiles, and most of the application works fine. It seems to of broken part of the application. I receive the error </p>
  
  <pre><code>NullInjectorError: No provider for InjectionToken config!
  </code></pre>
  
  <p>My module.ts file is as follows </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { enableProdMode, Inject, Injector, ErrorHandler } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppComponent } from './app.component';
  import { WsBootstrapService } from '../services/bootstrap';
  import { WsBrandTypesService } from '../services/brandTypes';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
  import { FormsModule } from '@angular/forms';
  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
  import { HttpModule } from '@angular/http';
  import {HttpClientModule} from '@angular/common/http';
  import { BopisTabModule } from './bopis-tab/bopis-tab.module';
  import { BopisContainerComponent } from './bopis-tab/bopis-container/bopis-container.component';
  import { RewardsModule } from './rewards/rewards.module';
  import { RewardsComponent } from './rewards/rewards.component';
  import { TransactionHistoryComponent } from './rewards/transaction-history/transaction-history.component';
  import { wsdebugProvider, wsbackendProvider, $rootScopeProvider } from './upgrade/injectables';
  import { Ng1CcuiDirective } from './upgrade/components';
  
  import './downgrade/downgrade.injectables';
  import './downgrade/downgrade.components';
  import './rxjs-operators';
  import { UserService } from './services/user.service';
  import { StoreService } from './services/store.service';
  import { WindowRefService } from './services/window-ref.service';
  import { FeatureToggleService } from './services/feature-toggle.service';
  import { DateService } from './services/date.service';
  import { SpinnerService } from './services/spinner.service';
  import { AlertService } from './services/alert.service';
  import { ExceptionOverlayComponent } from './exception-overlay/exception-overlay.component';
  import { ExceptionOverlayService } from './services/exception-overlay.service';
  import { ObjToArrayPipe } from './pipes/obj-to-array.pipe';
  import { NgTwoErrorHandlerService } from './services/ng-two-error-handler.service';
  import { BopisCriticalCountService } from './bopis-tab/services/bopis-critical-count.service';
  
  class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
      // use only process the `/hero` url
      shouldProcessUrl(url: UrlTree) { return true }
      extract(url: UrlTree) { return url; }
      merge(url: UrlTree, whole: UrlTree) { return url; }
  }
  
  @NgModule({
      declarations: [
          AppComponent,
          Ng1CcuiDirective,
          ExceptionOverlayComponent,
          ObjToArrayPipe
      ],
      entryComponents: [
          AppComponent,
          RewardsComponent,
          TransactionHistoryComponent
      ],
      imports: [
          BrowserModule,
          FormsModule,
          UpgradeModule,
          RouterModule.forRoot([]),
          HttpModule,
          BopisTabModule,
          RewardsModule,
          HttpClientModule
      ],
      providers: [
          { provide: ErrorHandler, useClass: NgTwoErrorHandlerService },
          wsdebugProvider,
          wsbackendProvider,
          $rootScopeProvider,
          { provide: 'WsBootstrapService', useClass: WsBootstrapService },
          { provide: 'WsBrandTypeService', useClass: WsBrandTypesService },
          UserService,
          StoreService,
          WindowRefService,
          FeatureToggleService,
          DateService,
          SpinnerService,
          AlertService,
          ExceptionOverlayService,
          NgTwoErrorHandlerService,
          BopisCriticalCountService
      ]
  })
  
  export class AppModule {
      constructor( @Inject(UpgradeModule) private upgrade: UpgradeModule) {
      }
  
      ngDoBootstrap() {
          this.upgrade.bootstrap(document.body, ['wsframework']);
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The full error message is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>VM28381:4697 Error: StaticInjectorError(AppModule)[MaskService -&gt; InjectionToken config]: 
    StaticInjectorError(Platform: core)[MaskService -&gt; InjectionToken config]: 
      NullInjectorError: No provider for InjectionToken config!
      at _NullInjector.get (core.js:1224)
      at resolveToken (core.js:1522)
      at tryResolveToken (core.js:1464)
      at StaticInjector.get (core.js:1332)
      at resolveToken (core.js:1522)
      at tryResolveToken (core.js:1464)
      at StaticInjector.get (core.js:1332)
      at resolveNgModuleDep (core.js:11117)
      at NgModuleRef_.get (core.js:12350)
      at resolveDep (core.js:12840)</code></pre>
  </div>
  </div>
  </p>
  
  <p>My package.json file is as follows </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
      "name": "ccui",
      "version": "1.0.0",
      "private": true,
      "description": "Care center UI.",
      "scripts": {
          "postinstall": "npm rebuild node-sass",
          "test:ng:ci": "npm run jest:ng --  --coverage --ci",
          "test:ng:dev": "npm run jest:ng --  --watch",
          "test:wc:ci": "npm run jest:wc --  --coverage --ci",
          "test:wc:dev": "npm run jest:wc --  --watch",
          "test:ci": "npm-run-all test:wc:ci test:ng:ci",
          "jest:ng": "jest --config ./jest/config.json ",
          "jest:wc": "jest --config ./jest/config.wc.json ",
          "prejest:ng": "npm run templatecache",
          "test": "npm-run-all --parallel test:wc:dev test:ng:dev ",
          "test:mvn": "npm run test:ci",
          "lint:ng2": "ng lint",
          "lint:ng1": "eslint ng1",
          "lint": "npm-run-all lint:ng2 lint:ng1",
          "build-ccui": "npm run build:prod",
          "rm:dist": "rimraf dist",
          "prebuild:dev": "npm-run-all rm:dist concat",
          "build:dev": "webpack --env.build=dev --progress --profile --colors",
          "rm:index": "rimraf ./index.html",
          "predev": "npm-run-all rm:index concat",
          "dev": "npm-run-all --parallel concat:watch  dev:server ",
          "dev:server": "webpack-dev-server --env.build=dev  --port=4200 ",
          "prebuild:prod": "npm-run-all rm:dist concat",
          "build:prod": "webpack --env.build=prod --progress --profile --colors",
          "concat": "gulp concat",
          "concat:watch": "gulp concat:watch",
          "templatecache": "gulp templatecache",
          "precommit": "npm run jest:ng -- -o &amp;&amp; npm run jest:wc -- -o"
      },
      "engines": {
          "node": "8.1.0"
      },
      "keywords": [],
      "author": "WSI",
      "dependencies": {
          "@angular-devkit/core": "0.5.5",
          "@angular/animations": "5.2.9",
          "@angular/common": "5.2.9",
          "@angular/compiler": "5.2.9",
          "@angular/core": "5.2.10",
          "@angular/forms": "5.2.9",
          "@angular/http": "5.2.10",
          "@angular/platform-browser": "5.2.9",
          "@angular/platform-browser-dynamic": "5.2.9",
          "@angular/router": "5.2.9",
          "@angular/upgrade": "4.3.0",
          "@ngtools/webpack": "6.0.0-beta.8",
          "@webcomponents/webcomponentsjs": "1.0.22",
          "angular": "1.6.4",
          "angular-cookies": "1.6.4",
          "angular-i18n": "1.6.4",
          "angular-mocks": "1.6.4",
          "angular-route": "1.6.4",
          "angular-sanitize": "1.6.4",
          "angular-ui-mask": "1.8.7",
          "browser-split": "0.0.1",
          "class-list": "0.1.1",
          "core-js": "2.4.1",
          "font-awesome": "4.7.0",
          "html-element": "2.2.0",
          "identity-obj-proxy": "3.0.0",
          "jquery": "3.2.1",
          "lodash.clonedeep": "4.5.0",
          "lodash.flowright": "3.5.0",
          "lodash.intersection": "4.4.0",
          "lodash.isempty": "4.4.0",
          "lodash.isinteger": "4.0.4",
          "lodash.isplainobject": "4.0.6",
          "mitt": "1.1.3",
          "moment": "2.18.1",
          "moment-timezone": "0.5.13",
          "ngx-mask": "2.4.4",
          "npm": "5.8.0",
          "preact": "8.2.7",
          "primeng": "4.1.0",
          "raf": "3.4.0",
          "reflect-metadata": "0.1.10",
          "regenerator-runtime": "0.11.1",
          "rxjs": "5.5.2",
          "source-map-loader": "0.2.3",
          "webpack-cli": "2.0.13",
          "zone.js": "0.8.11"
      },
      "devDependencies": {
          "@angular-devkit/build-optimizer": "0.5.6",
          "@angular/cli": "1.7.2",
          "@angular/compiler-cli": "5.2.9",
          "@skatejs/ssr": "0.19.1",
          "@types/jasmine": "2.5.36",
          "@types/jest": "22.1.3",
          "@types/node": "6.0.73",
          "add-stream": "1.0.0",
          "babel-core": "6.26.0",
          "babel-loader": "7.1.2",
          "babel-plugin-root-import": "5.1.0",
          "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
          "babel-plugin-transform-react-jsx": "6.24.1",
          "babel-preset-env": "1.6.1",
          "babel-preset-es2015": "6.24.1",
          "babel-preset-stage-3": "6.24.1",
          "circular-dependency-plugin": "5.0.2",
          "codelyzer": "3.1.2",
          "copy-webpack-plugin": "4.5.1",
          "css-loader": "0.28.4",
          "eslint": "4.15.0",
          "eslint-plugin-angular": "3.1.1",
          "extract-text-webpack-plugin": "4.0.0-beta.0",
          "file-loader": "1.1.11",
          "gulp": "3.9.1",
          "gulp-angular-templatecache": "2.0.0",
          "gulp-concat": "2.6.1",
          "html-loader": "0.5.5",
          "html-webpack-plugin": "3.0.7",
          "husky": "0.14.3",
          "jasmine-marbles": "0.2.0",
          "jasmine-spec-reporter": "4.1.1",
          "jest": "21.2.1",
          "jest-preset-angular": "4.0.1",
          "jest-sonar-reporter": "1.3.0",
          "license-webpack-plugin": "1.3.1",
          "lodash": "4.17.4",
          "node-sass": "4.8.3",
          "npm-run-all": "4.1.2",
          "null-loader": "0.1.1",
          "postcss-loader": "2.1.3",
          "postcss-url": "7.3.2",
          "promise.prototype.finally": "3.0.0",
          "protractor": "4.0.14",
          "raw-loader": "0.5.1",
          "rimraf": "2.6.1",
          "sass-loader": "6.0.6",
          "script-loader": "0.7.2",
          "smart-banner-webpack-plugin": "3.0.1",
          "style-loader": "0.13.2",
          "ts-node": "3.0.6",
          "tslint": "5.4.3",
          "typescript": "2.4.2",
          "uglifyjs-webpack-plugin": "1.2.4",
          "webpack": "4.4.1",
          "webpack-dev-server": "3.1.1",
          "write-file-webpack-plugin": "4.2.0"
      },
      "repository": {},
      "jestSonar": {
          "reportPath": "coverage",
          "reportFile": "unit-tests.xml",
          "indent": 4
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I appreciate any and all help.</p>