问题标签 [ng-packagr]

Angular 的i18n很棒，像ng-packagr这样的工具让组件库打包变得非常容易，但是它们可以结合起来吗？

如果我想打包和分发具有可翻译组件的组件库怎么办？可能吗？如何打包这样的库？翻译文件会与软件包一起提供，还是应该在主应用程序中定义？

如果有人能指点我一些文档，那就太好了。谢谢

运行命令时

我得到以下输出

我应该担心那些Side effects和Dropping duplicated台词吗？我们在这里谈论什么样的副作用？

有趣的是，他们在几个版本之前并不存在。

在 SO 上搜索ng-packagr side effects，没有产生任何结果 - 我是唯一对此感兴趣的人吗？

问题类型：错误/问题

描述

我正在使用 ng-packagr lib 将我的库编译为 js。我已经编译了所有内容，没有任何问题，但是当我想使用 ng build --prod （启用 AOT）来使用我的库时，我收到了错误：

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

当我删除 .forRoot 方法时，出现错误：

ERROR in : Unexpected value 'BsDropdownModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/node_modules/angular-library-name/free/dropdown/dropdown.module.d.ts' imported by the module 'AppModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/src/app/app.module.ts'. Please add a @NgModule annotation

请注意，这ng --prod --aot=false 不会产生任何错误。

如何复制：

下载 repo：https ://github.com/Bloodcast69/aot-error ，输入 npm install ng build --prod.

预期行为

想要无错误地使用 AOT 构建（我需要它与 Angular Universal 兼容）版本信息

