NativeScript & Angular Code Sharing + Lazy Loaded Module Paths

Question

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:

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.

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. fireship.io/snippets/lazy-loaded-routes-angular-v8-ivy — Reactgular
– Reactgular, Commented May 26, 2019 at 14:47
On second thought, NativeScript might not support Angular 8 beta yet. — Reactgular
– Reactgular, Commented May 26, 2019 at 14:51
Possible duplicate of How to use same path in loadChildren for Nativescript and Angular? — Reactgular
– Reactgular, Commented May 26, 2019 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
– Wayne Riesterer, Commented May 26, 2019 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
– Reactgular, Commented May 26, 2019 at 15:00

Wayne Riesterer · Accepted Answer · 2019-05-26 15:25:03Z

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.

answered May 26, 2019 at 15:25

Wayne Riesterer

7817 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NativeScript & Angular Code Sharing + Lazy Loaded Module Paths

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related