ns preview - PLAYGROUND RELATED ONLY - Type AppRoutingModule does not have 'ngModuleDef' property.

[betosalvador]

Environment
Provide the content of the package.json file in the project:

{
"name": "workspace2",
"nativescript": {
"id": "org.nativescript.workspace2",
"tns-android": {
"version": "6.5.3"
}
},
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"android": "tns run android --no-hmr",
"ios": "tns run ios --no-hmr",
"mobile": "tns run",
"preview": "tns preview",
"ngcc": "ngcc --properties es2015 module main --first-only",
"postinstall": "npm run ngcc"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.0",
"@angular/common": "~10.0.0",
"@angular/compiler": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"core-js": "^2.6.9",
"@nativescript/angular": "~10.0.0",
"@nativescript/core": "rc",
"@nativescript/theme": "~2.2.1",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.5.5",
"tslib": "1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular-devkit/build-angular": "~0.1000.2",
"@nativescript/tslint-rules": "~0.0.5",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"@nativescript/webpack": "~2.0.0",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.0",
"node-sass": "^4.7.1"
}
}

Describe the bug
The error occurs after I run tns preview (or npm run preview) and scan the QR CODE.

Bellow is the error log
Copying template files...
Platform android successfully added. v6.5.3
Preparing project...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: b23597466ab3e940e588
Version: webpack 4.43.0
Time: 6268ms
Built at: 08/01/2020 11:49:01 AM
Asset Size Chunks Chunk Names
bundle.js 26.5 KiB bundle [emitted] bundle
package.json 112 bytes [emitted]
runtime.js 77.1 KiB runtime [emitted] runtime
tns-java-classes.js 0 bytes [emitted]
vendor.js 345 KiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[./app.css] 1.02 KiB {bundle} [built]
[./app/app-routing.module.tns.ts] 1.02 KiB {bundle} [built]
[./app/app.component.ts] 905 bytes {bundle} [built]
[./app/app.module.tns.ts] 1.56 KiB {bundle} [built]
[./app/app.routes.ts] 245 bytes {bundle} [built]
[./app/home/home.component.ts] 1.28 KiB {bundle} [built]
[./main.tns.ts] 2.3 KiB {bundle} [built]
[@angular/core] external "@angular/core" 42 bytes {bundle} [built]
[@nativescript/angular] external "@nativescript/angular" 42 bytes {bundle} [built]
[@nativescript/core] external "@nativescript/core" 42 bytes {bundle} [built]
[@nativescript/core/bundle-entry-points] external "@nativescript/core/bundle-entry-points" 42 bytes {bundle} [built]
[@nativescript/core/ui/frame] external "@nativescript/core/ui/frame" 42 bytes {bundle} [built]
[@nativescript/core/ui/frame/activity] external "@nativescript/core/ui/frame/activity" 42 bytes {bundle} [built]
[@nativescript/core/ui/styling/style-scope] external "@nativescript/core/ui/styling/style-scope" 42 bytes {bundle} [built]
+ 8 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Start sending initial files for device %H:%M:%S (84033bdf-d3d6-43a3-9857-621b7f558e03).
Successfully sent initial files for device %H:%M:%S (84033bdf-d3d6-43a3-9857-621b7f558e03).
LOG from device %H:%M:%S: com.tns.NativeScriptException: Error calling module function
Error: Type AppRoutingModule does not have 'ngModuleDef' property.
File: (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1682:12)

