Although the library states that @abacritt/angularx-social-login:1 is compatible with Angular 13 and 14, it is not working for my Angular 13 project, this error is thrown after npm start, which seems to blame GoogleSigninButtonDirective for the error, and the reason being that it requires Angular 14:
./node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string 'C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\@abacritt\angularx-social-login\fesm2015\abacritt-angularx-social-login.mjs: This application
depends upon a library published using Angular version 14.2.0, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
457 | }
458 | GoogleSigninButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GoogleSigninButtonDirective, deps: [{ token: i0.ElementRef }, { token: SocialAuthService }], target: i0.ɵɵFactoryTarget.Directive });
> 459 | GoogleSigninButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: { type: "type", size: "size", text: "text", shape: "shape", theme: "theme", logo_alignment: "logo_alignment", width: "width", locale: "locale"9m }, ngImport: i0 });
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[1m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[1m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[1m^^^^^^^^^^^^^^^
460 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GoogleSigninButtonDirective, decorators: [{
461 | type: Directive,
462 | args: [{'
at run (C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\@babel\core\lib\transformation\index.js:37:15)
at run.next (<anonymous>)
at Function.transform (C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\@babel\core\lib\transform.js:25:41)
at transform.next (<anonymous>)
at step (C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\gensync\index.js:261:32)
at C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\gensync\index.js:273:13
at async.call.result.err.err (C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\gensync\index.js:223:11)
at C:\Vidoqui\Repositories\vidoqui-frontend2\node_modules\gensync\index.js:37:40
Error: node_modules/@abacritt/angularx-social-login/directives/google-signin-button.directive.d.ts:15:18 - error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).
15 static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, { "type": "type"; "size": "size"; "text": "text"; "shape": "shape"; "theme": "theme"; "logo_alignment": "logo_alignment"; "width": "width"; "locale": "locale"; }, {}, never, never, false>;
A little more of context, I followed the documentation to install @abacritt/angularx-social-login:1, which requires the following:
npm i @abacritt/angularx-social-loginAppModule, import the SocialLoginModule and add providers (in my case I just need the GoogleLoginProvider)<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button> in the component template/html where I want the google button to showSnippet of my AppModule
@NgModule({
declarations: [
...
],
imports: [
...
SocialLoginModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'clientId'
)
}
],
onError: (err) => {
console.error(err);
}
} as SocialAuthServiceConfig,
}
],
bootstrap: [...]
})
Snippet of my package.json
{
"name": "xxxxxx",
"version": "x.x.x",
"scripts": {
...
},
"private": true,
"dependencies": {
"@abacritt/angularx-social-login": "^1.2.5",
"@angular/animations": "~13.3.11",
"@angular/cdk": "~13.3.9",
"@angular/common": "~13.3.11",
"@angular/compiler": "~13.3.11",
"@angular/core": "~13.3.11",
"@angular/forms": "~13.3.11",
"@angular/platform-browser": "~13.3.11",
"@angular/platform-browser-dynamic": "~13.3.11",
"@angular/router": "~13.3.11",
...
},
"devDependencies": {
...
}
}
I have tried to install the dependency adding the --legacy-peers-dep flag, as stated in this github issue comment (Although it seems to be a solution for angularx-social-login:4 and NOT for @abacritt/angularx-social-login:1, which is newer). That is, using npm i @abacritt/angularx-social-login --legacy-peer-deps, but it is still not working.
I also tried to use version 1.1 instead of 1.2. Because 1.1 was made before adding support for Angular 14. This version (1.1) do work. The installation is different though. And the problem is it seems to be communicating with Google in a way that will be deprecated in March 31, 2023, so is not a very solid solution
Despite what the outdated documentation says, the last version of the library that works with Angular 13 was version 1.2.3. In version 1.2.4, they start building using Angular 14.2.0, dropping backwards compatibility for Angular 13. (See: the commit the caused the problem, and the stale bug about it.)
It seems you have three choices:
Use version 1.2.3 of the plugin, which is the final version that supports Angular 13. You can install it via npm install @abacritt/[email protected] --save
Upgrade your project to Angular 14.
Use a different plugin.