I have been working through the Angular 2 guide example that can be found at this location: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=preview .
On my desktop this application works fine with the inline template code but as soon as I change to the templateUrl file I have a problem. I have found that this is due to issues with the combination of WebStorm, Jade and Angular 2. See blogs at: https://youtrack.jetbrains.com/issue/WEB-19625 and https://github.com/donpark/html2jade/issues/102.
One problem is that the html2jade converter changes attributes to lower case. Below is an example where the Link of routerlink and the Link & Active of routerlinkactive have the first letters changed to lower case. I can fix that by changing attribute names as required.
The problem I cannot fix is the WebStorm errors that show up as indicated in the blogs. In my case the last routerlink line, the one for contacts, causes a syntax error.
I would like to continue to use both WebStorm and Jade. Does anyone know of a work around or if other versions of either product fix these problems?
h1.title Angular Router
nav
a(routerlink='/crisis-center', routerlinkactive='active') Crisis Center
a(routerlink='/heroes', routerlinkactive='active') Heroes
a(routerlink='/admin', routerlinkactive='active') Admin
a(routerlink='/login', routerlinkactive='active') Login
a([routerlink]="[{ outlets: { popup: ['compose'] } }]") Contact
router-outlet
router-outlet(name='popup')