ngBuild issue

[ghost]

Hi there,

I get the following error when running ngBuild.

ERROR in Error encountered resolving symbol values statically. Calling function 'Angular2SocialLoginModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/....../src/app/app.module.ts, resolving symbol AppModule in /Users/...../src/app/app.module.ts

A quick google search bought back this which seems to suggest the library isn't publishing meta data? I have to be honest and say I have little idea of what it all means

https://github.com/angular/angular-cli/issues/3707

Any help would be greatly appreciated

Thanks

[ssljivic]

@kurapatijayaram I also face the same issue. Do you have any clue?

[kurapatijayaram]

Hi @leighmillard @ssljivic, there is an active open issue regarding this. Even I am trying to figure it, If you guys found any solution means? let me know.

Thank You.

[ghost]

Hi @kurapatijayaram it would be awesome if you can fix it. Apart from the metadata suggestion I have no idea.

Cheers

[ssljivic]

@kurapatijayaram the only thing I found working is to have no other function calls within the static method that return the moduleWithProviders. That means that the logic that loads google, fb and linkedin scripts should be called outside of the NgModule imports. For example:

...
@NgModule()
export class Angular2SocialLoginModule{
    static loadProvidersScripts(config: IProviders): void {
        const loadProvidersScripts: Object = {
            google: (info) => {
                let d = document, gJs, ref = d.getElementsByTagName('script')[0];
                gJs = d.createElement('script');
                gJs.async = true;
                gJs.src = "//apis.google.com/js/platform.js";

                gJs.onload = function() {
                    gapi.load('auth2', function() {
                        gapi.auth2.init({
                        client_id: info["clientId"],
                        scope: 'email'
                        })
                    })
                }
                ref.parentNode.insertBefore(gJs, ref);
            },

            linkedin: (info) => {
                let lIN, d = document, ref = d.getElementsByTagName('script')[0];
                lIN = d.createElement('script');
                lIN.async = false;
                lIN.src = "//platform.linkedin.com/in.js";
                lIN.text = ("api_key: " + info["clientId"]).replace("\"", "");
                ref.parentNode.insertBefore(lIN, ref);
            },

            facebook: (info) => {
                let d = document, fbJs, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                fbJs = d.createElement('script');
                fbJs.id = id;
                fbJs.async = true;
                fbJs.src = "//connect.facebook.net/en_US/sdk.js";

                fbJs.onload = function() {
                    FB.init({
                        appId: info["clientId"],
                        status: true,
                        cookie: true,
                        xfbml: true,
                        version: info["apiVersion"]
                    });
                };

                ref.parentNode.insertBefore(fbJs, ref);
            }
        };

        Object.keys(config).forEach((provider) => {
            loadProvidersScripts[provider](config[provider]);
        });
    }

    static forRoot(): ModuleWithProviders{
        return {
            ngModule: SocialAuthModule,
            providers: [SocialAuthService]
        }
    }
}

and then use it like:

@NgModule({
  imports: [ 
              BrowserModule,
              Angular2SocialLoginModule.forRoot()
          ],
  declarations: [AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { 
  constructor(){}
}

Angular2SocialLoginModule.loadProvidersScripts(providers);

The issue is due to AoT and there are some guidelines on how to create AoT compatible module. However, I am far from understanding all those guidelines.

Hope the above will be of some help.

[ghost]

Thanks @kurapatijayaram does this work for both ng serve and ng build? I was having intermittent issues with serve but was unable to do a build even once.

I did try with ng build -prod --aot false but it still had issues with the library.

I will update and test shortly and let you know

[ssljivic]

The above works for both ng serve and ng build.

For more details please take a look at these issues:

• https://github.com/angular/angular/issues/11262
• https://github.com/AngularClass/angular2-webpack-starter/issues/1316

[ghost]

Sorry, @ssljivic I mentioned the wrong user! Awesome work on this, I'll go with your fix as I need to present to a client today and this is a major stumbling block.

[ghost]

@ssljivic I am getting the following error when updating my app.module.ts

Property 'forRoot' does not exist on type 'typeof Angular2SocialLoginModule'.

I've not really delved into modules in ng2 yet, can you expand on what is above the following in your workaround?

... @NgModule() export class Angular2SocialLoginModule{

[ssljivic]

Hi @kurapatijayaram , any plans on resolving this issue?

[kpsrinivas]

@ssljivic took me some time to understand the AOT. Just give me time to fix this. Thanks for the tip too. Can you tell me you cli version if possible.

[ssljivic]

It is @angular/cli: 1.0.0

[ghost]

@kpsrinivas Has there been any progress made with this?

[kurapatijayaram]

Issue fixed. Use v3.0.0 https://github.com/heresy/angular2-social-login/tree/v3.0.0