Angular-cli: How to add a 3rd party remote dependency?

[lfv89]

Google's guideline for the "Google Sign" recommends this approach:

<script src="https://apis.google.com/js/platform.js" async defer></script>

I read in another issue though that when using an angular-cli project nothing should be directly added to the index.html, but adding a remote script in the angular-cli.json doesn't seems to work:

ERROR in multi scripts
Module not found: Error: Can't resolve '/Users/foo/Projects/bar/src/https:/apis.google.com/js/platform.js' in '/Users/foo/Projects/bar/node_modules/angular-cli/models'
 @ multi scripts

I already read the README.md but found nothing on this.

What is the recommended approach for this scenario?

Thank you.

[coryrylan]

I would think for this use case you would want the script directly in the index. Since the script is probably cache controlled by the host domain (Google) you would want the request to always come directly from their server. Ex: Google Analytics. If the code is called directly from your angular app that would be different and you would need to bundle it into the app.

[lfv89]

Facebook recommends this approach:

 (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

Maybe angular-cli could accept a new remoteScripts field and also do this behind the scenes?

[filipesilva]

For remote scripts it's perfectly fine to put whatever in index.html. Problematic tags are the ones that reference local files only.

That being, we have talked about allowing for a difference between dev/prod scripts, and them being loaded local/cdn. See https://github.com/angular/angular-cli/issues/2796 regarding this topic.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}