0

I am trying to do code sharing between angular web and mobile app using NativeScript Schematics. Here is my code structure

Code Structure

I have used [(ngModel)] in mobile specific HTML file and i have also imported NgFormsModule in my authentication.module.tns.ts which is NativeScript specific module file. However when i debug, i don't see NativeScriptFormsModule getting loaded. Also i am getting below error while running the app

Error: No value accessor for form control with unspecified name attribute

Here is my code of AuthenticationModule (authentication.module.tns.ts)

@NgModule({
  declarations: [
    ...componentDeclarations
  ],
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    NativeScriptLocalizeModule,
    AuthenticationRoutingModule,
    ...importsDeclarations
  ],
  providers: [
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AuthenticationModule { }

Please note that my imports and declaration arrays are empty at this moment are created to take care of future imports.

One more strange issue that i have noticed with this is that if i import AuthenticationRoutingModule directly, then it gets loaded properly. However if i import it via importsDeclarations, it does not get loaded.

Similarly i am also using nativescript-localize plugin for localizing strings. I have created src/i18n/en.default.ts file. However i keep getting message that

'/project/src/i18n' is empty: nothing to localize

I even tried renaming file to en.default.tns.ts. However no luck. Both these issues look like the way nativescript-schematics load the files. Can someone please let me know on what is going wrong here?

EDIT

I did further debugging on this issue and looks like it is the issue due to webpack not able to load required modules. I have sample code at

https://github.com/phatakrajan/ns-codeshare-ui

Rajan Phatak
  • 524
  • 8
  • 24

1 Answers1

0

You will have to import NativeScriptFormsModule which will internally import NgFormsModule too.

Also the localised files should be JSON not TS, 

src
  | i18n
      | en.json           <-- english language
      | fr.default.json   <-- french language (default)
      | es.js
Manoj
  • 21,753
  • 3
  • 20
  • 41
  • I already have imported that module in authentication.module.tns.ts. I have added my code in post now. Also nativescript-localize module suggests that file format should be either json or .js. Ideally .ts file gets transpiled into .js file when i create a NativeScript mobile app. Same file does not work here. Why so? – Rajan Phatak Apr 24 '19 at 13:52
  • You should have NativeScriptFormsModule in a shared module, if you have included it in authentication module it will be available only to authentication module. Also, I don't think your localized TS files will be included for compilation unless you setup your webpack, the default configuration will pickup only the required files, the ones those have import statements in code. – Manoj Apr 24 '19 at 14:11
  • Same file was working when i had created pure NativeScript + Angular project.... One important difference that i have seen is that the commands are not generating transpiled .js files. Any specific reason that you are aware of? – Rajan Phatak Apr 24 '19 at 14:40
  • I have shared sample code for Module load issue in NativeScript code sharing. – Rajan Phatak Apr 25 '19 at 05:50
  • If you are using `--bundle` then webpack smartly bundles the app with only required files. If you had not used `--bundle` then it's handled bit differently, it compiles all the files in the folder. Using `--bundle` is recommended and will be default in the future release. – Manoj Apr 25 '19 at 06:11