ERROR: The target entry-point "@nativescript/angular" has missing dependencies

[hrueger]

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: 6.7.4
• Cross-platform modules: 6.5.2
• Android Runtime: 6.5.1
• iOS Runtime: not installed
• Plugin(s): see below
• NativeScript-Angular: 9.0.0
• Angular: 9.1.9

Describe the bug
I run tns run android and get the following error:

WARNING in Entry point '@nativescript/angular' contains deep imports into 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/utils/types', 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/ui/animation/keyframe-animation', 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/ui/styling/css-animation-parser', 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/ui/styling/converters', 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/file-system/file-system', 'E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/core/ui/layouts/layout-base'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

ERROR in The target entry-point "@nativescript/angular" has missing dependencies:
 - @nativescript/core/ui/layouts/layout-base

To Reproduce
My package.json file looks like this:

{
    "name": "SchoolSquirrel",
    "nativescript": {
        "id": "com.schoolsquirrel.SchoolSquirrel",
        "tns-android": {
            "version": "6.5.1"
        }
    },
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "eslint . --ext .ts",
        "lint-fix": "eslint . --ext .ts --fix",
        "e2e": "ng e2e",
        "android": "tns run android",
        "ios": "tns run ios",
        "mobile": "tns run",
        "preview": "tns preview"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^9.1.9",
        "@angular/common": "^9.1.9",
        "@angular/compiler": "^9.1.9",
        "@angular/core": "^9.1.9",
        "@angular/forms": "^9.1.9",
        "@angular/localize": "^9.1.9",
        "@angular/platform-browser": "^9.1.9",
        "@angular/platform-browser-dynamic": "^9.1.9",
        "@angular/router": "^9.1.9",
        "@nativescript/theme": "^2.3.3",
        "@ng-bootstrap/ng-bootstrap": "^6.1.0",
        "bootstrap": "^4.5.0",
        "core-js": "^3.6.5",
        "@nativescript/angular": "^9.0.0",
        "reflect-metadata": "~0.1.13",
        "rxjs": "~6.5.5",
        "@nativescript/core": "^6.5.2",
        "tslib": "2.0.0",
        "zone.js": "~0.10.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.901.7",
        "@angular/cli": "^9.1.7",
        "@angular/compiler-cli": "^9.1.9",
        "@nativescript/schematics": "^1.0.0",
        "@types/jasmine": "~3.5.10",
        "@types/jasminewd2": "~2.0.8",
        "@types/node": "~14.0.9",
        "@typescript-eslint/eslint-plugin": "^3.1.0",
        "@typescript-eslint/parser": "^3.1.0",
        "codelyzer": "^5.2.2",
        "eslint": "^7.1.0",
        "eslint-config-airbnb": "^18.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-import-resolver-typescript": "^2.0.0",
        "eslint-plugin-github": "^4.0.1",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-json": "^2.1.1",
        "eslint-plugin-prettier": "^3.1.3",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.2",
        "karma": "~5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~3.3.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "nativescript-dev-webpack": "^1.5.1",
        "node-sass": "^4.14.1",
        "protractor": "~7.0.0",
        "ts-node": "~8.10.2",
        "tslint": "~6.1.2",
        "typescript": "~3.8.3"
    }
}

Expected behavior
It builds without any warnings or errors.

Sample project
This is an almost fresh project. The frontend is in the SchoolSquirrel folder.
It uses code sharing (web and mobile).

[NathanWalker]

@hrueger see this Wiki post - covers this issue in Problem 2 👍
https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without#problem-2

In short at a minimum you need to add ngcc.config.js to root of your project and ensure it at least has this:

module.exports = {
  "packages": {
    "@nativescript/angular": {
      entryPoints: {
        ".": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//
      ]
    }
  }
};

[hrueger]

Oh thanks @NathanWalker , I'm sorry, I didn't see the wiki page.
This solved the error, but now I have a slightly different one.
I'll try to solve it and close this issue as soon as it works.

[NathanWalker]

@hrueger no worries and sorry if we did not make that Wiki clear enough!
Feel free to post here the other issue you encountered and can see if have any additional suggestions for you.

[hrueger]

@NathanWalker The new error is this: ERROR in Symbol ListViewComponent declared in E:/Angular/SchoolSquirrel/SchoolSquirrel/node_modules/@nativescript/angular/directives/list-view-comp.d.ts is not exported from @nativescript/angular/nativescript.module (import into E:/Angular/SchoolSquirrel/SchoolSquirrel/src/app/_pages/home/home.component.ts)

It doesn't work with either the minimum ngcc.config.js you provided above nor with the longer one in the wiki.
I tried cleaning and rebuilding multiple times.

It's strange because my HomeComponent does not include a ListView:

<ActionBar title="title"></ActionBar>
<StackLayout class="p-20">
    <Label text="You're now logged in!" class="h1 text-center" textWrap="true"></Label>
</StackLayout>

import { Component } from "@angular/core";

@Component({
    selector: "app-home",
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"],
})
export class HomeComponent {
}

It's just a blank component. I also don't have a ListView anywhere in my project...

[NathanWalker]

Thanks @hrueger that is strange - is it possible to share the project? If it's private you could invite NathanWalker to it and I'd be happy to take a look.

[hrueger]

Sure, thank's for your help. It's public: SchoolSquirrel
The Angular NativeScript App is in the SchoolSquirrel directory.

[NathanWalker]

@hrueger posted a PR with things a bit closer - see notes 👍
SchoolSquirrel/SchoolSquirrel#1

[Comfie]

@hrueger see this Wiki post - covers this issue in Problem 2 👍
https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without#problem-2

