假设存在一个用纯 Javascript 编写的 Javascript 库，通常用于普通的非框架网站。如何创建一个易于npm install编辑的 Angular 库，以使该库无缝地在 Angular 应用程序中使用？

我在 Angular 文档或更广泛的网络上找不到任何关于此过程的好的演示。

举个例子，有一个很棒的 Javascript 库叫做p5.js，它不能直接与 Angular 一起使用。如何创建一个 Angular 模块，您可以简单地将其导入到您自己的 Angular 模块中，并在完全支持 Angular 的情况下使用它的所有强大功能？

我使用 Angular CLI 6 命令创建了一个库。

基本上，库是一个功能模块，它包含许多子功能模块，通过路由（延迟加载）连接。

我在运行时收到以下错误

我尝试了所有可能的路径

但没有任何效果

是否支持带有 ng-packagr 的角库延迟加载？

我想在 VMware 的清晰框架上构建一个带有一些自定义组件的 Angular 库项目。

运行ng build --prod draft应该产生一个库输出。

相反，我得到：

构建错误：draft/node_modules/@clr/angular/clr-angular.d.ts 中的模块“ClrFormsNextModule”导出的意外值“未定义”

错误：：draft/node_modules/@clr/angular/clr-angular.d.ts 中的模块“ClrFormsNextModule”导出的意外值“未定义”

这是package.json库项目的文件

里面root/projects/draft/tsconfig.lib.json

里面root/projects/draft/src/draft.module

环境细节

• 角度版本： 6.0.3

• 清晰度版本： 0.12.0

• 操作系统和版本： macOS 10.13.6

• 浏览器： Chrome 68

尝试使用 ng-packagr 创建库。

我运行的内部项目：

ng g library nt-select --prefix nt

在 nt-select.component.ts 里面

和 nt.select.module：

问题是 nt-select 发出错误找不到mat-form-field、mat-select、ngx-mat-select-search 的名称 ，即使我导入了所有模块。
以下教程：https
://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5 可能有什么问题？
提前致谢

我有一个 Angular CLI 工作区，其中包含两个库项目，foo并且bar. 当我构建两个库中的第二个时foo，构建失败并出现以下错误：

错误 TS6059：文件“/code/projects/bar/src/lib/types.ts”不在“rootDir”“/code/projects/foo/src”下。'rootDir' 应包含所有源文件。

我已经在 GitHub 上的沙盒存储库中重现了该错误。我已经尽可能地简化了代码，同时仍然遇到错误。您可以通过npm run build在rootDir-expect-all-source-files-error分支上执行来重现错误。错误的原因是什么？这可能是ng-packagror ngcor的错误tsc吗？或者它只是一个配置问题？

观察

下面是我可以使构建通过的代码更改，但我想知道是什么导致了代码的错误。

bar.component.ts

构建失败

构建通行证

在构造函数中初始化列表属性而不是内联

酒吧服务.ts

构建失败

构建通行证

删除数据类型

我有一个 Angular 6 应用程序，可以处理诸如“未找到页面”、“错误”、“未授权”之类的路由。

这是我的路线的样子：

所有组件都有简单的 html 模板，如下所示：

一切正常，ng serve我想在多个应用程序中使用这些路由，因此我希望将其转换为可以在许多应用程序中导入的模块或库，如下所示

在我的原始应用程序中，我创建了一个带有ng g library routing-lib. 但我不知道如何将我的应用程序与图书馆联系起来。这就是我的项目结构的样子。

有什么建议或指示吗？

我创建了一个 Angular 6 组件库。该库基于 PrimeNG 组件。库中的组件之一是表格组件（基于 PrimeNG 表格）

为了允许库的用户在表的单元格中添加动态模板，我（在库中）创建了一个名为“VarintComponent”的组件，该组件有两个输入：

1）GuestComponent：字符串

2）GuestComponentData：任何

表的用户可以声明一列包含 VariantComponent，并将组件的名称传递给 GuestComponent 输入。componentFactoryResolver在运行时，VariantComponent 使用和动态创建和加载组件viewContainerRef。

来宾组件需要实现简单的接口以托管在 VariantComponent 中。

访客组件也被声明为它们模块的“<code>entryComponents”。

在不同的项目中使用该表时，我可以看到所有工作正常，并且 Gust 组件正确托管在 VarintComponent 中并显示在表中。

问题是，在构建生产包（使用ng build --prod）时，我得到：

无论来宾组件位于库还是客户端项目中，我都会收到此错误。

如果我使用ng build --build-optimizer=false

我在创建一个 hello world 库项目并通过 npm 从我们的本地注册表安装它来使用它时遇到问题。

我在我的图书馆消费者应用程序中不断收到此错误消息：

库包正在安装到 nodemodules 文件夹中就好了。这是一个屏幕截图：

这是捆绑在 npm 包中的 package.json 的内容：

这是我尝试导入它的方式：

关于我如何在这里解决问题的任何指示？该库本身只是一个 hello world 库，没有外部依赖项或任何东西，只是暂时尝试证明路径。

谢谢！

- - 编辑

所以看起来像在 projects/ng-test-lib/package.json 中指定一个主要属性解决了我的问题，但我的问题是为什么 Angular 的库脚手架在生成库时不将主要属性添加到 package.json 文件中?

添加

添加主要属性对我来说是不好的做法吗？

我使用“ng generate library”命令创建了一个 Angular 6 库。该库在 --prod build 之后在我的基础组件中使用，然后在主应用程序的 app.module.ts 中导入。库中的 ...Component 文件有@Input("leftPanel") leftPanel: ElementRef;

base.component.html 上的 HTML Div 元素如下所示：<div #leftPanel></div> 库元素使用其选择器：
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>

库组件实现 AfterViewInit。在实现方法中，这段代码执行失败：this.leftPanel.nativeElement.style.flexBasis = '50%'; 它说，this.leftPanel.nativeElement is undefined。但我可以看到 this.leftPanel 指向 div。想知道为什么即使@Input leftPanel 是'ElementRef'类型，它也不允许this.leftPanel.nativeElement`？

提前致谢！

我正在尝试为Angular 6库配置路径（我已成功为以前的 Angular 项目配置了路径）

这是tsconfig.json文件中我以前的应用程序的工作：

然后使用它，例如：

在我的新应用程序中，我在tsconfig.**lib**.json文件中尝试相同的方式：

我试图像这样在我的库的组件中导入一个类，但它不起作用（VSCode 找不到该文件）：

请注意，import主项目中的语句正在运行：

知道我做得不好吗？

谢谢你的帮助。