Troubleshooting TS2345 Error when building Loopback 4 application with JWT Authentication

user_11677478 0
Viewed 331

I'm try to integrate JWT authentication into my loopback 4 application. Right now I've been following the documentation here and the shopping tutorial, but I'm getting a strange build error when I'm registering my authentication strategy.

Here's my application.ts:

export class Application extends BootMixin(
  ServiceMixin(RepositoryMixin(RestApplication)),
) {
  constructor(options?: ApplicationConfig) {
    super(options);

    this.setUpBindings();

    this.component(AuthenticationComponent);
    registerAuthenticationStrategy(this, JWTAuthenticationStrategy);
    this.sequence(MySequence);

    // Set up default home page
    this.static('/', path.join(__dirname, '../public'));

    this.component(RestExplorerComponent);

    this.projectRoot = __dirname;
    // Customize @loopback/boot Booter Conventions here
    this.bootOptions = {
      controllers: {
        // Customize ControllerBooter Conventions here
        dirs: ['controllers'],
        extensions: ['.controller.js'],
        nested: true,
      },
    };
  }

  setUpBindings(): void {
    // my bindings
  }
}

The build script in my package.json (using @loopback/build)

"build": "lb-tsc -p tsconfig.build.json --target es2017 --outDir dist"

Here's the error I'm getting:

npm run build =>

src/application.ts:71:33 - error TS2345: Argument of type 'this' is not assignable to parameter of type 'Context'.
  Type 'Application' is not assignable to type 'Context'.
    Property 'registry' is protected but type 'Context' is not a class derived from 'Context'.

registerAuthenticationStrategy(this, JWTAuthenticationStrategy);

I am on Windows 10 using powershell.

loopbackjs jwt-auth
2 Answers

I also had this same problem. I was able to resolve by updating the @ loopback / context dependency to the latest version through the command:

npm install --save @loopback/context

With the updated dependency the error disappears.

user_118315420

I found an answer here where you change registerAuthenticationStrategy(this, JWTAuthenticationStrategy); to registerAuthenticationStrategy(this as any, JWTAuthenticationStrategy); 

export class Application extends BootMixin(
  ServiceMixin(RepositoryMixin(RestApplication)),
) {
  constructor(options?: ApplicationConfig) {
    super(options);

    this.setUpBindings();

    this.component(AuthenticationComponent);
    registerAuthenticationStrategy(this as any, JWTAuthenticationStrategy);
    this.sequence(MySequence);

    // Set up default home page
    this.static('/', path.join(__dirname, '../public'));

    this.component(RestExplorerComponent);

    this.projectRoot = __dirname;
    // Customize @loopback/boot Booter Conventions here
    this.bootOptions = {
      controllers: {
        // Customize ControllerBooter Conventions here
        dirs: ['controllers'],
        extensions: ['.controller.js'],
        nested: true,
      },
    };
  }

  setUpBindings(): void {
    // my bindings
  }
}

This fix worked for me.

user_6731050
Related