chore: ng v8 new loadChildren import syntax

[rynop]

PR Checklist

• 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.
  ^ This change was simple. If rejected not wasting much of my time.
• You have signed the CLA.
• All existing tests are passing:
  ^ I'm not sure how to run the cli unit tests against a non-master branch of nativescript-app-templates. CLI is hard-coded to pull from a release on npm (from what I could tell).

What is the current behavior?

NS Angular templates use loadChildren string syntax in lazy loaded routes.

What is the new behavior?

Angular version 8 deprecated the string syntax in favor of dynamic import. Full details @ https://angular.io/guide/deprecations#loadchildren-string-syntax

Old:

loadChildren: './lazy/lazy.module#LazyModule'

New:

 loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

[dtopuzov]

test

[rynop]

@dtopuzov does test kick off your CI?

If I click on details I can't see why the test failed (goes to a intranet jenkins box it looks like)

Are there docs someplace that describe how I can run the tests locally?

[dtopuzov]

Hi @rynop,

Yes test keyword trigger our internal CI (it is not public).

For some of the repos (like NativeScript/NativeScript) we already expose results publicly, but still not implemented for this templates.

Tests fails because we fail to build NG apps with proposed changes, stack trace is something like this:

11:26:17 Entrypoint bundle = snapshot-entry.js vendor.js bundle.js
11:26:17 Entrypoint snapshot-entry = snapshot-entry.js vendor.js
11:26:17   [2] ../node_modules/rxjs/_esm5/internal/Observable.js + 1 modules 4.75 KiB {1} [built]
11:26:17       |    2 modules
11:26:17  [40] ../node_modules/@angular/router/fesm5/router.js + 15 modules 249 KiB {1} [built]
11:26:17       |    16 modules
11:26:17  [52] ../node_modules/rxjs/_esm5/internal/util/subscribeTo.js + 3 modules 3.42 KiB {1} [built]
11:26:17       |    4 modules
11:26:17  [85] ../node_modules/rxjs/_esm5/internal/scheduled/scheduled.js + 5 modules 5.14 KiB {1} [built]
11:26:17       |    6 modules
11:26:17  [96] ./package.json 100 bytes {0} {2} [optional] [built]
11:26:17 [116] ../node_modules/rxjs/_esm5/index.js + 43 modules 78.1 KiB {1} [built]
11:26:17       |    44 modules
11:26:17 [190] ../$$_lazy_route_resource lazy namespace object 160 bytes {0} [built]
11:26:17 [204] ./main.ts 1.07 KiB {2} [built]
11:26:17 [241] ../platforms/android/app/snapshot-entry.js 323 bytes {0} [built]
11:26:17 [244] ./app.css 1.04 KiB {0} [built]
11:26:17 [266] ../node_modules/rxjs/_esm5/internal/operators/share.js + 1 modules 1.92 KiB {1} [built]
11:26:17       |    2 modules
11:26:17     + 336 hidden modules
11:26:17 
11:26:17 ERROR in src/app/app-routing.module.ts(7,41): error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
11:26:17 
11:26:17 
11:26:17 Executing webpack failed with exit code 2.

Steps to reproduce:

npm pack some of the NG tempalates in tgz file
tns create TestApp --template <tgz-file-from-step-above>
tns build android (or tns run android)

It looks like we are not quite ready for esNext.

[rynop]

That error means your test is not pulling in the update I made to compilerOptions.module from tsconfig.tns.json. Specifically the value needs to be "module": "esNext".

Here is a simple way to re-produce (and fix) the error:

tns create ns-tabs --template tns-template-tab-navigation-ng

Open up app-routing.module.ts and update the home module lazy load to look like this:

loadChildren: () => import(`~/app/home/home.module`).then(m => m.HomeModule),

Execute tns run ios|android and you'll get the Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext' error.

Now update tsconfig.tns.json setting "module": "esNext". Re-run tns run ios|android and error will be gone.

[dtopuzov]

Hi @rynop,

Reason for failing tests is that we run update scripts of nativescript-dev-webpack and those scripts get back es2015.

In order to get it working even after update, we need also this PR:
NativeScript/nativescript-dev-webpack#1006

[rynop]

oh, strange. ok thanks.

[sis0k0]

test

[manoldonev]

test

[manoldonev]

Closing this in favor of #93 with original commit authorship kept intact:

• fixed a couple of syntax errors in several templates
• retargeted agains release branch