问题标签 [angular-library]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
73 浏览

angular - 如何正确设置 npm 依赖项?

我想将我的 Angular 模块贡献给 npm,我做到了。但是我仍然对如何正确设置 npm 依赖感到困惑。

Angular 模块依赖于@angular/cdk @angular/material @angular/core he. 我注意到 angular-cli 已经自动设置了@angular/core @angular/commoninpeerDependencies属性。我认为@angular/cdketc 与 相同@angular/core,所以我也添加@angular/cdk @angular/material @angular/corepeerDependencies。但是当我创建一个新项目并将这个模块引入项目时,angular-cli 警告我“找不到模块@angular/material”。最后,我通过添加属性@angular/cdk @angular/material @angular/core he来解决问题。dependencies但是我仍然对为什么应该将其添加到dependencies而不是peerDependencies. 此外,我应该将其添加到dependenciesREADME.md 中还是将其添加到 README.md 中,让其他开发人员自行将依赖项引导到项目中。

项目 Github 地址

0 投票
1 回答
1700 浏览

ngrx - 带有 NGRX 的 Angular 组件库项目?

我现在已经在几个项目中使用了 NGRX,并且通常非常喜欢它。但是我正在为是否在我的下一个项目中使用它而苦苦挣扎,该项目将创建一个角度组件库。

是否建议在 Angular 库项目类型中使用 ngrx?您将如何设置根状态与功能状态?我的库项目的主模块会附加到 ngrx 根存储吗?如果是这样,那么如果我的库在也使用ngrx的父应用程序中使用,根存储会发生冲突吗?

更新(更多上下文):

库中的大多数组件将是典型形式的数据类型的东西。例如,提供跨多个应用程序搜索、更新、创建和删除事物的组件。我们将它们打包为一个组件库(和角度元素库),因为它们需要在多个 Web 应用程序中使用,直到这些 Web 应用程序融合为一个新的超级 Web 应用程序(融合时间线是 1 年以上) )。我们正在研究的另一个集成路径是在所有这些客户端应用程序中加载 iframe。

组件本身将连接到 API 层以执行所有数据 I/O。组件可能需要在组件之间共享部分状态。

0 投票
3 回答
6542 浏览

angular - AGM 角度谷歌地图以编程方式设置缩放

我正在使用 AGM(Angular Google Maps)和 OpenLayers。

我需要以编程方式设置 AGM 的缩放比例,但无法弄清楚它是如何工作的。

HTML 地图...

组件代码

我实际上是从 AngularJS 移植这个的您的组件到另一个应用程序。

0 投票
1 回答
2158 浏览

angular - 纱线工作区隔离

我在空设置时遇到了一些纱线问题(当我在 npm 上没有任何版本的库时)。

我有一个结构如下的多模块项目:

项目 lib2-ws 和 lib3-ws 需要构建 lib1。

我试图发布(安装、构建和发布) lib1 以便我可以发布lib2lib3

但是当我运行yarn workspace lib1-ws installyarn install(在lib1-ws文件夹内)时,yarn 确实会尝试安装lib2-wslib3-ws,并使用以下错误中断安装操作:

错误在“npm”注册表上找不到“lib2-ws@0.0.1”所需的包“lib1@^0.0.1”。

不知道我错过了什么,是否有一些我可以运行的命令来忽略这个workspace-aggregator东西?

谢谢。

0 投票
2 回答
5299 浏览

angular - Angular 库包依赖项

我使用 CLI 创建并捆绑了一个 Angular (7.2.0) 库:

ng g 库 MyLibrary

ng build MyLibrary

这给了我my-libary.umd.js我需要的捆绑包。

目前,所有依赖项都作为 peerDependencies 添加到库 package.json 中。我想做的是实际将一些依赖项与库(.umd)捆绑在一起。将它们添加为“ dependencies”而不是“ peerDependencies”似乎并没有解决问题,我真的看不出有什么区别?

我怎样才能做到这一点?

应捆绑 ngx-spinner 的 package.json 示例

0 投票
1 回答
1126 浏览

angular - 带有离子 4 的自定义 Angular 7 库 - 无法解决“../@ionic/angular/dist/core.ngfactory”构建产品错误

