升级到 webpack 4 后,Angular 应用程序中的 InjectionToken 配置没有

2024-04-24

我最近从 Webpack 2 升级到 4。Webpack 可以编译,并且大多数应用程序都可以正常工作。看来应用程序的一部分已损坏。我收到错误

NullInjectorError: No provider for InjectionToken config!

我的module.ts文件如下

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

}

完整的错误消息是

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)

我的package.json文件如下

{
    "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 && 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
    }
}

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


纵观ngx-mask库,似乎您忘记使用导入库forRoot()版本来设置config提供者认为MaskService需要。将其添加到您的AppModule应该解决它(根据图书馆的文档 https://github.com/JsDaddy/ngx-mask/blob/develop/README.md):

import {NgxMaskModule} from 'ngx-mask';

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

注:options参数是可选的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

升级到 webpack 4 后,Angular 应用程序中的 InjectionToken 配置没有 的相关文章

随机推荐