Load external libraries from CDN with angular-cli - javascript

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

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.

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.

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.

Related

Angular 2 Bundling and Minification

I watch a lot of tutorials of angular 2, and I couldn't some questions:
1- Should I use webpack for minification and bundleling?
2- Should I minify and bundle the js of the components itselfs.
3- Should I minify and bundle the js services that the components expose e.g.
personService.js is used in person.ts?
4- What happens with the path
of the service I provide inside the component, now it will be in one
file located in another place? Should I change the path of the
service called in the component depending on if I'm in development o
production?
How are you currently handling module loading for your applications? I'm not as familiar with webpack, but SystemJS offers a builder/bundler that will do all of this for you then all you need to include in your html is the script for your bundled/built file.
I haven't used Webpack but SystemJS worked well for me. Gulp can be used to build, minify, and bundle all your code using a system.config.js to worry about the file locations of your source and dependencies.
Here is an example of Tour of Heroes where all the Typescript source is bundled into one JS file.
Angular CLI now makes all of this really easy, supporting bundling and minification (using WebPack underneath, but without any need to set it up), and Ahead-of-Time template compilation, which massively reduced the bundle size.
See: Angular 2: Reduce app size (in addition to bundling/minification)
It also sets up development and production environments, which you can import into components if you have different settings in dev vs. prod, and you can make your own custom environments and use those too.

Dynamically pull in dependencies for angular project

So I am working with a couple of different Angular starter kits, but I have yet to find one that automatically puts in the script src, for the vendor resources such as angular formly, bootstrap, etc., in the index.html. I am trying to make it so my dependencies in my module can work.
Anyone know of any good grunt or gulp build that would take care of this?
I believe grunt-wiredep is what you are looking for. It will inject your bower dependencies into your 'index.html'.
however if you are trying to include JS dependencies into a stand-alone angular module meant to be used with different HTML applications, you will need to concatenate those dependencies into a single deployable JS file. This can be easily done with grunt-contrib-uglify.

Does web essentials offer a way to use the bundled js file in production but individual js files in development?

The Setup:
I have a large SPA app using many JavaScript files that are bundled using Web Essentials bundling in Visual Studio 2013. I then include the minified js files generated by Web Essentials on my HTML page. This application does not use ASP.NET
The problem:
I would like to be able to distribute the HTML page with a single minified script referenced for production but the individual unminified scripts for development.
Reasons:
The minified scripts even with the map files make it difficult to debug. Variable and parameter names have been minified and thus the debugger does not match the source. Additionally, since everything is in one file, its hard to look at for development.
Current solution:
I have a grunt task that goes into my html file and modifies it such that the <script> tags are replaced. This has the con of growing with every file I add to the page.
Does web essentials offer a better solution than what I am currently doing that I might have simply overlooked?
You are mixing the bundling tool with the reference implementation.
Web Essentials 2013 builds bundles of compressed (minified) JavaScript, CSS, LESS, SASS and image files. Web Essentials should create the minified bundle regardless whether you are in Debug mode.
You are looking for a way to selectively reference minfied files in Release mode and originals in Debug. That may mean rather involved Razor coding to check for release version and render reference calls.
A better solution is to use ASP.NET Bundling and Minification.
It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified when debug="true"
The minified bundle will still exist if debug="true" in your Web.config. But at run-time, the framework will reference the originals files instead of the minified. Your Web.config is now responsible for maintaining which version of your assets are referenced.
Web Essential bundles are passive assets. There is no functionality in Web Essentials to distinguish between Release and Debug mode because that is a run-time action.
Note: Web Essentials 2015.0 has removed bundling and minification.
Important!
Web Essentials 2015 no longer contains features for bundling and
minifying of JS, CSS and HTML files as well as compiling LESS, Scss
and CoffeeScript files. Those features have been moved to their own
separate extensions that improves the features greatly
The common practice is to use the ASP.NET Bundler. This is another reason to get away from bundling with Web Essentials.
i ma not sure if Web-essentials can handle that scenario though
As per my current project experience below are the things i use to debug the code locally while development-
For local debugging if you are using the ASP.NET bundling feature and must have specified the file references in the BundleConfig.cs. You can enable the browser to Load each file as is by Setting the flag BundleTable.EnableOptimizations=true; in the Global.asax file. And we load the single bundle file to work on local environment
For Production we use the minified versions of the file references.
eg in your HTML you can have a check like this
#if(local){
#Scripts.Render("~/Scripts/src/BundleName");
}
else{
//Which is an partial HTML which contains the minified file references
Html.RenderPartial("ClientTemplates/MinifiedScripts");
}
Thanks
I have just used the Bundler/Minifier from here: https://github.com/madskristensen/BundlerMinifier
To help see the unbunded and unminified JS and CSS I have created a helper to render both depending on whether the web application is running with debug enabled.
see: https://bundlerminifierhelper.codeplex.com/
Example:
#Html.Bundle("/Content/Styles/Site.min.css")
#Html.Bundle("/Scripts/Scripts.min.js")
Note: Using relative paths, including the forward slash (/)
When debugging all the input files will be rendered out to the page, and when not debugging, the supplied path will be rendered out.

