I encountered an error while attempting to upgrade to the latest Angular version. The error occurred on my component when navigating to the URL /login.
The error message looked like this: ERROR Error: "Uncaught (in promise): Error: Can't resolve all parameters for LocalStorageService: (?).
The code in my pages/login/login.component is as follows:
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
) {}
In the pages/login/login.module file:
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 {}
In my app.module file:
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 {}
Do you see any issues with the way I'm importing or setting up services in my files? Or perhaps there is a syntax error in my component?
Here is the content of my package.json file:
{
"name": "kontrak-hukum-front-end",
"version": "0.0.0",
(package.json content continues as displayed in the original text)
}