Base URL support in templates and stylesheets

[mhevery]

GOAL

Add support to the template/stylesheets for base URL so that components can refer to resources in relative paths.

Problem

-- components
  +-- zippy.ts
  +-- zippy.html
  +-- zippy.css
  +-- zippy.gif

where:

zippy.ts

@Component()
@View({
  moduleId: module.id, // see #2383
  templateUrl: 'zippy.html',
  styleUrls: ['zippy.css']
})
class Zippy {}

zippy.html

...
<!-- THIS WILL NOT WORK -->
<img src="zippy.gif">

<!-- WE NEED TO SUPPORT THIS -->
<img src="$baseUrl/zippy.gif">
...

selector {
  backround-url: 'zippy.gif', # DOES NOT WORK
  backround-url: '$baseUrl/zippy.gif', # WORKS
}

Why prefix $baseUrl and not do it automatically?

We need to mark attributes that take relative urls in html files explicitly, as we don't know which attributes are urls and which ones are not.
Also, in html files we could have something like <img src="$baseUrl/{{img}}.gif">

Solution

• Compute the baseUrl from the module, see Relative URL support in annotations #2383
• search template and stylsheets for $baseUrl and replace with URL form the module

[rolandjitsu]

Will this solve the issue of resolving the path for a template relative to the component instead of writing the full path?
E.g.:

@Component({
    selector: 'app'
})
@View({
    templateUrl: 'components/app/app.html',
    directives: []
})
class App {}

vs.

@Component({
    selector: 'app'
})

@View({
    templateUrl: './app.html',
    directives: []
})
class App {}

[mhevery]

@rolandjitsu you are looking for #2383

[mhevery]

FYI @vicb updated the description

[rolandjitsu]

@mhevery thanks, both this one and the other you pasted are great ideas :)

[rolandjitsu]

@mhevery I just had a thought while playing with components. Whenever I load a stylesheet within a template using <style>@import "app.css";</style>, I experience some flickering. I suppose that is due to the delay of the stylings being loaded and then applied to the DOM.

If so, the current proposal, will it fix this issue? Otherwise may I suggest delaying DOM injection until the styles have been loaded to avoid this flickering (there is a very obvious delay, e.g. the text is black for a few milliseconds and then suddenly it changes to the color the styling says it should be)?

[mhevery]

@rolandjitsu see #1694

[vicb]

@rolandjitsu

I experience some flickering

This will be fixed with by #2563 fixing #1694

[vicb]

@mhevery do we actually need this for css ? we already resolve url(...) and url('./path') is much nicer than '$baseUrl/path' IMO.

[vicb]

As indicated in my comment above, I'm not sure if this issue makes sense for styles. Html should be enough.

[naomiblack]

@tbosch can you pick this one up from @vicb or reassign?

[alxhub]

I've determined how I'm going to do this - $basePath will be string-replaced into the HTML string during ViewLoader._loadHtml with the relative base path of the template file (if loaded from a template URI) or the component (if the template is inlined).

[adamduren]

Does this feature still exist? I tried it in a component I am building and get a 404 with the $baseUrl not substituted.

[adamduren]

@alxhub

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}