v4.3.30 Missing angular package.json in NPM

[CalebSWhite]

Which platform(s) does your issue occur on?

• iOS/Android/Both Angular

Please, provide the following version numbers that your issue occurs with:

• Plugin(s): "@nativescript-community/ui-image": "4.3.30"

Please, tell us how to recreate the issue in as much detail as possible.

Run ns debug android with an Angular project using @nativescript-community/ui-image@4.3.30 and you get an error

  System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
  System.err: Error: Cannot find module '@nativescript-community/ui-image/angular'

You can see it on npm code browser in the angular folder that 4.3.29 has the package.json (https://www.npmjs.com/package/@nativescript-community/ui-image/v/4.3.29?activeTab=code) and 4.3.30 doesn't (https://www.npmjs.com/package/@nativescript-community/ui-image/v/4.3.30?activeTab=code)

[paulmlilo]

I experienced the same thing as well. Had to downgrade to 4.3.29.

[farfromrefug]

@paulmlilo @CalebSWhite the plugin is now built with angular 17. I dont know nothing about angular but it seems the folder structure is now different. Can you try upgrading to angular 17?

[joshcomley]

@farfromrefug hi there! I am building with very latest Angular 17 and it fails for me, too:

Module not found: Error: Can't resolve '@nativescript-community/ui-image/angular/index' in 'D:\code\my-app\src\app\common\components\image'
resolve '@nativescript-community/ui-image/angular/index' in 'D:\code\my-app\src\app\common\components\image'
  Parsed request is a module
  using description file: D:\code\my-app\package.json (relative path: ./src/app/common/components/image)    
    resolve as module
      looking for modules in D:\code\my-app\node_modules
        existing directory D:\code\my-app\node_modules\@nativescript-community\ui-image
          using description file: D:\code\my-app\node_modules\@nativescript-community\ui-image\package.json (relative path: .)
            using description file: D:\code\my-app\node_modules\@nativescript-community\ui-image\package.json (relative path: ./angular/index)

[farfromrefug]

@joshcomley what version are you using? Looking at npm the code seems to be there https://www.npmjs.com/package/@nativescript-community/ui-image?activeTab=code If someone would like to investigate this it would be great. I dont use angular

[joshcomley]

@farfromrefug I'm using Angular 17.2.1 and ui-image 4.3.32, rhe problem is the missing package.json in the Angular folder, which isn't there.

After cloning, the build fails for Angular when I try:

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@nativescript-community/ui-image-angular'
------------------------------------------------------------------------------
    at makeError (file:///C:/code/NativeScript/ui-image/node_modules/@lerna-lite/core/node_modules/execa/lib/error.js:60:11)
    at handlePromise (file:///C:/code/NativeScript/ui-image/node_modules/@lerna-lite/core/node_modules/execa/index.js:124:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///C:/code/NativeScript/ui-image/node_modules/p-queue/dist/index.js:187:36 {
  shortMessage: 'Command failed with exit code 1: yarn run build.angular',
  command: 'yarn run build.angular',
  escapedCommand: 'yarn run build.angular',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: 'Building Angular Package\n' +
    '\n' +
    '------------------------------------------------------------------------------\n' +
    "Building entry point '@nativescript-community/ui-image-angular'\n" +
    '------------------------------------------------------------------------------',
  stderr: '- Compiling with Angular sources in Ivy full compilation mode.\n' +
    '✖ Compiling with Angular sources in Ivy full compilation mode.\n' +
    "\x1B[96m../../src/image/angular/module.ts\x1B[0m:\x1B[93m6\x1B[0m:\x1B[93m21\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2307: \x1B[0mCannot find module '@nativescript-community/ui-image' or its corresponding type declarations.\r\n" +
    '\r\n' +
    "\x1B[7m6\x1B[0m import { Img } from '@nativescript-community/ui-image';\r\n" +
    '\x1B[7m \x1B[0m \x1B[91m                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\r\n',
  cwd: 'C:\\code\\NativeScript\\ui-image\\packages\\image',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false,
  pkg: Package {
    _id: '',
    isBumpOnlyVersion: false,
    licensePath: '',
    localDependencies: Map(0) {},
    name: '@nativescript-community/ui-image',
    [Symbol(location)]: 'C:\\code\\NativeScript\\ui-image\\packages\\image',
    [Symbol(resolved)]: Result {
      type: 'directory',
      registry: undefined,
      where: 'C:\\code\\NativeScript\\ui-image',
      raw: '@nativescript-community/ui-image@file:packages\\image',
      name: '@nativescript-community/ui-image',
      escapedName: '@nativescript-community%2fui-image',
      scope: '@nativescript-community',
      rawSpec: 'file:packages\\image',
      saveSpec: 'file:packages\\image',
      fetchSpec: 'C:\\code\\NativeScript\\ui-image\\packages\\image',
      gitRange: undefined,
      gitCommittish: undefined,
      gitSubdir: undefined,
      hosted: undefined
    },
    [Symbol(rootPath)]: 'C:\\code\\NativeScript\\ui-image',
    [Symbol(scripts)]: {
      build: 'npm run tsc && npm run readme',
      'build.all': 'npm run build && npm run build.angular',
      'build.angular': 'ng-packagr -p ../../src/image/angular/ng-package.json -c ../../src/image/angular/tsconfig.json',
      readme: 'readme generate -c ../../tools/readme/blueprint.json',
      tsc: "cpy '**/*.d.ts' '../../packages/image' --parents --cwd=../../src/image && tsc -skipLibCheck -d",
      clean: 'rimraf ./*.d.ts ./*.js ./*.js.map'
    }
  }
}

Node.js v18.18.0

[farfromrefug]

@joshcomley good catch i think i know now!

[joshcomley]

It can't find the module I think because there's no index.js:

[joshcomley]

@joshcomley good catch i think i know now!

Ah OK! Sounds hopeful! :D

[farfromrefug]

@joshcomley actually not that easy. ng-packgr creates a .npmignore which ignores the angular package.json... angular is killing itself ...

[farfromrefug]

@joshcomley just published a new version. Let me know if it works

[joshcomley]

@farfromrefug perfect, it's working, thank you!

[CalebSWhite]

Thanks @joshcomley and @farfromrefug. I got a bit distracted by other things! Sorry if I wasn't clear enough initially