Angular 2 - moving embedded plugin to service

Question

I am new to Angular 2, and am just learning how to include plugins. I am getting this error:

Uncaught Error: Can't resolve all parameters for SwitchClientComponent: ([object Object], [object Object], [object Object], [object Object], [object Object], [object Object], ?, ?)

when implementing crypto-js.

I'm sure it's because I haven't properly installed and referenced it.

I have an app.module.ts file (snipped for brevity):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER  } from '@angular/core';
import { FormsModule } from '@angular/forms';
...
import { MomentModule } from 'angular2-moment';
import { CryptoJS } from "crypto-js";

@NgModule({
    declarations: [
        AppComponent,
        ...
        SwitchClientComponent
    ],
    imports: [
        BrowserModule,
        ...
        StoreModule.provideStore({ appState: appStateReducer }),
    ],providers: [
    { provide: AppConfig, useFactory: serviceConfigFactory },
    SiteService,
    AppContext,
    { provide: APP_INITIALIZER, useFactory: AppContextLoader, deps: [AppContext], multi: true },
    EmployeeService,
    EncryptionService
],
    ...

})
export class AppModule { }

(I see an import line but no corresponding reference in the @NgModule...)

Here is where I'm trying to use it:

import { Injectable } from '@angular/core';
import { CryptoJS } from "crypto-js";

@Injectable()
export class EncryptionService {

    secretKey: string = "123";

    constructor() {
    }

    public setLocalStorage(storagePrefix : string, jsonObj) {
        localStorage.setItem(storagePrefix, this.encrypt(jsonObj));
    }

    encrypt(jsonObj) {
        return CryptoJS.AES.encrypt(JSON.stringify(jsonObj), this.secretKey);
    }
}

Here is the actual switch-client-component that is trying to utilize the service:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SiteService } from '../../services/site.service';
import { CompanyRoutes } from '../../features/company/company.routes';
import { AppContext } from '../../services/app.context';
import { SiteConfig } from '../../models/site/site.config';
import { AuthService } from '../../services/auth/auth.service';
import { EncryptionService } from '../../services/encryption.service';

@Component({
  selector: 'app-switch-client',
  templateUrl: './switch-client.component.html',
  styleUrls: ['./switch-client.component.scss']

})
export class SwitchClientComponent implements OnInit {
    availableClients : any[] = [];
    filterString: string = '';
    frequentClients: any[] = [];
    maxFrequentClients: number = 6;
    storagePrefix = 'AbilitiConnect-FrequentClients';

    constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService, EncryptionService
    ) {}


    ngOnInit() {
        this.availableClients = this.siteService.getAvailableClientCodes();
        //redirect the user to main page if there is onlu one client.
        if (this.availableClients == null || this.availableClients.length <= 1) {
            this.router.navigate(['/']);
        }
        this.purgeFrequentClients();
        this.frequentClients = this.getFrequentClients();
    }

    switchClient(client) {
        this.updateFrequentClient(client);
        this.appContext.switchClient(client.ClientCode)
            .subscribe((siteConfig: SiteConfig) => {
                this.companyRoutes.resetCompanyRoutes(siteConfig.clientCode, "/");
                this.router.navigate(['/']);
            });
    };

    updateFrequentClient(client) {
        var tempClientArr = [];
        tempClientArr = this.getFrequentClients();
        tempClientArr = tempClientArr.filter(item => item.Name !== client.Name);
        tempClientArr.unshift(client);
        tempClientArr = tempClientArr.slice(0, this.maxFrequentClients);
        this.encryptionService.setLocalStorage(this.storagePrefix, tempClientArr);
    };

    getFrequentClients() {
        return this.encryptionService.getLocalStorage(this.storagePrefix);
    };
    purgeFrequentClients() {
        this.encryptionService.setLocalStorage(this.storagePrefix, []);
    };
}

I don't know how to interpret that error.

Answer 1

Seems you have a typo

constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService, EncryptionService 
                               ^^^^^
                          you should change it to :
   ) {}

Correct code should look like

constructor(public auth: AuthService,
        private route: ActivatedRoute,
        private router: Router,
        private appContext: AppContext,
        private siteService: SiteService,
        private companyRoutes: CompanyRoutes,
        private encryptionService: EncryptionService
   ) {}