29

I would like to use the angular-cli to build an app that bundles my app code but does not include the Angular2 framework or other large external JavaScript libraries in the bundled code. I would like to load these libraries from a CDN when the page loads. Is there a way to do this?

Also, is there a way to do this while preserving the benefits of a local build where only the parts of the Angular2 framework that I am using gets loaded?

I saw this question, but it was for SystemJS and I don't think it applies to Angular-cli: How to load angular2 using CDN and SystemJS

Cœur
  • 37,241
  • 25
  • 195
  • 267
Chris
  • 1,978
  • 3
  • 23
  • 35
  • Hi Chris - I was wondering if the below answer had helped you? If so would you please be able to mark it as an accepted answer and award the bounty. This will gain you repo points and help others in the future. – Ben Cameron Feb 03 '17 at 10:08
  • 3
    This is so sad that in 2017, we're talking about how to use CDN for the most famous google javascript framework. And we even don't have an answer for it. This is just sad. – Milad Feb 04 '17 at 09:40
  • @BenCameron: The bounty was from me. I awarded it to the answer that answered the actual question best. The other answers are great as well but not quite to the point of loading *external* libraries from CDN – Daniel Hilgarth Feb 04 '17 at 17:06
  • 2
    @Milad it looks like in 2017 we don't need to include the entirety of libraries/frameworks anymore. Instead, our tools extract our own custom subsets of them automatically. Seems more rad than sad to me. – adamdport Apr 20 '17 at 18:43

3 Answers3

13

You simply need to add the appropriate <script src=""> tags pointing to the CDN to the index.html file. Remember to remove the .js files from angular-cli.json so they don't get bundled with the app.

Currently, you can't do that for the Angular 2 js files itself, they are automatically bundled with your app. Though the latest updates enable the web servers and browsers to cache the vendor files, so they don't get redownloaded on every visist to your app but only when the hash changes.

Alexander Ciesielski
  • 10,506
  • 5
  • 45
  • 66
  • 1
    Is there any way to keep the type information? I have for example jQuery types in devDependencies, but I couldn't find a way to "import" it and still have ng build (with aot) to stop complaining. what am I missing? :) – Eran Medan Apr 11 '17 at 19:37
  • You should probably `declare` it in a TS file as a global variable to be able to use it without compiler complaining. – JoannaFalkowska Sep 03 '18 at 12:54
  • this doesn't work with `ng serve` dude, because ng serve doesn't use your index.html file –  Dec 13 '18 at 01:15
9

When creating an application with Angular, version 2 or greater, uses a build system that only includes the portions of the Angular platform you use. Templates can be compiled at build time, allowing the build process to remove the template compiler from your bundled payload. Finally the build process does tree-shaking with the help of static analysis of your code, which further removes from the payload bundle unused portions of the platform.

If you provide Angular from a CDN, it would need to be the kitchen sink, the entire platform. This would be huge and a detriment to your application.

You are much better off allowing angular-cli bundle the portions of the platform that you need. As the WebPack treeshaking plugin improves your bundle sizes will get smaller.

Martin
  • 15,820
  • 4
  • 47
  • 56
  • 2
    This is the most helpful answer because it explains why you can't find and shouldn't be looking for CDNs for Angular 2+ – Precastic Mar 20 '18 at 09:44
  • Excellent points to consider, but not unequivocally true. The biggest cost of many network transactions is the connection itself, not the download speed. If you have 10 different Angular apps, and you can load them all faster after visiting a single one – even at the cost of downloading the entire Angular runtime – then it still might be worthwhile. And if you're using a public CDN version, such as at cdnjs.com, you might even benefit from your user having visited _other_ sites that use it – much like web font loads are expedited when the whole internet share’s Google’s font server. – Sharky Apr 23 '21 at 18:35
5

I would add your whole app to a CDN such as Akamai. For example (depending on how your app is structured) you could cache files such as the ones in the below list...

  • index.html
  • List item
  • application.css
  • application.js
  • templates.js
  • vendors.css
  • vendors.js

This would give even better performance than just caching the Angular framework files on the CDN.

Ben Cameron
  • 4,335
  • 6
  • 51
  • 77