feat(core): provide support for relative assets for components

Assets defined for `templateUrl` and `styleUrls` can now be loaded in relative to where the component file is placed so long as the `moduleId` is set within the component annotation. Closes #5634 Closes #5634
2015-12-05 02:21:38 -08:00
parent bf484b19b3
commit db096a5e22
23 changed files with 327 additions and 23 deletions
@@ -0,0 +1,3 @@
+library playground.e2e_test.relative_assets.assets_spec;
+
+main() {}
@@ -0,0 +1,34 @@
+import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
+import {Promise} from 'angular2/src/facade/async';
+
+function waitForElement(selector) {
+  var EC = (<any>protractor).ExpectedConditions;
+  // Waits for the element with id 'abc' to be present on the dom.
+  browser.wait(EC.presenceOf($(selector)), 20000);
+}
+
+describe('relative assets relative-app', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'playground/src/relative_assets/';
+
+  it('should load in the templateUrl relative to the my-cmp component', () => {
+    browser.get(URL);
+
+    waitForElement('my-cmp .inner-container');
+    expect(element.all(by.css('my-cmp .inner-container')).count()).toEqual(1);
+  });
+
+  it('should load in the styleUrls relative to the my-cmp component', () => {
+    browser.get(URL);
+
+    waitForElement('my-cmp .inner-container');
+    var elem = element(by.css('my-cmp .inner-container'));
+    var width = browser.executeScript(function(e) {
+      return parseInt(window.getComputedStyle(e).width);
+    }, elem.getWebElement());
+
+    expect(width).toBe(432);
+  });
+});
@@ -31,6 +31,7 @@ transformers:
        - web/src/routing/index.dart
        - web/src/template_driven_forms/index.dart
        - web/src/zippy_component/index.dart
+        - web/src/relative_assets/index.dart
        - web/src/svg/index.dart
        - web/src/material/button/index.dart
        - web/src/material/checkbox/index.dart
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Relative URLs</title>
+<body>
+  <relative-app>
+    Loading...
+  </relative-app>
+
+  $SCRIPTS$
+</body>
+</html>
@@ -0,0 +1,19 @@
+import {bootstrap} from 'angular2/bootstrap';
+import {reflector} from 'angular2/src/core/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
+
+import {Renderer, ElementRef, Component, Directive, Injectable} from 'angular2/core';
+import {MyCmp} from './my_cmp/my_cmp';
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(RelativeApp);
+}
+
+@Component({
+  selector: 'relative-app',
+  directives: [MyCmp],
+  template: `component = <my-cmp></my-cmp>`,
+})
+export class RelativeApp {
+}
@@ -0,0 +1,9 @@
+import 'package:angular2/core.dart' show Component;
+
+@Component(
+  selector: 'my-cmp',
+  templateUrl: 'tpl.html',
+  styleUrls: const ['style.css']
+)
+class MyCmp {
+}
@@ -0,0 +1,5 @@
+import {Component} from 'angular2/core';
+@Component(
+    {selector: 'my-cmp', templateUrl: 'tpl.html', styleUrls: ['style.css'], moduleId: module.id})
+export class MyCmp {
+}
@@ -0,0 +1,12 @@
+:host {
+  background:red;
+  padding:1em;
+  display:block;
+  font-size:20px;
+  color:white;
+}
+
+.inner-container {
+  width:432px;
+  font-weight:bold;
+}
@@ -0,0 +1,3 @@
+<div class="inner-container">
+  my component content goes here
+</div>