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:
- Adding the dependency with
npm i @abacritt/angularx-social-login
- In
AppModule, import the SocialLoginModule and add providers (in my case I just need the GoogleLoginProvider)
- Use
<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button> in the component template/html where I want the google button to show
Snippet 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
Copyright Notice：Content Author:「David Alberici」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/74638394/angular-directive-required-to-implement-googlesigninbuttondirective-in-abacritt