In short at a minimum you need to add ngcc.config.js to root of your project and ensure it at least has this:

module.exports = {
  "packages": {
    "@nativescript/angular": {
      entryPoints: {
        ".": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//
      ]
    }
  }
};

Thank you very much struggled with the same error for about 30min could not find any solutions until I got this.

[NathanWalker]

@hrueger @nativescript/schematics ~9.0.0 have been released and I'd recommend trying them with the SchoolSquirrel project. Lemme know if that gets you up and running fully there. You'll still wanna make sure the practices in that wiki guide for {N} and Angular 9/Ivy are still in place which I believe the PR I did awhile back and believe you integrated those in take care of. But next step is for you to now update schematics so lemme know 👍

[hrueger]

@NathanWalker Yes, it works! However, not completely. I first got the following error:

> tns run android --env.aot

Searching for devices...
Preparing project...
Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
 - options[1] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
 - options[2] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
    at validate (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:96:11)
    at new CopyPlugin (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\copy-webpack-plugin\dist\index.js:24:30)
    at module.exports.env (E:\Angular\SchoolSquirrel\SchoolSquirrel\webpack.config.js:304:13)
    at handleFunction (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\prepareOptions.js:23:13)
    at prepareOptions (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\prepareOptions.js:9:5)
    at requireConfig (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\convert-argv.js:136:14)
    at E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at yargs.parse (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\cli.js:241:39)
    at Object.parse (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\yargs\yargs.js:567:18)
    at E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\cli.js:219:8
    at Object.<anonymous> (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack-cli\bin\cli.js:538:3)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (E:\Angular\SchoolSquirrel\SchoolSquirrel\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Executing webpack failed with exit code 1.
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! SchoolSquirrel@0.0.0 android: `tns run android --env.aot`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the SchoolSquirrel@0.0.0 android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hannes\AppData\Roaming\npm-cache\_logs\2020-06-19T06_37_50_908Z-debug.log

I could temporarily solve this by commenting out this block in the webpack.config.js file (seems to be a breaking change of the copy-webpack-plugin?): https://github.com/SchoolSquirrel/SchoolSquirrel/blob/73cd4460c950880f788a3c0f94921649eafb6b2a/SchoolSquirrel/webpack.config.js#L303-L307
However, now I don't expect any assets to be shown properly...

In addition, I had to add the CUSTOM_ELEMENTS_SCHEMA to the app.module.tns.ts.

EDIT: The config for the new CopyWebpackPlugin looks like this:

new CopyWebpackPlugin({
    patterns: [
        { from: "fonts/**" },
        { from: "**/*.jpg" },
        { from: "**/*.png" },
        { from: "**/*.json" },
    ],
})

This solved the problem.

[hrueger]

@NathanWalker Another quite annoying thing is, that every time I save a file, the hot reload gives me the following error:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1)
System.err:
System.err: StackTrace:
System.err: ZoneAwareError(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:1298:0)
Successfully synced application com.schoolsquirrel.SchoolSquirrel on device R58M385EJ6T.
System.err:     at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._removeView(file: node_modules\@nativescript\core\ui\core\view-base\view-base.js:472:0)
System.err:     at push.../node_modules/@nativescript/angular/view-util.js.ViewUtil.removeFromVisualTree(file: node_modules\@nativescript\angular\view-util.js:191:0)
System.err:     at push.../node_modules/@nativescript/angular/view-util.js.ViewUtil.removeChild(file: node_modules\@nativescript\angular\view-util.js:119:0)
System.err:     at push.../node_modules/@nativescript/angular/renderer.js.NativeScriptRendererFactory.ngOnDestroy(file: node_modules\@nativescript\angular\renderer.js:60:0)
System.err:     at (file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:11518:55)
System.err:     at push.../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.destroy(file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:11518:0)
System.err:     at push.../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgModuleRef$1.destroy(file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:24832:0)
System.err:     at push.../node_modules/@nativescript/angular/platform-common.js.NativeScriptPlatformRef._livesync(file: node_modules\@nativescript\angular\platform-common.js:221:0)
System.err:     at (file: node_modules\@nativescript\angular\platform-common.js:103:74)
System.err:     at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invokeTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:421:0)
System.err:     at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.Zone.runTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:188:0)
System.err:     at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneTask.invokeTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:496:0)
System.err:     at ZoneTask.invoke(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:485:0)
System.err:     at timer(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:1561:0)
System.err:     at invoke(file: node_modules\@nativescript\core\timer\timer.android.js:20:30)
System.err:     at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:388:0)
System.err:     at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.Zone.runGuarded(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:151:0)
System.err:     at (file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:129:0)
System.err:     at run(file: node_modules\@nativescript\core\timer\timer.android.js:24:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err:     at android.os.Handler.handleCallback(Handler.java:883)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:100)
System.err:     at android.os.Looper.loop(Looper.java:237)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7814)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1075)

When I then change something and save the file again, it works successfully!
The next time I make a change and save it, I get the error again, after a second change it's fine. And so on.

Should I create another issue for that? Is it caused by @nativescript/angular or by @nativescript/core?

[arun-s-aot]

Hi @NathanWalker . I am also facing a similar issue with my Nativescript angular 9 shared project when i tried running its web application which was working fine till last day . I am getting an error like:

This is my ngcc.config.js file :

'packages': {
    '@nativescript/angular': {
      entryPoints: {
        '.': {
          override: {
            main: './index.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /zone.js\//,
        /tns-core-modules\//,
        /@nativescript\/core\//
      ]
    }
}
}

What could be the issue ? It was working fine till yesterday.