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 [email protected]",
"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?

[BobbyTable]

Trying out nativescript, met with this error from a fresh angular project - what exactly am i supposed to do to take this development experiece for a testrun?

[jcadiba]

@BobbyTable Run nsc debug android --no-hmr instead of nsc preview it should work on local connected devices, or AVD

[giridhargarimella]

@BobbyTable Run nsc debug android --no-hmr instead of nsc preview it should work on local connected devices, or AVD

No, it is not working for me... any other clue guys?

[AGS-hcole]

Hi @NathanWalker , I know it has been asked several times but I'm currently starting a new app development and I would be so grateful to have the Angular 10+ fixed with the Playground app Preview so we can go forward using NativeScript Angular.
Would it be possible for your to give us a timeline on when we could have this issue fixed ?
Kind regards,

[michDostal]

Hi @NathanWalker,
as mentioned above this issue has been asked several times, but this bug is reported since August and even after 4 months we don't have solution or atleast some kind of way around. It would be nice if You could atleast provide some status update. Right now I am in bad situation. I need to update to angular 10 because one of our internal package is build on it and I need to use it in nativescript project but I cannot do it because of this bug.

Thank you for reply.

[HashtagAssist]

Thats so sad. I need it too

[giridhargarimella]

Hi @NathanWalker,
as mentioned above this issue has been asked several times, but this bug is reported since August and even after 4 months we don't have solution or atleast some kind of way around. It would be nice if You could atleast provide some status update. Right now I am in bad situation. I need to update to angular 10 because one of our internal package is build on it and I need to use it in nativescript project but I cannot do it because of this bug.

Thank you for reply.

I have tried so many other options and finally moved to react native as I have not seen any proper attention on the issue.

[kingjordan]

trying to migrate an existing angular app to new shared code nativescript project so cannot downgrade angular app to use this feature. Is there anyone from telerik who can at least let us know if this will be addressed or if there is another way to accomplish this. People starting new projects can not follow the docs on your site to get this working. That is what I did and ended up here.

[darielbarroso]

Same, I had to download an early version of tns in order to make it work. Ended up installing version 6.4.1 and from there I was able to run it

[lano-vargas]

Currently trying out this out and have came across this issue. is there a way around it on have to downgrade version is the only solution? Thanks

[lano-vargas]

I've ended up using a skeleton from https://play.nativescript.org/ downloaded then cd to MyprojectFolder and tns preview But then stumble upon this issue NativeScript/playground-feedback#190 and the versioning changes mentioned there works for me.

[Yakhnitsa]

I got the same error, I am just started new project using ng new --collection=@nativescript/schematics test-project --shared, fix some errors in polyfills.ts and tsconfig.json with the help of stackowerflow and github, but this error is not solved for me. I did nothing but starting new project... now I will think twice before using nativescript for future projects, If I got throubles at the start of my project what will it be in future.

[svipandi]

@NathanWalker Is there any timeline to fix this issue so that I can plan for new development.

[OmoBe]

Would be awesome if this is still going to be fixed. Keep Nativescript alive pls.

[afearns]

any updates before we reach end of 2020? -same issue here.

[rickychongjl]

Still waiting

[abdes-zakari]

I had the same issue i solve it by running the app in my physical device using : ns run android instead of running the app by ns preview
To be able to run this command you need: (android configuration)

• Android SDK
• Java (jdk 12)
• ADB

After installation of this things run ns doctor and you will see a message like this:

hope this will help you

[rickychongjl]

I had the same issue i solve it by running the app in my physical device using : ns run android instead of running the app by ns preview
To be able to run this command you need: (android configuration)

• Android SDK
• Java (jdk 12)
• ADB

After installation of this things run ns doctor and you will see a message like this:

hope this will help you

This doesn't help, what are you on about?

[Dasone]

Still no solution for this breaking bug.
Time to abandon this sinking ship and move on for a more supported framework.
It's too bad, it had so much potential.

[hartbrkr3399]

@NathanWalker, please do something about the issue. Many people including me, are still waiting in this thread hoping for your answer as it is still open. Either close this or announce something brother.

[ferqueve]

Hi! I'm just studying Nativescript but found with this already, an error and a support failure. Will continue just for finishing the course, but I'm thinking this is not good framework for serious developments.
Regards

[snoop0x7b]

I went to install NS and start an app with the tutorial on the website. By default, tns create pulls in Angular 11. It seems like the root cause of this issue is NS just doesn't work with Angular 10 or higher. It's a shame that the tutorial just doesn't work... Perhaps consider updating the nativescript.org tutorial in light of this issue?

[NathanWalker]

