问题标签 [angular-library]

我创建了Angular 库( ngx-wig )，我想提供一种通过使用插件来扩展其功能的能力。

在 Angular 中声明插件的最佳位置是什么？（可能类似于myLibModule.forRoot(..)）什么类型的实例应该是插件本身？

我通过使用主模块的configProvider为我注册插件的每个插件添加模块，解决了AngularJs的相同问题。不是很喜欢这个解决方案，因为插件自己注册，但它应该是使用库的应用程序的责任。

更新：相关问题在 github 上打开。

我有一组反应组件，我正在尝试在 Angular 2 应用程序中使用它们。

这是我尝试使用的主要 React 组件

现在在我的角度项目中，我有以下文件。

app.module.ts

app.component.ts

app.component.html

和 mycardhost.component.ts

我尝试了 OnInit 和 AfterContentInit 。我在给定的时间只有一个活跃的。最初在模板中，我没有 id 为“my-card”的 div（我在

以及 mycardhost.component.html 的模板文件，其中包含 id 为“my-card”的 div 标签，将在其中加载 React 组件。

当我运行应用程序时，React Store 和 Reducers 正在初始化。我怎么会收到以下错误：这表明我传递的 document.getElementById() 不是有效的 DOM 元素。

我尝试在 Angular 组件中放置断点，但它们都没有被执行。不知道我做错了什么。非常感谢任何帮助。

我想创建一个库以在我的 Angular 4 应用程序中使用，对于一些我将在它上面做的业务，我有一个enum应用程序需要稍后使用。问题是，我这样声明枚举my-enum.ts：

但是，当我执行以下操作时，我似乎无法从我的应用程序中导入它：

我应该如何正确地进行此操作？

我有一个要求，我需要根据数据加载不同版本的模块。

像每月数据这样的东西，如果我的模块代码在当月发生了一些变化，那么上个月页面的视图/逻辑不应该有任何变化，数据保持不变，视图也是如此。

我计划使用版本为每个模块创建自定义库。有了这个，我可以将我的数据映射到模块版本。

由于我的应用程序很大并且涉及很多模块和版本，因此我无法将模块/库的所有版本与捆绑包一起传送到客户端。

有人可以提出更好的方法来处理这个要求吗？

我一直在按照本指南创建一个自定义角度库，但我遇到了一个相当奇怪的问题。

练习背后的想法很简单，为特定功能（在本例中为人员目录）创建一个框架，开发人员可以在其中 npm 安装它并提供实现我们接口的自定义数据源。

这个界面如下

在库项目中，这个骨架是根模块引用的一个模块，它被设置为提供继承ISDDataService的数据源

这就是提供服务的方式（app.module.ts）

骨架模块还有使用数据源查询数据的结果组件

这个设置就像一个魅力，所以继续打包，创建一个 tarball 并创建一个新的“测试”应用程序，这样我就可以使用 npm install 导入模块（所有这些步骤都按照博客文章）。到目前为止一切顺利，安装模块没有错误。

测试应用程序只是我在构建库时使用的完全复制品。继承 ISDDataService 的相同 AppServices，提供服务的相同方式等。我尝试构建它，但一切都陷入困境。错误再奇怪不过了

这样的事情有什么"Subject<Refiner[]>' is not assignable to type 'Subject<Refiner[]>'"意义！！？？？

我在这里和那里做了一些改变，但没有任何效果

请注意，此问题不仅适用于炼油器属性。如果我删除它，它会级联到函数等等。

我开始认为这种方法可能不是正确的方法......在这里我认为它很干净

无论如何，如果有人能伸出援手，将不胜感激

它在Visual Code中，指令hideFabOnscroll来自我的插件，它按预期工作。我想我错过了一些东西，很想知道它。

这个包的 Git 仓库

我正在为 Angular 构建一个组件库，我们将在项目之间共享它。但是当我构建包时，html 文件不会被复制到 dist 文件夹中。我得到错误angular Failed to load text-input.component.html。

这是我的 tsconfig.json：

这是编译的组件：

这是带有模板 url 的未编译组件：

这是编译后的目录：

这是未编译的目录：

这些是我在 package.json 中的构建脚本：

我尝试过搜索，但大多数结果都已过时或严重依赖更多依赖项。我缺少一些配置吗？

问题是我在 forRoot 方法中调用了一个函数，如下所示：

app.module.ts

环境.ts

配置如下所示：

当我使用 aot 进行构建时，它说：

src/app/app.module.ts(41,20) 中的错误：在 'AppModule' 模板编译期间出错 装饰器不支持函数调用，但在 'environment' 'environment' 调用 'loadJSON' 中调用了 'loadJSON'。

有任何想法吗？？

:)

更新的解决方案：

我的最终解决方案是，在应用程序中，使用 Suren Srapyan 所说的函数获取器。在库中，forRoot 方法应如下所示：

:D

我正在开发一个 Angular 库（GitHub repo 链接），有

• lib 模块源放置在./src
• 测试应用程序源放置在./app
• lib 分布于./dist

构建过程使用rollup.js并基于angular-library-starter。我还有一个从生成 npm 包./dist并将其安装到./node_modules. 问题是应用程序与导入的 lib 模块一起工作正常，当我从或./src导入它时不起作用：./dist./node_modules

在构建过程中没有错误，但是浏览器控制台说（对于./dist导入./node_modules情况）：

GET http://localhost:4200/ui-scroll.component.html 404 (Not Found)
加载 ui-scroll.component.html 失败

确实，我的 lib 模块有一个具有外部模板的组件：

如果我要内联模板（使用template而不是templateUrl在@Component设置中），它将起作用，我对其进行了测试。但我希望模板位于单独的文件中......我相信这是构建过程的责任。有一堆与我的构建过程相关的配置，我认为在这里列出它们并不是一个好主意。它们可以在lib 存储库中找到（或者我可以根据要求发布任何确切的部分）。

有没有人遇到过外部 html 模板汇总捆绑的问题？

我正在为跨多个应用程序共享的组件创建一个角度库。在库中的组件内使用库内部的服务时，我遇到了麻烦。

该服务旨在注入应用程序的根目录（而不是库），并且可以在整个应用程序中使用。

在这种情况下，我们正在查看ToastServiceand UIToastComponent。是UIToastComponent从UIToastModule.

然后应用程序导入UIToastModule应用程序内部的AppModule，其中还提供ToastService.

该<ui-toast></ui-toast>标签位于应用程序的app.component.html文件中。

这个想法是，在应用程序内部的任何组件中，开发人员都可以注入ToastService和调用this.toastService.success('Great Success!')，由 接收UIToastComponent并显示 toast。

似乎无法获取服务，并且在运行时出现以下constructor错误：UIToastComponent

ToastService内部的导入语句UIToastComponent如下所示：

该库遵循Angular Package Format v5，最初基于https://github.com/juristr/ngx-tabs-libdemo

这是该库的源代码： ngx-example-library

编辑

我已经forRoot()按照 Günter Zöchbauer 的建议实施了，但不幸的是我仍然得到相同的结果，很可能我实施不正确......

以下是库中新创建的UICoreModule外观：

这AppModule是应用程序的内部：

感谢对此的帮助，这真是令人难以置信。打赌这真的很容易——当你知道怎么做的时候！

编辑 (2)

上面提到的解决方案在 AOT 模式下工作，但不是JIT 模式。很高兴现在能忍受这一点，无论如何，该应用程序都会构建 AOT。开发可能会随着应用程序的增长而变化。