1

I have a NativeScript/Angular application that uses code sharing.

To make my project more organized, I have created a core folder that contains a sub-folder for routing:

enter image description here

Routes are defined in app.common.ts:

export const appRoutes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  {
    path: 'products',
    loadChildren: '../products/products.module#ProductsModule'
  }
]

Of particular interest is the module path shown in the following property:

loadChildren: '../products/products.module#ProductsModule'

Serving this in the browser using ng serve -o works fine.

Bundling this to run on Android using tns run android --bundle doesn't work as it can't find the module.

If I change the path to ~/app/products/products.module#ProductsModule, the Android app then runs, but the web application can't find the module.

If I then leave the file watcher running for the Android build and change the path back to ../products/products.module#ProductsModule, both Android and web work fine.

I don't want to move my routing files back to the src folder. I am also reluctant to include any hacks such as platform-driven path string mangling.

If you have any explanations as to why this is happening and/or a robust fix that isn't 'hacky', I'd be keen to hear it.

Wayne Riesterer
  • 791
  • 7
  • 13
  • 1
    This has been fixed in Angular 8. Lazy modules are now imported using a resolver function. I know this isn't the answer you wanted, but I'll keep looking for an Angular 7 solution. https://fireship.io/snippets/lazy-loaded-routes-angular-v8-ivy/ – Reactgular May 26 '19 at 14:47
  • On second thought, NativeScript might not support Angular 8 beta yet. – Reactgular May 26 '19 at 14:51
  • Possible duplicate of [How to use same path in loadChildren for Nativescript and Angular?](https://stackoverflow.com/questions/54361588/how-to-use-same-path-in-loadchildren-for-nativescript-and-angular) – Reactgular May 26 '19 at 14:52
  • Geez, things move fast. I can work around it until I upgrade it to use Angular 8. Thanks heaps for the heads up @cgTag ! – Wayne Riesterer May 26 '19 at 14:54
  • Take a look at the duplicate that I found. I think that will work for you, and I didn't even know you could do this in Angular. If that works it should have been the standard way of doing it. I don't like writing the lazy paths for loadChildren. – Reactgular May 26 '19 at 15:00
  • I checked out the duplicate and it didn't work for either platform. I'll post in that thread, but the module would have to be imported before calling it, so I'm not sure if that still constitutes lazy loading? – Wayne Riesterer May 26 '19 at 15:03
  • Yeah, I'm not sure either. It only imports the declaration but it might mess up tree shaking of the bundles. – Reactgular May 26 '19 at 16:10

1 Answers1

1

The problem was stemming from some quirks regarding the file watchers. When I change the path to the following, both platforms work fine:

../../products/products.module#ProductsModule

The reason I didn't select this path from the outset is because I used ~/app/products/products.module#ProductsModule to begin with and edited this to get the web build to work while the Android file watcher was still running.

With both the Android and web file watchers terminated and the path adjusted to the one provided above, they both work.

Wayne Riesterer
  • 791
  • 7
  • 13