
By Yakov Fain | Article Rating: |
|
March 10, 2016 02:00 AM EST | Reads: |
768 |

Angular, TypeScript, SystemJS, and Browser Cache
I was writing a small app in Angular 2 in TypeScript with the on-the-fly transpiling by SystemJS.
I needed to implement a router that would switch between the Home and ProductDetail views in a single page app.
The root component had two links and was supposed to render either Home or ProductDetail components depending on which link the user clicks. Angular 2 offers a pretty elegant syntax for this:
Configure the router to map the component to a URL, and use property binding in the form of [router-link]. Nice and easy, isn't it?
Then I created a HomeComponent to render the text ‘Home Component' , copy-pasted the code into ProductDetailComponent and started the app in the browser. My app uses the on-the-fly TypeScript to JavaScript compilation offered by the module loader SystemJS.
Running the app properly rendered the text Home Component, but when I clicked on the second link, nothing happened - the text Home Component remained in the browser window. Opened the code of the ProductDetailComponent. Oops... Forgot to change the text for rendering while copy-pasting - it still had ‘Home Component'. No biggies. Replaced it with ‘Product Detail Component' and re-ran the app. Nothing changed. I still see Home Component no matter what link I click.
So what do we do with this nice syntax with Angular binding and TypeScript annotations? There is nothing to debug there. We need to debug the actual ES5 code that runs in the browser. Here's the snapshot of my Chrome browser's screen after I clicked on the Product Detail link with opened Dev Tools panel:
Note that Angular router properly formed the URL for the product view. The template property in the file product.ts has the right content: ‘Product Detail Component'. Now let's take a look at the content of the file product.ts!transpiiled, which was auto-generated by SystemJS:
This file was not regenerated and still has the ‘Home Component' in the template property! Apparently, changing the string content is not a good enough reason for SystemJS to re-run the TypeScript transpiler and the browser used its cached version. Running the same example in FireFox worked as expected - its cache was clean so fresh ES5 files were generated by SystemJS.
Chrome Dev Tools has an option Disable Cache while Dev Tools open, and this would clear the cache on the page refresh. But if you want the browser cache to be refreshed even if the Dev Tools are not open, add the following lines between the head tags in your HTML file:
Manning opened the MEAP program for our upcoming book "Angular 2 Development with TypeScript", where JSPM, SystemJS and TypeScript development is covered in greater details.
Published March 10, 2016 Reads 768
Copyright © 2016 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Yakov Fain
Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain
![]() Mar. 18, 2016 02:15 AM EDT Reads: 852 |
By Elizabeth White ![]() Mar. 18, 2016 02:00 AM EDT Reads: 738 |
By Elizabeth White ![]() Mar. 18, 2016 01:00 AM EDT Reads: 744 |
By Elizabeth White ![]() Mar. 18, 2016 12:00 AM EDT Reads: 775 |
By Liz McMillan ![]() Mar. 17, 2016 11:45 PM EDT Reads: 895 |
By Pat Romanski ![]() Mar. 17, 2016 11:30 PM EDT Reads: 825 |
By Liz McMillan ![]() Mar. 17, 2016 11:30 PM EDT Reads: 849 |
By Elizabeth White ![]() Mar. 17, 2016 11:00 PM EDT Reads: 610 |
By Elizabeth White ![]() Mar. 17, 2016 09:45 PM EDT Reads: 629 |
By Scott Allen ![]() Mar. 17, 2016 09:15 PM EDT Reads: 816 |
By Elizabeth White ![]() Mar. 17, 2016 02:30 PM EDT Reads: 335 |
By Liz McMillan ![]() Mar. 17, 2016 02:00 PM EDT Reads: 842 |
By Liz McMillan ![]() Mar. 17, 2016 12:30 PM EDT Reads: 1,031 |
By Elizabeth White ![]() Mar. 17, 2016 11:00 AM EDT Reads: 419 |
By Elizabeth White ![]() Mar. 17, 2016 09:30 AM EDT Reads: 809 |
By Elizabeth White ![]() Mar. 17, 2016 08:45 AM EDT Reads: 961 |
By Elizabeth White ![]() Mar. 17, 2016 08:30 AM EDT Reads: 953 |
By Pat Romanski ![]() Mar. 16, 2016 05:00 PM EDT Reads: 637 |
By Elizabeth White ![]() Mar. 14, 2016 09:00 AM EDT Reads: 881 |
By Liz McMillan ![]() Mar. 11, 2016 04:15 PM EST Reads: 532 |