instanceof a class in angular library not working

[malvandi]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

I have an angular project angular-library-project(link). I create an angular library with command ng g library angular-library. Now I create the class AngularLibrary. The structure as follows:

I add ol dependency to both projects and used ol/View class as follow:
AngularLibrary class:

import View from 'ol/View';

export class AngularLibrary {

  constructor(view: View) {
    console.log('In Library: ', view instanceof View);
  }
}

And I used AngularLibrary in app.component.ts file as follows:

import {Component, OnInit} from '@angular/core';
import {AngularLibrary} from '../../projects/angular-library/src/lib/angular-library';
import View from 'ol/View';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'angular-library-project';


  ngOnInit(): void {

    const view = new View({
      zoom: 5,
      center: [0, 0]
    });

    console.log('In Component: ', view instanceof View);

    new AngularLibrary(view)
  }
}

The console log is the opposite of what I expected. It's as follows:

What's the problem?

Please provide a link to a minimal reproduction of the bug

https://github.com/malvandi/angular-library-project

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.6
Node: 16.17.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1402.6 (cli-only)
@angular-devkit/core         14.2.6 (cli-only)
@angular-devkit/schematics   14.2.6 (cli-only)
@schematics/angular          14.2.6 (cli-only)

Anything else?

No response

[JoostK]

You're observing the effect of how Node package management/resolution works here, not something specific to Angular libraries.

The library has its own package.json, which results in a dedicated node_modules directory within projects/angular-library/ which duplicates the ol dependency from the root node_modules folder. Since the source file angular-library.ts imports ol, the Node module resolution logic will look in the nearest node_modules tree to find the ol dependency from the library itself, which is a distinct copy from the one imported by the app (which came from the root node_modules). This results in multiple copies of those modules being bundles, causing duplicate code and resulting in instanceof mismatches.

In a workspace with multiple projects/libraries it becomes beneficial to use npm/Yarn workspaces, where you then install dependencies from the root while still considering the package.json files of nested projects. This allows the package manager to hoist nested dependencies into the root node_modules directory, provided that the versions allow for it. This hoisting process deduplicates the modules, resolving the problem.

[JoostK]

tldr; this is not a bug, but I don't know to what extent the documentation currently covers anything like this and whether this warrants additional docs (since it is just the effect of Node module resolution, not specific to Angular).

[alan-agius4]

We might want to improve the peer dependencies section and explain why peer dependencies should be used.