[Angular] Plugin works fine in workspace, Module not found in published package

[BlueHunter99]

Issue

When building and running the plugin using the provided tools everything works. But after publishing (manually because I am on Windows) and using the plugin in another project I get the following error:

ERROR in ../node_modules/@qlip/checkbox/__ivy_ngcc__/angular/fesm2015/nativescript-checkbox-angular.js
Module not found: Error: Can't resolve '@qlip/checkbox' in 'C:\Projects\Test-Environment\barebones-checkbox-bug\node_modules\@qlip\checkbox\__ivy_ngcc__\angular\fesm2015' 
 @ ../node_modules/@qlip/checkbox/__ivy_ngcc__/angular/fesm2015/nativescript-checkbox-angular.js 4:0-42 7:34-42
 @ ./app/app.module.ts
 @ ./main.ts

Code

The troublesome code is this:

import { CheckBox } from '@qlip/checkbox';
registerElement('Checkbox', () => CheckBox);

If there is any way to change this import to make the plugin work that is preferred.

Reproduction

Workspace setup

1. Clone https://github.com/BlueHunter99/qlip-nativescript-plugins-collection
2. Use npm start to build the checkbox plugin and run the angular demo

   Project setup

3. ns create a new project with angular and the Hello World template, or use this demo repo
4. ns plugin add @qlip/checkbox
5. Add the import to app.module.ts using import { NativeScriptCheckboxModule } from "@qlip/checkbox/angular"; and add it to the imports array.

[SergeyMell]

Same issue for me (I'm on macOS)

[SergeyMell]

Actually, I have two packages in my collection https://github.com/SergeyMell/nativescript-plugins and one of them (nativescript-svg) is imported correctly to the external projects and the other one (color-wheel) works only inside the workspace demo. Tries to import it to some external project lead to the same issue as mentioned above.

[NathanWalker]

I’m going to take a look at that repo this weekend to see what I can tell.

[NathanWalker]

I setup a sample repo to consume external to plugin workspace referenced above from @SergeyMell and see the behavior as described. I'm investigating to see what may be the contributing factor in this workspace and hope to have answer by Monday.

[SergeyMell]

I managed to understand what is the source of the issue. If the plugin name does not start with nativescript- prefix the bundling process does not resolve the appropriate index.ios or index.android files. After I renamed my @sergeymell/color-wheel plugin to @sergeymell/nativescript-color-wheel it started working ok.

However, I failed to find the place where this logic is declared so I want to ask @NathanWalker if this can be considered like a bug or it is some naming conventions that we should stick to?

[NathanWalker]

It doesn’t affect several other plugin workspaces we manage. Trying to determine what’s different about yours and qlip’s.

[SergeyMell]

Actually, I've stripped the compiled versions of both nativescript-svg and color-wheel plugins to a single package.json, index.ios.js and index.android.js files with the only one primitive function. And I was still getting the error cannot find module even if I just import it in the project like import '@sergeymell/color-wheel'. The only way after this was to assume that the issue is in naming because all other content is fully identical. I've changed the package name and it started working. Just what to emphasis, that I'm talking not about @nativescript scope but about nativescript- prefix in the plugin name inside the scope.

For sure I'll investigate more and either find some problems with qlip’s plugin or some proofs of such logic instide NativeScript bundling process

[NathanWalker]

@BlueHunter99 based on @SergeyMell 's investigations this PR will get you going: https://github.com/BlueHunter99/qlip-nativescript-plugins-collection/pull/1

Nothing in tooling factors into that so could be a ng-packagr thing so we'll continue investigating but feel free to continue on this basis. It is something we do recommend with your own personal scoping to make clear those are {N} plugins under your scope and should help you manage your scope better as you can end up having other tech stack related plugins in that scope with clear identification.

Closing this for now and we'll do some other investigations outside of this regarding ng-packagr specifically.

[BlueHunter99]

@NathanWalker & @SergeyMell thank you both for the investigation. Will use the PR you provided.

[dscirto]

I know this got closed but just in case it helps down the road, I was seeing the same issue and workaround that @BlueHunter99 saw. The only difference is that I was able to get a package name to work without a "nativescript-" prefix. Here's what I tried:

• @uiwt/drop-down (failed)
• @uiwt/nativescript-drop-down (success) - @hn-ns/drop-down (success)

Just thought it was interesting that the "@hn-ns" scope I used didn't require a package name starting with "nativescript-"

[abdallahkadour]

I have the same issue, even if I change the plugin name so that it includes nativescript. It works in vanilla demo but in angular demo, I am still getting the error

error TS2307: Cannot find module @name-space/hello-world or its corresponding type declarations.
2 import {  } from @name-space/hello-world;

Any idea?