TemplateCacheGenerator rewrites URLs

[antonmoiseev]

I use templateUrls written in this form:

@Component(templateUrl: 'packages/myapp/components/footer.html')

After generating template cache with TemplateCacheTransformer, URL turns into /packages/myapp/components/footer.html (notice leading slash), hence templates can't be matched against the cached keys and loaded from the server as individual HTTP requests.

[rkirov]

Try rewriting your urls to relative - templateUrl: 'footer.html'. The intention is for templateUrls when relative to be relative to the current .dart file. Behind the scenes we would transform the relative url to a /packages/.... url which would match what's in the cache.

That way your component can be turned into a library and consumed by many different apps. Without having to change templateUrl.

Take a look at our tests and feel free to contribute a test case that better matches your setup.

[jrote1]

Might have something to do with #1707

[antonmoiseev]

With 1.1.1 release we migrated all our templateUrl's to relative paths, so feel free to close the issue if you are not interested in this corner case.

[avstudios]

I've updated my app to angular 1.1.2 version. I use relative path templateUrl: 'app.html'. The file is in lib/component/ folder. I'm debugging it in WebStorm and Chromium is opening http://localhost:63342/my_app/web/index.html address. Then I have an error
GET http://localhost:63342/packages/my_app/component/app.html 404 (Not Found)

The problem is that app.html is in ``http://localhost:63342/my_app/web/packages/my_app/component/` folder.

I'm guessing it would work if WebStore served files from http://localhost:63342 address. Without my_app/web path. But not sure if that's possible with this editor.

[jrote1]

@avstudios I had the same issue is because they changed the default package root from 'packages/' to '/packages/' which broke our app as we don't run it in the root but in a sub folder. But can be fixed by adding this bining in your app module.

bind( ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls( true, packageRoot: 'packages/' ) );

[avstudios]

@jrote1 Thanks a lot for the solution. My app started working again.

[jrote1]

No problem, I raised an issue saying this is a breaking change and should be changed back but there has been no reply as of yet. #1707

[ashokdudhade]

@jrote1 Thank you. I was facing same issue and this fixed it.

[jrote1]

@ashokdudhade no problem happy to help

[avstudios]

@jrote1 I'm testing my app on dev server now and I found an issue in IE10+ browsers. They can't load images because the src attribute is not transformed to the right path. For instance i have:
<img src="../images/my_image.svg"> and instead of seeing
<img src="packages/my_app/images/my_image.svg"> in Internet Explorer I i have:
<img src="../images/my_image.svg">
All works fine if I set images as background image in css. Do you know how to make it work?

[jrote1]

@avstudios I have not come across this issue but if you can send me a link the some code that replicates I don't mind looking into it.

[avstudios]

I've cloned Chapter_06 example from https://github.com/angular/angular.dart.tutorial. Then updated pubspec.yaml to get the latest angular version. Then added:

• bind(ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls(true, packageRoot: 'packages/')); to main.dart file.
• <image src="../images/image.png" style="border: 1px solid black" /> to search_recipe.html file.
• image.png to images folder.

If you open http://dev.avstudios.com/dart_angular_example/ link in chrome then you will see the pictures.
But it won't work in IE. I've just found that there is same problem in Firefox and Safari.

[jrote1]

@avstudios thanks for that i'll look into it at somepoint today see if I can resolve the issue.

[avstudios]

@jrote1 I've just noticed the same problem also in Chrome if I use dynamic name:
<image src="../images/{{fileName}}" style="border: 1px solid black" /> Thanks for looking into it.

[jrote1]

@avstudios sorry for late reply have been really busy, I had a look and it seems like a bug as far as I can see I might be able to fix in the future if I have time but cannot guarantee when. But to fix your issue just use full urls relative to your main html file. Your lib folder would be: pakcages//

[avstudios]

@jrote1 Thanks for checking this. I'm displaying the images using background-image property in css at the moment. It's not perfect solution but works. Soon I need to run my app in Atom Shell and will check everything again. It would be great if you will find a time to fix it.

[TedSander]

Currently the default in angular.dart is to try to rewrite URLs in components relative to the type location. @avstudios it appears you don't want this functionality. In this case change the config to be:
ResourceResolverConfig.resolveRelativeUrls(false);

That will leave your URLs untouched.

Note: The reason the default is to try to rewrite URLs based on the type location is it makes the component reusable. Otherwise you have to know the context of where the component is going to be used in the web app. Which breaks re-usability. Imagine one developer created a component to live at /index.html and another wants to use the component at /app/index.html all of the sudden the resource URIs need to be different.