angular Angular 库中类的示例不工作

cwxwcias  于 2022-10-29  发布在  Angular
关注(0)|答案(3)|浏览(129)

哪些@angular/* 软件包是该错误的来源?

编译程序

这是回归吗?

没有

描述

我有一个Angular 项目angular-library-projectlink)。我用命令ng g library angular-library创建了一个Angular 库。现在我创建了类AngularLibrary。其结构如下:

我向两个项目添加了ol依赖项,并使用了ol/View类,如下所示:

AngularLibrary类别:

import View from 'ol/View';

export class AngularLibrary {

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

我在app.component.ts文件中使用了AngularLibrary,如下所示:

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)
  }
}

控制台日志与我预期的相反,如下所示:

有什么问题吗?

请提供一个指向此错误的最小复制版本的链接

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

请提供您看到的异常或错误

  • 没有回应 *

请提供您发现此错误的环境(执行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)

还有什么吗?

  • 没有回应 *
2eafrhcq

2eafrhcq1#

您在这里看到的是Node包管理/解析工作方式的影响,而不是Angular库特有的影响。
由于the source file angular-library.ts导入ol,节点模块解析逻辑将在最近的node_modules树中查找,以从库本身找到ol依赖关系,这与应用程序导入的模块(来自根node_modules)是不同的副本。这会导致这些模块的多个副本被捆绑,从而导致重复代码和instanceof不匹配。
在一个有多个项目/库的工作空间中,使用npm/Yarn工作空间是很有好处的,在那里你可以从根目录安装依赖项,同时仍然考虑嵌套项目的package.json文件。这允许包管理器将嵌套的依赖项提升到根目录node_modules,只要版本允许。这个提升过程删除了模块的重复项,解决了这个问题。

ocebsuys

ocebsuys2#

tldr;这不是一个bug,但我不知道文档目前在多大程度上涵盖了类似的内容,以及这是否需要额外的文档(因为这只是节点模块解析的结果,而不是特定于Angular )。

c8ib6hqw

c8ib6hqw3#

我们可能需要改进对等依赖项部分,并解释为什么应该使用对等依赖项。

相关问题