Ivy resource loader #24637

mhevery · 2018-06-23T02:06:17Z

feat(ivy): Support resource resolution in JIT mode.

Used to resolve resource URLs on @Component when used with JIT compilation.

@Component({
  selector: 'my-comp',
  templateUrl: 'my-comp.html', // This requires asynchronous resolution
})
class MyComponnent{
}

// Calling `renderComponent` will fail because `MyComponent`'s `@Compenent.templateUrl`
// needs to be resolved because `renderComponent` is synchronous process.
// renderComponent(MyComponent);

// Calling `resolveComponentResources` will resolve `@Compenent.templateUrl` into
// `@Compenent.template`, which would allow `renderComponent` to proceed in synchronous manner.
// Use browser's `fetch` function as the default resource resolution strategy.
resolveComponentResources(fetch).then(() => {
  // After resolution all URLs have been converted into strings.
  renderComponent(MyComponent);
});

alfaproject · 2018-06-23T02:34:55Z

Any reason not to use Angular's own HTTP implementation by default?

Toxicable · 2018-06-24T22:41:36Z

@alfaproject That would mean that Core would depend on Common already depends on Core, this would be a cyclic dependancy.

alxhub

Otherwise LGTM

alxhub · 2018-06-26T15:44:34Z

packages/core/src/metadata/resource_loading.ts

