升级到 webpack 4 后，Angular 应用程序中的 InjectionToken 配置为否

Question

我最近从 Webpack 2 升级到 4。Webpack 编译，并且大部分应用程序运行良好。它似乎是应用程序的损坏部分。我收到错误

NullInjectorError: No provider for InjectionToken config!

我的module.ts文件如下

NullInjectorError: No provider for InjectionToken config!

完整的错误信息是

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']);
    }

}

我的package.json文件如下

VM28381:4697 Error: StaticInjectorError(AppModule)[MaskService -> InjectionToken config]: 
  StaticInjectorError(Platform: core)[MaskService -> 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)

我感谢任何和所有的帮助。

Answer 1

查看ngx-mask库，您似乎忘记使用forRoot()版本导入库以设置所需的config提供程序MaskService。将此添加到您的AppModule应该解决它（根据库的文档）：

import {NgxMaskModule} from 'ngx-mask';

@NgModule({
  (...)
  imports: [
    NgxMaskModule.forRoot(options)
  ]
  (...)
})

注意：该options参数是可选的。