We recommend using xplat for code sharing.
It’s better supported, more scalable and will lead you to better results. It’s been available as long as schematics here but supports angular versions faster.
https://nstudio.io/xplat/getting-started

xplat uses Nrwl Nx which provides better tooling all around for effective and massive code sharing.

That being said schematics here have been updated to version 11 when angular 11 was released. These commands have been known to work just fine:
https://gist.github.com/NathanWalker/266f597de1a93314bec9efa6d21c15a2

[NathanWalker]

Should be stated that playground is merely for demonstrations only and not recommended as a development environment. You should always take the time to setup a proper development environment locally.

Additionally, I just confirmed that from here, both directions work perfect as is: https://gist.github.com/NathanWalker/266f597de1a93314bec9efa6d21c15a2

When using Option A, if you end up with a project that has "@angular/core": "~10.1.1", - that has nothing to do with NativeScript and everything to do with the globally installed Angular cli you have. npm i -g @angular/cli to ensure the latest angular version project base is generated for you.

Always when bumping dependency version, run: ns clean and then run your project.

You can even use Angular's 11.1.0 released just this past week by bumping all dependencies. For example the following also works perfect:

"scripts": {
    "android": "ns run android",
    "ios": "ns run ios",
    "mobile": "ns run",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~3.0.0",
    "reflect-metadata": "~0.1.12",
    "tslib": "^2.1.0",
    "@angular/animations": "~11.1.0",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/forms": "~11.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "rxjs": "~6.6.0",
    "zone.js": "~0.11.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.1",
    "@angular/cli": "~11.1.0",
    "@angular/compiler-cli": "~11.1.0",
    "@nativescript/ios": "7.1.1",
    "@nativescript/schematics": "^11.0.0",
    "@nativescript/tslint-rules": "~0.0.5",
    "@nativescript/webpack": "~3.0.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },

[loubrevetti]

Any ETA on this fix yet

[SapioBeasley]

grr

[SapioBeasley]

I had the same issue i solve it by running the app in my physical device using : ns run android instead of running the app by ns preview
To be able to run this command you need: (android configuration)

• Android SDK
• Java (jdk 12)
• ADB

After installation of this things run ns doctor and you will see a message like this:

hope this will help you

This doesn't help, what are you on about?

This actually does work ...

• Run the advanced setup. In my case linux, so select your OS here
• run tns doctor if all green go to next step
• Plug in mobile device
• run ns run android

Let the magic happen

[AndreWilsenach]

its been months since this issue is reported can one of the devs just release a statement please ? are you going to fix it or not ? if you are please just state the priority of this fix (low normal high ?). It won't kill you to leave a comment saying we are not supporting nativescript anymore or something like that or just the truth.

Kind regards

[martijnmichel]

same

[hartbrkr3399]

If you have Angular 10.x+, move to Angular 8.x guys. That's the only way now.

…

On Mon, 1 Mar, 2021, 11:12 pm martijnmichel, ***@***.***> wrote: same — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#290 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANF2TZ7JOBA5EUM7ZCKHMPLTBPGWXANCNFSM4PR2HLMA> .

[AndreWilsenach]

@hartbrkr3399 Thanks for the reply

Kind regards

[hartbrkr3399]

@hartbrkr3399 Thanks for the reply

Kind regards

After moving, were you able to dodge that error? Because I just said that in a guess lol.

[AndreWilsenach]

Nope not yet I have other projects to work on the mobile development I'm trying is more of a side thing (also I tried it out only recently to see if its a good fit for our tech stack and as good as it is (perfect) but without angular 10 support its just a matter of time before angular goes to far and you're stuck with a specific version of nativescript without any new support or tech. if we get a new angular version before we get the required support I'd suggest taking a look at react native for mobile dev)

not hating or bad mouthing nativescript I'm a huge fan boy but reality is work needs to get done and if the tools are insufficient you're setting yourself up for struggle in the long run or unwanted limitations.

[dariel312]

Nope not yet I have other projects to work on the mobile development I'm trying is more of a side thing (also I tried it out only recently to see if its a good fit for our tech stack and as good as it is (perfect) but without angular 10 support its just a matter of time before angular goes to far and you're stuck with a specific version of nativescript without any new support or tech. if we get a new angular version before we get the required support I'd suggest taking a look at react native for mobile dev)

not hating or bad mouthing nativescript I'm a huge fan boy but reality is work needs to get done and if the tools are insufficient you're setting yourself up for struggle in the long run or unwanted limitations.

@the-fapeling I understand the sentiment and would like this issue to be fixed too. But this is not a complete blocker from using Nativescript with angular 10. As @abdes-zakari mentioned, you can totally run it fine with angular 10 using the android sdk and running it natively on your device. Playground is just a playground.