Troubleshooting TS2345 Error when building Loopback 4 application with JWT Authentication - loopbackjs

Question

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.

Answer 1

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.

Answer 2

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.