[Help needed] Library uses another external angular library

[h657070128]

Hi, I am building a lib based on VMware's Clarity, which is also a Angular library. After the config, my component in lib, containing Clarity directives and components, works properly (the code under src/lib is used in the demo). However, after I successfully packaged it with rollup, the Clarity directive wrapped in my exported component does not work in another application (consuming application). I do not want Clarity and Angular included in my lib. Instead, that application will import Angular, Clarity and my lib. I believe this is the correct way.

My rollup config:

const rollupBaseConfig = {
      // ......
      globals: {
        '@angular/core': 'ng.core',
        '@angular/common': 'ng.common', // I am using "ngIf" and other angular directives in my lib
        'clarity-angular/index': 'ng.clarity' // I am sure the global name is ng.clarity
      },
      external: [
        '@angular/core',
        '@angular/common',
        'clarity-angular/index' // This name should be ok
      ],
      // ......
    };

-------------------------------------------Separator-------------------------------------------

In the Angular-Cli based application, I npm link the dist directory of my lib (the solution before I publish the lib to npm repository). According to the instruction of Angular-Cli, I config the tsconfig.app.json as:

{
  // ......
  "compilerOptions": {
    // ......
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
      // Not sure if I should include clarity-angular here. I tried `"clarity-angular": ["../node_modules/clarity-angular/clarity-angular.umd.js"]` or `"clarity-angular": ["../node_modules/clarity-angular"]` but the error is still there
    }
  }
  // ......
}

And the usage is like: (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from 'clarity-angular';
import { MyLibModule } from 'my-lib'; // This is my lib, the name has no problem

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    MyLibModule,
    ClarityModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Then I consume my component in app.component.html. The browser console reports error:

Uncaught Error: Template parse errors:
Can't bind to 'clrMenuPosition' since it isn't a known property of 'clr-dropdown'.
......

because the component I consume (i.e. in my lib) contains Clarity directive clr-dropdown. I find the directive is not initialized in my consuming application by setting breakpoint in the directive constructor. Then of course the error is occurring.

Did I miss something? Any possible ideas are all welcome. Thanks! It's may related to #21 but kind of different. I read through that thread but did not find the answer.

[filipesilva]

If you post a small repro I can clone and tinker with, I can try debugging it.

[h657070128]

@filipesilva Thanks, I will post one later.

[h657070128]

The funny thing is that I set up a lib and a consuming application and tried to reproduce the issue. However I found the demo works just fine... Then I went back to double check my original code and found a stupid mistake - oops, forgot to import Clarity for that module (I am not using a centralized module). Thanks anyway!

[filipesilva]

That's not uncommon at all really, there are a lot of bugs I've discovered myself while trying to do a simple repro. Glad you got it sorted!