What is the general method for including plugins installed via Bower?

Imagine I've just used bower install angular-date-range-picker to install a plugin I want in the root directory of my project.
Now typically all of my js files (angular project) are sitting in a folder called js on on the root directory of the project.
Here's where I feel I'm missing something. How do I include my nice new plugin into my project without tracing back through every dependency the bower command installed? I typically include all my scripts on the index.html with tags. I've copied the plugin js file out of the bower_components folder and into my js folder (which I now feel is wrong).
If this is an acceptable way to link to plugins then should I be linking directly to the bower_components folder and how do I include all of that plugin's dependencies without literally writing a script tag for each one? (And how do I know what it depends on, there are other plugins in that bower_components folder for instance).
Apologies if this question doesn't make any sense, I'm obviously missing some very important workflow knowledge and I don't know how to phrase the question to find want I want with Google.
You should be writing a script tag for each one. In most cases, check the corresponding github repo to see what dependency libraries are needed. In addition to this, a hint to see what file you should be referencing in your script tag will have an extension of .min. .min is a minified version of the library that removes whitespace and replaces large variable names.
Once your application is ready for production, there are a couple things you can do.
You may want to move to a Content Delivery Network (CDN) instead of referencing your files locally. The advantage of this is you'll have a reliable host hosting your library files.
Another option is to use either Grunt or Gulp, which has the ability to combine all of your dependancy files into one file. The advantage of this is having a much quicker load time of loading one file instead of multiple.
Content Delivery Network - Wikipedia
Grunt - Homepage
Gulp - Homepage
Usually it's configured something like this:
<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->
to include script into index.html. Then during build process some grunt/gulp (grunt-usemin, for example) plugins can replace the entire section between <!-- build: --> comments with minified version of the files.
As said before, you can use Grunt with grunt-injector, it's been specially made for that and can be used to automatically inject bower dependencies into your index.html, as well as your other js/css files (you will need the wiredep dependency).
You will no longer have to worry about your files injection.

rake-pipeline or requirejs

I am about to start a new emberjs project and I cannot decide whether to use requirejs or rake-pipeline.
The ember advice seems to be to use the rake-pipeline.
Anybody any thoughts on either side of the argument?
If you want to load the dependencies dynamically after page load on an as-and-when-required basis then requirejs is the preferred option.
However if loading all the script when the page loads is not an issue for you (amount of javascript is small, or lot of javascript is required just for the rendering of content) then rails asset pipeline reduces a lot of boilerplate for you because even if you use require js you will eventually have to use r.js compiler to bundle all the dependencies into a single script. Rails does all of this concatanation and minification transparently behind the scenes without you having to do anything at all. Using the rails asset pipeline eases rolling deployment for you because in development scripts are all served as individual files without minification and in production scripts are served as minified and concatenated. This does not require you to run any build script or optimizer upon every change and you don't even have to modify anything in your HTML files. As long as you follow the sprockets specifications and specify the dependencies (which you have to do in case of requirejs too) everything works out of the box.
Also, Rails asset pipeline does not tie your client application to rails platform as sprockets (the dependency manager used behind in the rails pipeline) can be used independently without rails.
If however AMD compatibility is important for you (for example you are planning on using the same code on a NodeJS server as well as client, or are creating a distributable library) then requirejs is a great option.
You can also take a look at https://github.com/jwhitley/requirejs-rails/ which attempts to integrate requirejs into the rails pipeline. Please make sure that you have a reasonable level of familiarity with both requirejs and rails before you adopt this approach.

Categories

Resources