Link generation in dist files to other dependencies is not good

[JoshK2]

Describe the bug

I imported a component that has a pop component as a dependency, and when I run the app, I get this error:

This is the link in the button component fesm2015 folder:

import '@bit/joshk.cashmere-t1.pop/dist/pop/pop/popover.component';
import { PopModule } from '@bit/joshk.cashmere-t1.pop/dist/pop/pop/popover.module';

And if I chnge them to this, is good:

import '@bit/joshk.cashmere-t1.pop/dist/pop';
import { PopModule } from '@bit/joshk.cashmere-t1.pop/dist/pop';

Steps to Reproduce

1. Create an empty angular app.
2. install this npm i @angular/cdk.
3. bit import joshk.cashmere-t1/button (it's private, I give you permission)
4. Edit the main app.module.ts to this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ButtonModule } from '@bit/joshk.cashmere-t1.button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is the error you will get:

ERROR in ./components/button/dist/button/fesm2015/bit-button.js
Module not found: Error: Can't resolve '@bit/joshk.cashmere-t1.pop/dist/pop/pop/popover.component' in '/Users/yoshuakuttler/Documents/bit/importTesting/import-angular-components/components/button/dist/button/fesm2015'
ERROR in ./components/button/dist/button/fesm2015/bit-button.js
Module not found: Error: Can't resolve '@bit/joshk.cashmere-t1.pop/dist/pop/pop/popover.module' in '/Users/yoshuakuttler/Documents/bit/importTesting/import-angular-components/components/button/dist/button/fesm2015'

Specifications

• Bit version: 14.2.6-dev.2
• Node version: v10.16.0
• Platform: macOS

[GiladShoham]

@davidfirst That's again something with the links for angular components with the compName / dist folder in the compiler.
I thought that we finish with all the bugs, but apparently there are few more.
In that case, there are I think 3 wrong links (after fixing the first you will see more).

[JoshK2]

I have a strange thing that happens, I exported with bit version 14.2.6-dev.2 to this collection https://bit.dev/joshk/cashmere-t1/button and it was not working, I tagged again all the components and export again and it's work!

So I want to try this thing in a new collection with version 14.2.6-dev.3, and it's not working
https://bit.dev/joshk/cashmere-t2/button

I give yours permission to both collection, so you can import them to see the difference.
Another thing that I see is this stranger difference between the files name in fesm2015 folder:

[JoshK2]

I checked it again to see if maybe it works, and it's not.
https://bit.dev/joshk/cashmere-t3/button

[davidfirst]

@qballer @GiladShoham , we fixed the original issue with the prefix of the component-name in the dist directory. However, in this case, it has the prefix twice.
See the error message in the description, it is unable to find @bit/joshk.cashmere-t1.pop/dist/pop/pop/popover.component. For some reason, looking into pop component, the dists of pop are in pop/pop.

[davidfirst]

The build of button t2 has been fixed in the PR above.
@JoshK2 , please try to re-create the button component from scratch (using the new dev version, v14.2.6-dev.4) and see if you get any errors.

[JoshK2]

Hey @davidfirst, I recreate this and it's still not working.
https://bit.dev/joshk/cashmere-t4/button

[davidfirst]

Here is the issue.
Button requires pop: import { PopModule } from '../pop/popover.module';.
When Bit generates the link-file of pop inside button, the content is as following:

import { PopModule } from '@bit/pop/dist/pop/pop/popover.module';
export { PopModule };

This doesn’t work. dist/pop/pop/popover.module is a d.ts file and can’t be required on runtime.
Why Bit generates a path to the internal file and not to the package (import { PopModule } from '@bit/pop'))?
Because the original required file is: pop/popover.module.ts. Bit, first, looks for a parallel file in the dists directory. (In this case, it also adds the component prefix).
Bit does find the file inside the dists: dist/pop/pop/popover.module.js and composes the path with the found dist file.
(Ignore the twice “pop” you see here, it’s actually fine. The first one is the prefix of the component-name, the second one is the part of the actual path.)
The reason why Bit is looking for the parallel dist file first is that the require might point to an internal file.
An example of this happening in an Angular project is in ngx-fomantic-ui. #1947 (see my first comment there).
Although it requires a d.ts file. Still, it expects the link-file to point to that internal d.ts file and not to the main package.
So, I guess the question is about an Angular project when one component requires a d.ts file from another component. When should we point to the main package and when should we point to the internal file?
Maybe when the file has .module.ts suffix, we can safely assume it’s ok to point to the main file.

[itaymendel]

resolved as part of v15.

We'll start rolling out v15 of Bit this week, please reach out to me privately on the public slack community for a sneak peek and getting early access to it.