我们已经构建了小型 angular 7/ionic 4 库,我们希望通过 git url 安装在内部的多个项目中使用。服务项目正常工作,从库中导入的所有工作正常。但是运行时ng build --prod出现以下错误

我尝试了不同的设置 - 将所有内容移动到 devDependencies(主 package.json),从 peerDependencies(库 package.json)添加和删除包。添加

(lib ng-package.json) 但没有任何帮助。IonicModule 从'@ionic/angular'主库模块文件 (edetail-core.module.ts) 中导入。

这是 ng-package.json

库包.json

主包.json

非常感谢任何帮助!

0 投票
1 回答
2214 浏览

angular - 同时运行 ng build --watch 和 ng serve 时,Angular 7 库 html-template 更改不会影响到应用程序

Angular 7 库 html 模板更改在使用“ng build library --watch”和“ng serve application”在不同 cmd 中同时运行时不会影响到 Angular 应用程序。

所以我首先打开带有 watch 标志的库,然后我使用 ng serve 启动应用程序。将库更改为 ts 文件将在应用程序上启动 HMR,并且更改会受到正确影响。但是当我更改某些组件 html 或 css 文件时,HMR 会检测到更改并开始更新应用程序,但在 UI 中看不到更改。如果我停止 ng serve 并重新启动它,那么这些 html 和 css 更改会影响到 UI。

我检查了更改是否会影响到库构建将输出文件的 dist 目录。因此,即使它注意到它们,ng serve 也不会以某种方式接受它们。

我使用 tsconfig.json 路径引用库。因为我的应用程序的 baseUrl 是 src 我需要在这样的配置中使用 ../

我在部署路径中使用@,因为我需要从库中导入 scss 文件。如果我从 npm 安装这个包,这种方式导入路径是相同的。因此,我正在寻找的配置是通过使用 --watch 模式来简化库开发。

软件包版本

编辑:Angular cli github repo https://github.com/angular/angular-cli/issues/13588已经报告了这个问题所以它是cli中的错误。

0 投票
1 回答
1055 浏览

angular - Angular MonoRepo Nx - 在应用程序中使用库

情况: 我对 Angular 很陌生,想创建一个包含多个应用程序和库的 Angular 工作区。我按照本教程以 MonoRepo 的形式使用 Nx 创建了一个 Angular 工作区。我按照教程中介绍的步骤创建了一个应用程序和一个库。

所以我有一个名为 first-app 的应用程序和一个名为 first-lib 的库。在 first-lib 中,我有一个组件 first-lib-component。我想在我的 first-app.html 中像这样使用组件或最好的库本身:

我已经在 app.module.ts 中导入了 first-lib,并将 first-lib-module 添加到导入中。

问题: 我想在我创建的应用程序中使用创建的库,这就是我目前失败的地方。我收到一条错误消息,指出“'first-lib-component' 不是已知元素”。

Nx 网站指出:

...库的客户端在同一个存储库中,因此不需要打包和发布步骤。

如果不需要打包,我如何使用我的共享组件/项目(库)?

我的问题: 如何在应用程序中导入和使用库(组件)?

0 投票
2 回答
8137 浏览

angular - Angular 6 库 - 无法解析条目

angular构建库项目时出现以下错误。

module当我在public_api.ts文件中添加新内容时,我只会收到此错误

我正在使用以下命令来构建模块

ng构建库

知道为什么我会收到此错误吗?

0 投票
2 回答
4791 浏览

angular - Angular 7 - 安装本地库(未发布) - 项目设置

我有一个 Angular 应用程序,它有一个核心模块和一个共享模块。我的架构是这样的:

当我构建库时,输出文件夹是 dist-lib/*
当我构建应用程序时,输出文件夹是 dist/*

所以我使用 npm install 将我的库包含在我的应用程序中:
-“core”:“file:./dist-lib/core”-“shared”:“file:./dist-lib/shared”

一切正常,但是当有人设置项目时我遇到了问题。由于找不到库(dist-lib/core not found...),项目无法“npm install”,而且我无法构建库,因为我没有安装 ng-packager(需要 npm 安装)。

我试图将 core & shared 放在 optionalDependencies 中。没有什么比......好。

我可以在其他 Angular 应用程序中移动我的库,但这并不好笑。

有人?