ng-packagr: 2.4.1 @angular/*: 5.2.9 typescript: 2.5.3 rxjs: 5.5.6 node: 8.1.0 npm/yarn: npm: 5.6.0

文件：

app.module.ts：

dropdown.module.d.ts：

dropdown.module.ts（编译为 JS 之前）：

注意 我已经阅读了整个互联网以找到对我有帮助的东西，但没有任何成功。我检查了这个主题：

当静态 forRoot 具有参数时，FeatureModule 在 AOT 构建期间失败

https://github.com/angular/angular/issues/14707

如果缺少一些需要的信息，请告诉我，我会提供。

谢谢，Bloodcast69

我正在尝试构建我的 angular5 项目，但它失败了。

这是deps 树的摘录：

simple- kaishi <- kaishi < - ngx -admin-lte

ngx-admin-lte：（开发分支）是流行的 adminlte 主题的 Angular 版本

kaishi：（master 分支）是我的核心库，其中包括 ngx-admin-lte 并添加了其他核心功能。

simple-kaishi : (master 分支) 是我的示例项目，其中包括 kaishi

重现：

1. 克隆开士
2. 开士>npm install
3. kaishi>npm run packagr将 kaishi 打包为特征库
4. 克隆simple-kaishi
5. 简单的开始>npm install
6. 简单的开始>npm link ../kaishi/dist
7. simple-kaishi>npm start应该没问题
8. simple-kaishi>npm run build构建失败！

构建错误是

错误：/git/simple-kaishi/node_modules/kaishi/node_modules/ngx-admin-lte/ngx-admin-lte.d.ts 中的模块“NgxAdminLteModule”声明的意外值“未定义”

怎么了？

- 细节 -

我的ng -- version

+++ 更新 +++

我注意到问题出现了，ng build --prod但不是ng build。我的项目结构不是原因，但原因是围绕外部库ngx-admin-lte

我创建了两个应用程序（第一个应用程序是一个库，另一个应用程序使用库中的组件）。

目的是延迟加载导入的库。

当我触发ng serve它时，它会给出一条错误消息，但是当我触发 ng serve --prod --aot --build-optimizer命令时没有问题。这个问题ng build也出现在。

1. 该库是用以下内容构建的ng-packagr：

   /li>

2. 创建了一个库 *.tgz 文件。

   /li>

3. 在另一个应用程序中使用导入的库。

   /li>

消费应用：tsconfig.json

我正在使用 ng-packager 创建我自己的带有角度的警报包，它使用 ionicons 包。

包链接是https://www.npmjs.com/package/jtp-alert并且该项目是开放的，并且在https://github.com/jtpdev/ng-alert中。

但是当我安装 jtp-alert 时：

npm install --save jtpdev

我会去使用它，找不到scss文件的字体。

控制台显示：

我无法理解为什么在主路径上搜索字体。

我该怎么办，来解决这个问题。

Angular CLI：1.7.3 节点：8.9.4 操作系统：win32 x64 Angular：5.2.9 ...动画，通用，编译器，编译器-cli，核心，表单... http，语言服务，平台浏览器.. . 平台-浏览器-动态、路由器

@角/cli：1.7.3：0.3.2：0.3.2：0.3.2：1.2.0：1.10.2：0.3.2：0.3.2打字稿：2.5.3 webpack：3.11.0

我们在我们的应用程序中对外部包模块进行延迟加载，外部包是使用 ng-packagr 创建的。

来源链接：

外部模块：惰性模块 应用程序：app-consume

重现问题的步骤。

1. 使用“npm run cd”捆绑外部模块“lazy-module”
2. 使用“npm install dist.tgz”将包包含在“app-consume”应用程序中</li>
3. 当我们运行或构建 app-consume 应用程序时，使用“ng serve”或“ng build”会失败

[注意：问题不会在“ng serve -aot”和“ng build -aot”命令中重现]

如果我们使用“ng serve”命令使用开发服务器为应用程序提供服务，它会失败并显示以下错误消息。错误：已记录 bundle.d.ts 从 TypeScript 编译中丢失。请通过 'files' 或 'include' 属性确保它在您的 tsconfig 中

./node_modules/bundle/bundle.d.ts 中的错误模块构建失败：错误：TypeScript 编译中缺少 D:\consume\node_modules\bundle\bundle.d.ts。请通过 'files' 或 'include' 属性确保它在您的 tsconfig 中。丢失的文件似乎是第三方库的一部分。已发布库中的 TS 文件通常是库打包不良的标志。请在库存储库中打开一个问题以提醒其作者并要求他们使用 Angular Package Format 打包库。在 AngularCompilerPlugin.getCompiledFile (D:\consume\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:674:23) 在 plugin.done.then (D:\consume\node_modules\@ngtools\webpack\src\loader. js:467:39) 在 process._tickCallback (internal/process/next_tick.js:188:7)

期望：能够在“ng serve”和“ng build”的帮助下运行和构建应用程序

我们有一个带有 auth0 设置的主要角度应用程序。在主应用程序内部存在另一个作为 npm 模块导入的子应用程序。子应用程序还有一个独立的可部署版本，用于开发和测试目的。

由于独立版本必须有自己的身份验证方式，并且子应用程序具有不同的角色和不同的权限，我们为子应用程序创建了另一个 auth0 客户端，但目前还没有使用它。因此，子应用使用与主应用相同的 auth0 客户端。

根据目前集成应用的设置，accessToken 由主应用设置，由子应用读取，以便能够添加到请求头中。现在我们计划将其自己的客户端凭据用于子应用程序。为此，我们还需要在 localStorage 中添加新的键值对（可能在子应用配置中的现有键值对中添加前缀），这样它们就不会发生冲突。

在这一点上，我想问一下这对于这样的子应用程序是否是一个理想且正确的设置。我愿意接受任何建议。先感谢您。

我有一个 Angular UI 组件项目和另一个正在使用它的 Angular 应用程序。因此，每次如果该包裹有任何变化，我都需要做

npm uninstall --save @my-lib/package-one和npm install --save @my-lib/package-one

这太耗时了。我已经尝试过 npm 链接，但它不起作用。

还有其他方法可以实现此设置吗？

用于ng-packagr包装和角度版本 5。

编辑 1 还尝试使用此视频中解释的方法，但不幸的是它不起作用。 https://www.youtube.com/watch?v=Tw8TCgeqotg&feature=youtu.be

我为我的项目创建了一个包含一些组件和服务的核心库。我用 ng-packagr 构建了这个库。在引用库的消费项目中，我构建了包含库提供的组件的 web 应用程序。到目前为止没有什么特别的。但有时我想要一个组件（来自我的库）从库外的服务调用方法。这可能吗？我可以以某种方式向库中定义的组件注入服务吗？

干杯