未捕获（在promise中）：错误：无法解析LocalStorageService的所有参数

Question

我试图升级到最新的Angular，但我在组件上得到了错误，并转到URL/login

它类似于：ERROR ERROR：“uncatted（在promise中）：ERROR：不能解析LocalStorageService：（？）的所有参数。

import { Component, OnInit } from "@angular/core";
import { LocalStorageService } from "ngx-webstorage";
import { Router } from "@angular/router";
import { NgForm } from "@angular/forms";
import {
  SnotifyService,
  SnotifyPosition,
  SnotifyToastConfig
} from "ng-snotify";

import { AuthenticationService } 
  constructor(
    private authenticationService: AuthenticationService,
    private router: Router,
    private localStorageService: LocalStorageService,
    private snotifyService: SnotifyService
  ) {}

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CommonModule } from "@angular/common";
import { LoginComponent } from "./login.component";
import { AuthService } from "../../../services/base-services/auth.service";
import { AuthenticationService } from "../../../services/authentication.service";
import { SnotifyModule, SnotifyService, ToastDefaults } from "ng-snotify";
import { FormsModule } from "@angular/forms";
import { LocalStorageService } from "ngx-webstorage";

export const LoginRoutes: Routes = [
  {
    path: "",
    data: {
      breadcrumb: "Login"
    },
    children: [
      {
        path: "",
        component: LoginComponent,
        data: {
          breadcrumb: "Login"
        }
      }
    ]
  }
];

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(LoginRoutes),
    SnotifyModule,
    FormsModule
  ],
  providers: [
    LocalStorageService,
    AuthenticationService,
    AuthService,
    SnotifyService,
    { provide: "SnotifyToastConfig", useValue: ToastDefaults }
  ]
})
export class LoginModule {}

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AuthComponent } from "./layout/auth/auth.component";
import { HttpClientModule } from "@angular/common/http";
import { AuthGuardService } from "./services/base-services/auth-guard.service";
import { AuthenticationService } from "./services/authentication.service";
import { BreadcrumbsComponent } from "./layout/admin/breadcrumbs/breadcrumbs.component";
import { FormsModule } from "@angular/forms";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, AuthComponent, BreadcrumbsComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule, HttpClientModule],
  providers: [AuthGuardService, AuthenticationService],
  bootstrap: [AppComponent]
})
export class AppModule {}

在我的文件上导入和放入服务有问题吗？？或者我的组件上缺少语法？？

我的package.json

{
  "name": "kontrak-hukum-front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^8.0.0-rc.4",
    "@angular/common": "^8.0.0-rc.4",
    "@angular/compiler": "^8.0.0-rc.4",
    "@angular/core": "^8.0.0-rc.4",
    "@angular/forms": "^8.0.0-rc.4",
    "@angular/platform-browser": "^8.0.0-rc.4",
    "@angular/platform-browser-dynamic": "^8.0.0-rc.4",
    "@angular/platform-server": "^8.0.0-rc.4",
    "@angular/router": "^8.0.0-rc.4",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
    "@ng-select/ng-select": "^2.20.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@swimlane/ngx-datatable": "^14.0.0",
    "@types/googlemaps": "^3.36.0",
    "angular-2-local-storage": "^3.0.2",
    "angular-froala-wysiwyg": "^3.0.0-beta.1",
    "angular-io-slimscroll": "^2.3.3",
    "angular2-chartjs": "^0.5.1",
    "angular2-datatable": "^0.6.0",
    "angular2-material-datepicker": "^0.5.0",
    "angular2-notifications": "^2.0.0",
    "angular2-wizard": "^0.4.0",
    "bootstrap": "^4.3.1",
    "c3": "^0.7.0",
    "core-js": "^3.1.2",
    "css-animator": "^2.3.1",
    "d3": "^5.9.2",
    "echarts": "^4.2.1",
    "famfamfam-flags": "^1.0.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "jquery-sparkline": "^2.4.0",
    "ng-auto-complete": "^4.1.7",
    "ng-click-outside": "^4.0.0",
    "ng-snotify": "^4.3.1",
    "ng2-auto-complete": "^0.12.0",
    "ng2-ckeditor": "^1.2.2",
    "ng2-currency-mask": "^5.3.1",
    "ng2-file-upload": "^1.3.0",
    "ng2-google-charts": "^4.0.0",
    "ng2-nvd3": "^2.0.0",
    "ng2-order-pipe": "^0.1.5",
    "ng2-search-filter": "^0.5.1",
    "ng2-toasty": "^4.0.3",
    "ng2-ui-switch": "^1.0.2",
    "ng2-validation": "^4.2.0",
    "ngx-bootstrap": "^4.3.0",
    "ngx-chips": "^2.0.0-beta.0",
    "ngx-color-picker": "^7.5.0",
    "ngx-echarts": "^4.1.1",
    "ngx-order-pipe": "^2.0.2",
    "ngx-pagination": "^3.2.1",
    "ngx-quill": "^5.1.0",
    "ngx-quill-editor": "^2.2.2",
    "ngx-webstorage": "^3.0.2",
    "npm": "^6.9.0",
    "peity": "^3.3.0",
    "rxjs": "^6.5.2",
    "screenfull": "^4.2.0",
    "squeezebox": "^1.4.1",
    "sweetalert2": "^8.11.4",
    "ti-icons": "^0.1.2",
    "tslib": "^1.9.0",
    "wijmo": "^5.20191.606",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0-rc.4",
    "@angular/cli": "^8.0.0-rc.4",
    "@angular/compiler-cli": "^8.0.0-rc.4",
    "@angular/language-service": "^8.0.0-rc.4",
    "@types/jasmine": "~3.3.12",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.2",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.1.0",
    "tslint": "~5.11.0",
    "typescript": "3.4.5"
  }
}

Answer 1

您的LocalStorageService有一个未满足的依赖项。您需要将该依赖项添加到login.module中。

正如你所说；LocalStorageService是一个外部包。

与其提供LocalStorageService自己，不如导入模块。可能是LocalStorageModule，您可以考虑将其放在app.module中，以便为本地范围的模块提供服务。

import {NgxWebstorageModule} from 'ngx-webstorage';

@NgModule({
    declarations: [...],
    imports: [
        ...,
        NgxWebstorageModule.forRoot(),
        ...
    ]
})

那么您不必自己提供服务，您只需在构造函数()中使用它，它就会被注入。