angular 2 - How do you include javascript for a component?

Question

I am completely new to Angular, and I have started directly with Angular 2. One of the things that are great about Angular is that I can modularize every feature of my web page. Components have their own html and stylesheet.

But what about their own javascript file ? How can I incluse its own particular javascript file ? I have seen this SO question is the only way available is to use SystemJS ?

For example lets say that one Component uses the Google Maps API or one component uses a charting library, how is that handled ?

Eswar · Accepted Answer · 2016-11-09 07:01:23Z

1

I am using facebook sdk like below

FacebookService.ts modified from https://github.com/zyramedia/ng2-facebook-sdk. FacebookService file is partial, not pasting full file

analyze appendFacebook method to load external scripts globally but we are invoking when component requires, once external script loaded then we won't load it again as we are checking script id

@Injectable()
export class FacebookService {

    /**
     * This method is used to initialize and setup the SDK.
     * @param params
     */
    init(params: FacebookInitParams): Observable<any> {
        return new Observable(observer => {
            if (!window['fbAsyncInit']) {
                this.appendFacebook();
                window['fbAsyncInit'] = function() {
                    FB.init(params);
                    observer.next('FB initialized');
                    observer.complete();
                };
            } else {
                observer.next('FB initialized');
                observer.complete();
            }
      });

    }

    appendFacebook() {
        var js,
        id = 'facebook-jssdk',
        ref = document.getElementsByTagName('script')[0];

        if (document.getElementById(id)) {
            return;
        }

        js = document.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/sdk.js";

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

then in component.ts file

constructor(private facebookService: FacebookService) {}

loginByFacebook() {
    let facebookParams: FacebookInitParams = {
      appId: environment.facebookAppId,
      xfbml: true,
      version: 'v2.7'
    };

    let facebookSubscription = this.facebookService.init(facebookParams).mergeMap(data => {
        return this.facebookService.login({scope: "public_profile,user_friends,email"});
    }).subscribe((response: FacebookLoginResponse) => {
      console.log(response);
    }, error => {
      console.log(error);
    });
}

answered Nov 9, 2016 at 7:01

Eswar

4,9931 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ng.newbie Over a year ago

What if I don't have a .ts file ?

Eswar Over a year ago

we can create one component or directive to load external scripts, for example <append-script src="//connect.facebook.net/en_US/sdk.js" id="facebook-jssdk"></append-script> within AppendScript component we could append script to page and handle based on id

Gavin Haynes · Accepted Answer · 2016-11-09 04:26:39Z

0

In general, your app (the module) is considered to have one global set of dependencies. The way to handle this is to have all dependencies included before any of your app files.

With your example, your index.html would include the maps Javascript and the charts Javascript before it includes any component of the main application.

answered Nov 9, 2016 at 4:26

Gavin Haynes

2,08017 silver badges25 bronze badges

Collectives™ on Stack Overflow

angular 2 - How do you include javascript for a component?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related