Nativescript-angular: NativeScript forms doesn't work in lazy loaded modules

[chrillewoodz]

I've done A LOT of digging now and it seems like you guys have some problems with lazy loaded modules because NOTHING seems to work in them. FormBuilder works in the app.component.html/ts files but as soon as I put the very same code in a lazy loaded module it stops working. The FormBuilder values aren't getting populated despite the values changing inside the text fields.

The ActionBar is not getting picked up either, can't change title, put a go back button or anything inside a lazy loaded module. I haven't tried more stuff but I'm assuming that they will break as well based on these recent findings.

I tried downloading this repo which has a working FormBuilder example set up:

https://github.com/skywidesoft/ns-formcontrol-demo

It works, BUT, then I tried moving the very same code into a lazy loaded module and it stops working.

I use this to lazy load the module with a string (this is provided in the app.module.ts:

providers: [
    {
      provide: NgModuleFactoryLoader, 
      useClass: NSModuleFactoryLoader
    }
]

Here is my example app that uses lazy loading:

https://github.com/andresfleat/native-app/tree/sprint1

Look inside the +login module for the code that isn't working, or +register.

Please take a look at this as quick as possible so that me and others with the similar issues can move forward in our development instead of tearing our eyes out, cheers. If you need more info let me know and I'll try to provide it.

[tsonevn]

Hi @chrillewoodz,
Thank you for reporting this issue.
I tested this case and unfortunately I have to confirm that this is a real issue while using lazy loading and nativescript-angular/forms.
We will research what is causing this behavior. For further info, you could keep track on the issue.

[chrillewoodz]

Ok that really is unfortunate, I hope this gets resolved as quickly as possible.

[chrillewoodz]

@tsonevn Now I have the same problem even without lazy loading..

[tsonevn]

Hi @chrillewoodz,
Could you provide sample project, where the problem could be reproduced, which could be debugged locally?

[sis0k0]

Hi @chrillewoodz,

The reason that the forms were not working is that the NativeScriptForms module wasn't imported in the lazy loaded module. Since the module is lazy loaded and not imported by another one, it doesn't inherit the modules imported in the parent module (AppModule in the case).
I forked the native-app repo you provided and made the required fixes. Check out the last two commits with their commit messages here. Feel free to ping me on NativeScript community slack if you have any questions :)

[chrillewoodz]

@sis0k0 Did you also manage to solve the action bar problem?

[sis0k0]

Here is a working example in our sdk-examples of using action bar within lazy loaded module:
https://github.com/NativeScript/nativescript-sdk-examples-ng/tree/release/app/ui-category/action-bar

[chrillewoodz]

@sis0k0 Thank you so much! Action bar started working automatically once I'd fixed the issues with the module imports. Now we can really get this project going :D

[nikis]

Its very unclear how to use form* directives at all and i think its good to give details and examples in documentation.

[rohanrichards]

All of these links appear dead and I now have the same issue, can anyone help me out?

[vidrepar]

Hey @rohanrichards, you should import NativeScriptCommonModule into any lazy loaded module.

A simple shared.module.ts which would be imported into every lazy loaded module would look like this:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { NativeScriptCommonModule } from '../../node_modules/nativescript-angular/common';

@NgModule({
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    ReactiveFormsModule,
  ],
  declarations: [],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class SharedModule { }

And ActionBar starts working... :)

[jeffswitzer]

A bunch of my [(ngModel)] broke after migrating to lazy loading. For me I was under the impression that having the following in my main module (not lazy loaded):

imports: [
    NativeScriptFormsModule
]

implied that it didn't have to be in each of the lazy loaded modules. This seems to not be the case as adding

imports: [
    NativeScriptFormsModule
]

to each of the lazy loaded modules fixed things. Anyways, it would help if the docs clarified what's required or how this works.