error TS1005: ':' expected in Angular 9 project - SecureStoragePlugin.set({key, value})

[nicolasrosado]

Try : SecureStoragePlugin.set({key, value}) In an angular 9 project, execute ng build command and error "TS1005: ':' expected" occur.

How I can fix it ? I already tried all ts lint exclusion like :

• ts no check
• ts ignore
• exclude configuration in ts lint file and angular configuration file

Thanks in advance for your return !

[martinkasa]

@nicolasrosado Can you post whole file content? This seems like syntax error, not problem of the plugin.

[nicolasrosado]

Sure please find below the entire file content :

import {Injectable} from '@angular/core';

import 'capacitor-secure-storage-plugin';
import {Plugins} from '@capacitor/core';

const { SecureStoragePlugin } = Plugins;

@Injectable()
export class SecurityCredentialsService {
  credentials: any;
  secureStorage: any;

  constructor() {}

  async storeCredentials(username: string, password: string): Promise<any> {
    return new Promise((resolve, reject) => {

      SecureStoragePlugin.set({'username', username})
        .then(success => {
          console.log('username saved : ', success);

          SecureStoragePlugin.set({'password', password})
            .then(success => {
              console.log('password saved : ', success);
              resolve();
            })
            .catch(error => {
              console.log('Error setting key password in store ', error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error setting key username in store ', error);
          reject(error);
        });
      resolve();
    });
  }

  async loadCredentials(): Promise<any> {
    return new Promise((resolve, reject) => {
      let creds: any = {};

      SecureStoragePlugin.get({'username'})
        .then(username => {
          console.log('username loaded : ', username);

          SecureStoragePlugin.get({'password'})
            .then(password => {
              creds.username = username;
              creds.password = password;
              console.log('credentials loaded');
              resolve(creds);
            })
            .catch(error => {
              console.log('Error getting password', error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error getting username', error);
          resolve(error);
        });
    });
  }

  async removeCredentials(): Promise<any> {
    return new Promise((resolve, reject) => {

      SecureStoragePlugin.remove({'username'})
        .then(usernameKey => {
          console.log('username Removed ' + usernameKey);

          SecureStoragePlugin.remove({'password'})
            .then(passwordKey => {
              console.log('password Removed ' + passwordKey);
              resolve();
            })
            .catch(error => {
              console.log('Error removing key password ' + error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error removing key username' + error);
          reject(error);
        });

      resolve();
    });
  }
}

[nicolasrosado]

Please find below the typescript error during ng build :

ng build

ERROR in src/app/services/auth/security-credentials.service.ts:18:42 - error TS1005: ':' expected.

18       SecureStoragePlugin.set({'username', username})
                                            ~
src/app/services/auth/security-credentials..service.ts:22:46 - error TS1005: ':' expected.

22           SecureStoragePlugin.set({'password', password})
                                                ~
src/app/services/auth/security-credentials.service.ts:44:42 - error TS1005: ':' expected.

44       SecureStoragePlugin.get({'username'})
                                            ~
src/app/services/auth/security-credentials.service.ts:49:46 - error TS1005: ':' expected.

49           SecureStoragePlugin.get({'password'})
                                                ~
src/app/services/auth/security-credentials.service.ts:71:45 - error TS1005: ':' expected.

71       SecureStoragePlugin.remove({'username'})
                                               ~
src/app/services/auth/security-credentials.service.ts:75:49 - error TS1005: ':' expected.

75           SecureStoragePlugin.remove({'password'})
                                                   ~

[nicolasrosado]

Another way to pass options arguments ?

[martinkasa]

Keys in parameter object are key and value, so you have to use this names, so in your case to set "username" you should do this:

SecureStoragePlugin.set({key: 'username', value: username})

in example in documentation you can see, key and value are defined at the top, so that is why you can use shorter version, which would be in your case

const key = 'username';
const value = username;
SecureStoragePlugin.set({key, value})

[nicolasrosado]

Thanks for you help ! please find below the entire content file with no TS error :) :

import {Injectable} from '@angular/core';

import 'capacitor-secure-storage-plugin';
import {Plugins} from '@capacitor/core';

const { SecureStoragePlugin } = Plugins;

@Injectable()
export class SecurityCredentialsService {
  credentials: any;
  secureStorage: any;

  constructor() {}

  async storeCredentials(username: string, password: string): Promise<any> {
    return new Promise((resolve, reject) => {

      SecureStoragePlugin.set( { key: 'username', value: username })
        .then(success => {
          console.log('username saved : ', success);

          SecureStoragePlugin.set({ key: 'password', value: password })
            .then(success => {
              console.log('password saved : ', success);
              resolve();
            })
            .catch(error => {
              console.log('Error setting key password in store ', error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error setting key username in store ', error);
          reject(error);
        });
      resolve();
    });
  }

  async loadCredentials(): Promise<any> {
    return new Promise((resolve, reject) => {
      let creds: any = {};

      SecureStoragePlugin.get({ key: 'username' })
        .then(username => {
          console.log('username loaded : ', username);

          SecureStoragePlugin.get({ key: 'password' })
            .then(password => {
              creds.username = username;
              creds.password = password;
              console.log('credentials loaded');
              resolve(creds);
            })
            .catch(error => {
              console.log('Error getting password', error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error getting username', error);
          resolve(error);
        });
    });
  }

  async removeCredentials(): Promise<any> {
    return new Promise((resolve, reject) => {

      SecureStoragePlugin.remove({ key: 'username' })
        .then(usernameKey => {
          console.log('username Removed ' + usernameKey);

          SecureStoragePlugin.remove({ key: 'password' })
            .then(passwordKey => {
              console.log('password Removed ' + passwordKey);
              resolve();
            })
            .catch(error => {
              console.log('Error removing key password ' + error);
              reject(error);
            });
        })
        .catch(error => {
          console.log('Error removing key username' + error);
          reject(error);
        });

      resolve();
    });
  }
}