Linkedin with angular 2

Question

I am trying to integrate LinkedIn login in angular 2, all are working fine, but I am getting few errors in webpack, below is my code and the errors I am getting:

//linkedin.component.ts
constructor(private zone: NgZone) {
    window.angularComponentRef = {
        zone: this.zone, 
        componentFn: () => this.onLinkedInLoad(), 
        component: this
    };
}

ngOnInit() {
    // Creating script tag with linkedin src and required api details
    var linkedinEle = document.createElement('script');
    linkedinEle.type = 'text/javascript';
    linkedinEle.src = 'http://platform.linkedin.com/in.js';
    linkedinEle.innerHTML = 'api_key: xxxxxxxxxxx \n authorize: true \n onLoad: onLinkedInLoad';
    document.head.appendChild(linkedinEle);
}
// this will called when the linkedin api gets load
onLinkedInLoad() {
    IN.Event.on(IN, "auth", function() {
        console.log('Hell yeah');
    });
}

// index.html
function onLinkedInLoad() {
    window.angularComponentRef.zone.run(function () { window.angularComponentRef.componentFn()})
}

This all are working fine, but getting this errors in webpack:

1. Property 'angularComponentRef' does not exist on type 'Window'.
2. Cannot find name 'IN'.

So I thought I can resolve it by declaring it like declare let IN: any but no luck.

Lafleur

include your code in ngAfterViewInit instead ngOnInit – Deprecative

ok, but the problem still exist – Lafleur

move the things in your custruter into ngAfterViewInit – Deprecative

@DheerajAgrawal:are you fixed above issue? – Selaginella

Answer 1

Use window['angularComponentRef'] and window['IN'] instead or extend the window interface with this two fields

Goosefoot

Answer 2

It's a few months ago this question was asked, but I want to answer anyway, because we faced a similar situation in a project and even extracted our solution in a library we published on npm (https://github.com/evodeck/angular-linkedin-sdk).

1. it seems like you are loading the Linkedin SDK from a component in the ngOnInit. This would result in appending the script tag again on each time the component is loaded. Better use a service and do it in the constructor.

2. when using the window object within your application, inject it instead of using a global reference.

3. like mentioned already, use window['IN'] or window.IN if your window interface provides it or when using a window object of type any. But don't go with declare let IN: any.

I hope it helps. Don't mind using the source from our libraray.

Tucket

Answer 3

I wrote a medium article today, actually, over a similar issue. When angular released Angular Universal, it renders the template server side initially for performance and SEO reasons. In doing so, it loses reference to the window object.

Here is my article https://medium.com/@D_ofashandfire/i-love-hate-linkedin-oauth-2d7b602926c6

tldr, is that the SDK is really broken in this instance. I find that there it is much easier and simpler to use the REST API and then receive the auth code via server side implementation.

Here is an example component.

https://gist.github.com/dashcraft/4b3853e558eaec656123342d1174912c

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

@Component({
    selector: 'LinkedInExample',
    template: '<a [href]="url">LinkedIn</a>'
})

export class LinkedInExample{
    client_id: String = 'ClientStringHere';
    redirect_uri:String = encodeURI("http://localhost:5000/endpoint");
    url: String = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${this.client_id}&redirect_uri=${this.redirect_uri}`;
}

Of course you could put the properties inside of a constructor, OnInit or something similar, depending on your application flow.

This will authorize the user and return them back to your redirect uri with the param code, which you can parse via Angular 2 as an optional param on your route.

Galvan

i used above code but i received undefined code can you help me on that why i received undefined? – Selaginella