From the Trenches of the Enterprise Software

Yakov Fain

Subscribe to Yakov Fain: eMailAlertsEmail Alerts
Get Yakov Fain: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: JavaScript, Internet of Things Journal

Article

Angular and TypeScript | @ThingsExpo @YFain #IoT #Angular #TypeScript

I was writing a small app in Angular 2 in TypeScript with the on-the-fly transpiling by SystemJS.

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:

ts1

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:

ts2

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. 

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