+ * URL. Browser's `fetch` method is a good default implementation.
+ */
+export function resolveComponentResources(
+    resourceResolver: (url: string) => Promise<string|Response>): Promise<null> {


Angular does not currently have a dependency on fetch, even via typings. It's not supported, for example, in IE < Edge.

What about removing Response from our public API typings and instead using the signature: (url: string) => Promise<string | { text(): Promise<string> }>. This fits fetch() without introducing a dependency on DOM typings.

Also, Promise<void> is the typical way of expressing that a function returns a Promise that has no meaning other than its resolution.

Good idea, done.

ngbot · 2018-06-26T18:18:29Z

I see that you just added the PR action: merge label, but the following checks are still failing:
     missing required status "code-review/pullapprove"
     status "ci/circleci: lint" is pending
     status "ci/circleci: build-packages-dist" is pending
     status "ci/circleci: test_ivy_aot" is pending
     status "google3" is pending
     status "ci/circleci: test_ivy_jit" is pending
     status "ci/circleci: test" is pending
     status "continuous-integration/travis-ci/pr" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

trotyl · 2018-06-27T08:51:02Z

packages/core/src/metadata/resource_loading.ts

+    styleUrls && styleUrls.forEach((styleUrl) => {
+      cachedResourceResolve(styleUrl).then((style) => {
+        if (!component.styles) component.styles = [];
+        component.styles.push(style);


This would reorder the styles according to response finish time rather than preserve the declared order, right?

Good catch, fixed and added a test.

alfaproject · 2018-06-27T21:20:20Z

packages/core/test/metadata/resource_loading_spec.ts

@@ -93,6 +93,27 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
         expect(resourceFetchCount).toBe(1);
       }));

+    fit('should keep order even if the resolution is out of order', await(async() => {


fit

P.S.: Do you need await? Thought jasmine supports promises now

mary-poppins · 2018-06-28T15:37:48Z

You can preview b48afdd at https://pr24637-b48afdd.ngbuilds.io/.

mary-poppins · 2018-06-28T16:57:27Z

You can preview 17c48ca at https://pr24637-17c48ca.ngbuilds.io/.

Example: ``` it('...', await(async() => { doSomething(); await asyncFn(); doSomethingAfter(); })); ```

Used to resolve resource URLs on `@Component` when used with JIT compilation. ``` @component({ selector: 'my-comp', templateUrl: 'my-comp.html', // This requires asynchronous resolution }) class MyComponnent{ } // Calling `renderComponent` will fail because `MyComponent`'s `@Compenent.templateUrl` // needs to be resolved because `renderComponent` is synchronous process. // renderComponent(MyComponent); // Calling `resolveComponentResources` will resolve `@Compenent.templateUrl` into // `@Compenent.template`, which would allow `renderComponent` to proceed in synchronous manner. // Use browser's `fetch` function as the default resource resolution strategy. resolveComponentResources(fetch).then(() => { // After resolution all URLs have been converted into strings. renderComponent(MyComponent); }); ```

mary-poppins · 2018-06-28T18:07:46Z

You can preview 7ec241b at https://pr24637-7ec241b.ngbuilds.io/.

Used to resolve resource URLs on `@Component` when used with JIT compilation. ``` @component({ selector: 'my-comp', templateUrl: 'my-comp.html', // This requires asynchronous resolution }) class MyComponnent{ } // Calling `renderComponent` will fail because `MyComponent`'s `@Compenent.templateUrl` // needs to be resolved because `renderComponent` is synchronous process. // renderComponent(MyComponent); // Calling `resolveComponentResources` will resolve `@Compenent.templateUrl` into // `@Compenent.template`, which would allow `renderComponent` to proceed in synchronous manner. // Use browser's `fetch` function as the default resource resolution strategy. resolveComponentResources(fetch).then(() => { // After resolution all URLs have been converted into strings. renderComponent(MyComponent); }); ``` PR Close #24637

alfaproject · 2018-06-29T05:59:20Z

packages/core/testing/src/jasmine_await.ts

+ * ```
+ *
+ */
+export function jasmineAwait(fn: () => Promise<any>):


FYI Jasmine 2.8 supports this natively

Is the async/await support in jasmine(exposed in this PR) only for the Ivy compiler? Or does this support also apply to the current AOT/JIT compilers? Wasn't sure why this was under the Ivy context.

@dman777 This API change has been reverted yesterday in e1c6fd5 so it doesn't really matter ;)

Oh, the readme for 6.1 shows otherwise. Is the readme in error?

@dman777 Oh man I was worried this ended up in 6.1 for a second. It has been reverted just before 6.1 was cut, so it has NOT been released. The changelog is generated automatically based on the conventional commits format, where apparently the revert commit hasn't cancelled the creation commit. So yes, the changelog is in error.

Ok, thanks for the heads up. I hope this goes back in soon. Now that Jasmine is testing the DOM there can be race conditions that are hard to test for.

angular-automatic-lock-bot · 2019-09-13T20:52:12Z

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.}

googlebot added the cla: yes label Jun 23, 2018

mhevery requested a review from alxhub June 23, 2018 02:06

alxhub approved these changes Jun 26, 2018

View reviewed changes

mhevery added action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release labels Jun 26, 2018

trotyl reviewed Jun 27, 2018

View reviewed changes

alfaproject reviewed Jun 27, 2018

View reviewed changes

mhevery added 2 commits June 28, 2018 13:56

feat(core): add support for using async/await with Jasmine

f6829ab

Example: ``` it('...', await(async() => { doSomething(); await asyncFn(); doSomethingAfter(); })); ```

mhevery force-pushed the ivy_resource_loader branch from 17c48ca to 7ec241b Compare June 28, 2018 17:58

mhevery closed this in 71100e6 Jun 28, 2018

alfaproject reviewed Jun 29, 2018

View reviewed changes

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ivy resource loader #24637

Ivy resource loader #24637

mhevery commented Jun 23, 2018

alfaproject commented Jun 23, 2018

Toxicable commented Jun 24, 2018

alxhub left a comment

alxhub Jun 26, 2018

mhevery Jun 26, 2018

ngbot bot commented Jun 26, 2018

trotyl Jun 27, 2018 •

edited

mhevery Jun 27, 2018

alfaproject Jun 27, 2018 •

edited

mary-poppins commented Jun 28, 2018

mary-poppins commented Jun 28, 2018

mary-poppins commented Jun 28, 2018

alfaproject Jun 29, 2018

mhevery Jul 2, 2018

dman777 Jul 26, 2018 •

edited

JoostK Jul 26, 2018

dman777 Jul 26, 2018

JoostK Jul 26, 2018

dman777 Jul 26, 2018

angular-automatic-lock-bot bot commented Sep 13, 2019

Ivy resource loader #24637

Ivy resource loader #24637

Conversation

mhevery commented Jun 23, 2018

alfaproject commented Jun 23, 2018

Toxicable commented Jun 24, 2018

alxhub left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngbot bot commented Jun 26, 2018

trotyl Jun 27, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alfaproject Jun 27, 2018 • edited

Choose a reason for hiding this comment

mary-poppins commented Jun 28, 2018

mary-poppins commented Jun 28, 2018

mary-poppins commented Jun 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dman777 Jul 26, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 13, 2019

trotyl Jun 27, 2018 •

edited

alfaproject Jun 27, 2018 •

edited

dman777 Jul 26, 2018 •

edited