|By Yakov Fain||
|March 10, 2016 02:00 AM EST||
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?
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.
- HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
- Book Excerpt: Introducing HTML5
- Using Ext JS, Servlets, JSON, MySQL and Tomcat on Fedora
- Cloud Expo 2011 New York: Application Development in the Cloud