Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hrueger opened this issue Jun 3, 2020 · 19 comments
Closed
Assignees

Comments

@hrueger
Copy link

hrueger commented Jun 3, 2020

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).

@hrueger hrueger mentioned this issue Jun 4, 2020
@NathanWalker
Copy link
Contributor

NathanWalker commented Jun 4, 2020

@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
Copy link
Author

hrueger commented Jun 4, 2020

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
Copy link
Contributor

@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
Copy link
Author

hrueger commented Jun 5, 2020

@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
Copy link
Contributor

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
Copy link
Author

hrueger commented Jun 6, 2020

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

@NathanWalker
Copy link
Contributor

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

@Comfie
Copy link

Comfie commented Jun 8, 2020

@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
Copy link
Contributor

@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
Copy link
Author

hrueger commented Jun 19, 2020

@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! [email protected] android: `tns run android --env.aot`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] 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
Copy link
Author

hrueger commented Jun 19, 2020

@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
Copy link

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:
image

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.

@NathanWalker
Copy link
Contributor

NathanWalker commented Jun 21, 2020

Hi @arun-s-aot - you may be missing the outer structure of the ngcc.config.js or may also need to clean/rebuild. Also double check that you have the postinstall script in your package.json like this:

"scripts": {
  "ngcc": "ngcc --properties es2015 module main --first-only",
  "postinstall": "npm run ngcc"
}

Try copy/pasting this exactly into your ngcc.config.js and then running npx rimraf hooks node_modules platforms package-lock.json && npm i:

module.exports = {
  "packages": {
    "@nativescript/angular": {
      entryPoints: {
        ".": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /zone.js\//,
        /tns-core-modules\//,
        /@nativescript\/core\//
      ]
    },
    "nativescript-localize": {
      entryPoints: {
        ".": {
          override: {
            main: "./angular.js",
            typings: "./angular.d.ts",
          },
          ignoreMissingDependencies: true,
        },
      },
      ignorableDeepImportMatchers: [
        /@nativescript\/core\//
      ]
    },
    "nativescript-datetimepicker": {
      entryPoints: {
        ".": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        },
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-ui-sidedrawer": {
      entryPoints: {
        "angular": {
          override: {
            main: "./side-drawer-directives.js",
            typings: "./side-drawer-directives.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    },
    "nativescript-ui-listview": {
      entryPoints: {
        "angular": {
          override: {
            main: "./listview-directives.js",
            typings: "./listview-directives.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    }
  }
}

@NathanWalker
Copy link
Contributor

NathanWalker commented Jun 21, 2020

@hrueger Your issue above may be related to hmr - I would turn hmr off when developing shared code projects with Ivy - so try using this flag: tns debug ios --no-hmr --emulator and lemme know if better with livesync changes.

@hrueger
Copy link
Author

hrueger commented Jun 22, 2020

@NathanWalker No, unfortunately not. Same error as here...
I'm using android, but it shouldn't matter.

@NathanWalker
Copy link
Contributor

@hrueger is your latest pushed up there and which branch? I can take a peek.

@hrueger
Copy link
Author

hrueger commented Jun 22, 2020

@NathanWalker That would be great, thank's in advance. It's all up-to-date on the master branch of SchoolSquirrel.
It's without Ivy now, that's why there's no ngcc.config.js anymore.

As I described above, the initial run is working, but onec a file is changed, the errors appear. No matter if it is run with or without --no-hmr...

@NathanWalker
Copy link
Contributor

@hrueger confirmed working here and with Ivy enabled: SchoolSquirrel/SchoolSquirrel#4

@hrueger
Copy link
Author

hrueger commented Jun 25, 2020

Yes, it's working. For anyone interested in the final solution for Angular 9 + Ivy + NativeScript, just check out this PR by @NathanWalker

@hrueger hrueger closed this as completed Jun 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants