Fresh Nativescript install on migrating an Angular project is failing. Need help!

[GlitchEclipse]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.1.1
• Cross-platform modules: ios, preview (android not setup yet, but will later)
• Android Runtime: not installed
• iOS Runtime: "@nativescript/ios": "7.1.0"
• Plugin(s): none (base install)
• NativeScript-Angular: "@nativescript/angular": "~10.1.0"
• Angular: 9.1.2

Describe the bug
I am setting up on my angular project for code sharing for the first time by following the migration instructions from the website. It is just error after error. Running tns doctor shows a successfully installation.

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Xcode is installed and is configured properly.
✔ xcodeproj is installed and is configured properly.
✔ CocoaPods are installed.
✔ CocoaPods update is not required.
✔ CocoaPods are configured properly.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✔ The Python 'six' package is found.
✔ Xcode version 12.3.0 satisfies minimum required version 10.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 7.1.1 version and is up to date.
⚠ Update available for component @nativescript/core. Your current version is 7.0.13 and the latest available version is 7.1.0.
✔ Component @nativescript/ios has 7.1.0 version and is up to date.
✖ Component @nativescript/android is not installed.

running tns preview or tns run ios results in either a NGCC failed error as showed below:

Error: NGCC failed.
at NgccProcessor.process (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/@ngtools/webpack/src/ngcc_processor.js:129:19)
at /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:593:31
at SyncHook.eval [as call] (eval at create (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/tapable/lib/HookCodeFactory.js:19:10), :9:1)
at SyncHook.lazyCompileHook (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/tapable/lib/Hook.js:154:20)
at webpack (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack/lib/webpack.js:55:30)
at processOptions (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack-cli/bin/cli.js:272:16)
at /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack-cli/bin/cli.js:364:3
at Object.parse (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack-cli/node_modules/yargs/yargs.js:576:18)
at /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack-cli/bin/cli.js:49:8
at Object. (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (/Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Executing webpack failed with exit code 1.

I can prevent the NGCC error by using

"angularCompilerOptions": {
"enableIvy": false
},

However, the results in this error

ERROR in Error during template compile of 'AppRoutingModule'
Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.
Unexpected value 'undefined' imported by the module 'AppRoutingModule in /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/src/app/app-routing.module.tns.ts'
Can't export value NativeScriptRouterModule in /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/node_modules/@nativescript/angular/nativescript-angular.d.ts from AppRoutingModule in /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/src/app/app-routing.module.tns.ts as it was neither declared nor imported!
Error during template compile of 'AppRoutingModule'
Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.

JS ERROR Error: Main entry is missing. App cannot be started. Verify app bootstrap.

I am literary just trying to get started. What am I doing wrong? I will back all this out if someone can guide me on how to get this setup and working. Thank you.

[GlitchEclipse]

I was able to get it running by upgrading to Angular 10. Was able to run it for ios and android. I can only get the android emulator to connect though if I physically open android studio emulator manually prior to running ns run android. It will not find it if I don't. Another issue I am running into an error on ns preview AppRoutingModule does not have 'ngModuleDef' property. Apparently this is a known issue on #290 that has not be resolved yet. I will start with my development and hopefully the preview issue gets resolved.

[iamabs2001]

try using angular 11

[iamabs2001]

{
  "name": "@nativescript/template-tab-navigation-ng",
  "main": "main.js",
  "displayName": "Tabs",
  "templateType": "App template",
  "version": "7.0.5",
  "description": "NativeScript Application",
  "author": "NativeScript Team <oss@nativescript.org>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "nstudio",
    "nativescript",
    "mobile",
    "angular",
    "{N}",
    "tns",
    "template",
    "tab",
    "navigation",
    "category-general"
  ],
  "repository": "<fill-your-repository-here>",
  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~2.3.0",
    "nativescript-awesome-webview-with-custom-menu-items": "^40.1.1",
    "nativescript-chrome-tabs": "^0.1.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/webpack": "~3.0.0",
    "@ngtools/webpack": "~11.0.0",
    "codelyzer": "~6.0.0",
    "nativescript": "^7.1.0",
    "node-sass": "^4.14.1",
    "tslint": "~6.1.3",
    "typescript": "~4.0.0"
  },
  "gitHead": "41a7254d3bc134fd3c258761f3c6e1c3d54e6d41",
  "private": "true",
  "readme": "NativeScript Application"
}

[GlitchEclipse]

Upgrading to Angular 11 did not solve the ns run android or preview issue. The issue is that unless the android simulator is already started, there is no device identifier when you run ns device android --available-devices, but the emulator is there. So when you start it you get

patrickpolomsky@prod-logic-mbp ProdCoreNg % ns run android
Searching for devices...
Cannot find connected devices.
Emulator start failed with: No emulator image available for device identifier 'undefined'.
To list currently connected devices and verify that the specified identifier exists, run 'tns device'.
To list available emulator images, run 'tns device <Platform> --available-devices'.

Only after the simulator is started does it build the project

patrickpolomsky@prod-logic-mbp ProdCoreNg % ns run android
Searching for devices...
Preparing project...
File change detected. Starting incremental webpack compilation...

The other issue is that after it is built it will not build again unless I remove the android platform and re-add back the platform. Any attempt to re-run the android project in the simulator after is closed in terminal results in

Error executing Static Binding Generator: Class not found androidx.appcompat.widget.Toolbar.OnMenuItemClickListener
Detailed log here: /Users/patrickpolomsky/Projects/ProdLogic/ProdCoreNg/platforms/android/build-tools/runSbg.log

Unable to apply changes on device: emulator-5554. Error is: Command ./gradlew failed with exit code 1.

Another way around removing the platform is going to the avd manager and stopping the emulator and then right clicking on the virtual device and wiping the data, and then restarting it and running ns run android again. But that frankly is a pain to do every time. It's a work around for now though.

Thanks for the suggestion moving up to Angular 11, but this did not resolve the issues I currently have. Does anyone have a suggestion on how to get the preview working or run the android emulator the way it was intended. Running ios works fine.

[tomups]

Have you tried ns run android --no-hmr ?

[baybal]

I have experienced the same issue with nativescript-vue

[sotengboy]

I have experienced the same issue with nativescript-vue

did you resolved that?