StackTrace:
ZoneAwareError(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:1298:33)
at getNgModuleDef(file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1682:19)
at (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1513:31)
at noSideEffects(file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1321:19)
at ����setNgModuleScope(file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1512:16)
at (file:///data/data/org.nativescript.preview/files/app/bundle.js:42:131)
at ./app/app-routing.module.tns.ts(file:///data/data/org.nativescript.preview/files/app/bundle.js:42:339)
at webpack_require(file:///data/data/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/data/org.nativescript.preview/files/app/runtime.js:121:20)
at ./app/app.module.tns.ts(file:///data/data/org.nativescript.preview/files/app/bundle.js:97:85)
at webpack_require(file:///data/data/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/data/org.nativescript.preview/files/app/runtime.js:121:20)
at (file:///data/data/org.nativescript.preview/files/app/bundle.js:211:77)
at ./main.tns.ts(file:///data/data/org.nativescript.preview/files/app/bundle.js:276:30)
at webpack_require(file:///data/data/org.nativescript.preview/files/app/runtime.js:817:30)
at checkDeferredModules(file:///data/data/org.nativescript.preview/files/app/runtime.js:44:23)
at webpackJsonpCallback(file:///data/data/org.nativescript.preview/files/app/runtime.js:31:19)
at (file:///data/data/org.nativescript.preview/files/app/bundle.js:2:57)
at require(:1:266)

Error: Type AppRoutingModule does not have 'ngModuleDef' property.
at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:674)
at com.tns.Runtime.run(Runtime.java:666)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1025)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5448)
at android.app.ActivityThread.-wrap2(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1564)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6186)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:889)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:779)

To Reproduce
generate a new shared project: ng new -c=@nativescript/schematics workspace --shared
enter the project folder: cd workspace
run any these commands: tns preview, npm run preview (with or without --no-hmr flag)

Expected behavior
Run the project on the real device (preview)

[NathanWalker]

@betosalvador preview needs app store updates which we're working on to bring Angular 10 support to the {N} Preview app. We'll ping back once latest updates have been approved and live on the store.

In meantime you can just use nsc debug android --no-hmr or nsc debug ios --no-hmr

[betosalvador]

@NathanWalker

nice man, thanks

[Matheus-Ribeiro95]

@NathanWalker any update about this? Angular is amazing for code sharin between web and native btw :D

[armache]

Having the same issue and waiting for the update...

[rob4226]

@betosalvador preview needs app store updates which we're working on to bring Angular 10 support to the {N} Preview app. We'll ping back once latest updates have been approved and live on the store.

In meantime you can just use nsc debug android --no-hmr or nsc debug ios --no-hmr

@NathanWalker I just tried nsc debug ios --no-hmr and got an error: Applications for platform iOS can not be built on this OS

So what does this mean? It's not possible to preview iOS with NativeScript/Angular 10.0 on Windows right now because the {N} Preview app needs to be updated in the app store? I don't have a mac and don't have an android phone, so I really need to use the ios preview app because my app uses the camera.

It seems like this has been an issue for few months now, what should people do? Thank you!

[tulipandmills]

@betosalvador preview needs app store updates which we're working on to bring Angular 10 support to the {N} Preview app. We'll ping back once latest updates have been approved and live on the store.

In meantime you can just use nsc debug android --no-hmr or nsc debug ios --no-hmr

Is there any news on this? For working with Preview, does it still make sense to wait for this? Is this proposed fix still in the pipeline?

[HasikaDilshani]

I am having same issue..
Is this fixed or not yet?

[hinalt]

I am facing the same issue. My package.json is as follows:
{
"name": "@nativescript/template-blank-ng",
"main": "main.js",
"displayName": "Blank",
"templateType": "App template",
"version": "7.0.6",
"description": "NativeScript Application",
"author": "NativeScript Team oss@nativescript.org",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nstudio",
"nativescript",
"mobile",
"angular",
"{N}",
"tns",
"template",
"category-general"
],
"repository": "",
"homepage": "https://github.com/NativeScript/nativescript-app-templates",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/theme": "~3.0.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~10.1.0",
"@nativescript/android": "7.0.1",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~10.1.0",
"typescript": "~4.0.0"
},
"private": "true",
"readme": "NativeScript Application"
}

[Dasone]

Angular 11 is in it's pre release state and there's still no solution for this problem with NS preview app that generates for everyone who starts with NS coding with later Angular version. How long do we have to wait before this is fixed?