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 theCLA.
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 aOnPush 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.

fix(detached-loader): completely deatch components

acec4f7

cla-botbot added the cla: yes label

Sep 20, 2020

chore: fix lint

f75ab45

NathanWalker merged commit623d2f7 intoNativeScript:master

Sep 21, 2020

Copy link

Contributor

bellalMohamed commentedSep 21, 2020

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

Copy link

Contributor

NathanWalker commentedSep 21, 2020

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

Copy link

Contributor

bellalMohamed commentedSep 21, 2020

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

Copy link

CollaboratorAuthor

edusperoni commentedSep 21, 2020

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 inc2eaef5

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