fix(detached-loader): completely deatch components

[edusperoni]

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/nativescript-angular/blob/master/DevelopmentWorkflow.md#running-the-tests
• Tests for the changes are included.

What is the current behavior?

Detached Loader (DetachedContainer) creates components in place, attaching to a detached ProxyViewContainer and then moving the native views to their appropriate position:

Application
|----AppComponent
|      |---------- Component1
|                       |---------- ListView1
|                       |---------- DetachedContainer (not actually added to the DOM!)
|                                        |---------- ModalView/ListView item/etc (Ng view attached to DetachedContainer, native view attached to modal window/ListView1)

What is the new behavior?

Detached Loader will instantiate components without adding them to the DOM at all, but instead attaching the angular view to the ApplicationRef (enabling change detection). This also fixes issues where modals opened inside a OnPush component would not be CD.

This approach mimics the @angular/cdk approach (portals and DomPortalOutlet).

Application
|----AppComponent
|      |---------- Component1
|                       |---------- ListView1
|                       |---------- DetachedContainer (not actually added to the DOM! Here for compatibility reasons)
|--- ModalView/ListView item/etc (native view attached to modal window/ListView1)

This doesn't fix the root cause of #2256, but should fix most of the issues until the root is fixed (createComponent function of ViewContainerRef).

Fixes #2256.

[bellalMohamed]

Just updated to 10.1.3 and tested, unfortunately it doesn't fix #2256 I'm still facing the same issue

[NathanWalker]

@bellalMohamed that issue was closed by accident upon merging - 10.1.3 only fixes a modal binding issue as well as the ngIf ordering issue - we’re still investigating that final issue with navigation but anticipate it being solved by Tuesday.

[bellalMohamed]

@NathanWalker no worries, what do you think caused this issue?

[edusperoni]

Turns out this is my bad. I forgot to handle the way the component is created using an external factory (

nativescript-angular/nativescript-angular/common/detached-loader.ts

Line 52 in c2eaef5

return this.containerRef.createComponent(factory, this.containerRef.length, this.containerRef.injector, null);

).

Oops.

I'll get to it first thing in the morning. The reason modal worked and navigation didn't is because navigation calls that function specifically to create pages.