问题标签 [ng-packagr]

谁能提示从哪里开始使用 ng-packagr 将图像和 css 文件包含到 Angular 库中？

当我尝试使用 material: 2.0.0-beta.12 作为依赖项运行 ng-packagr 时收到构建错误。它正在寻找node_modules/@angular/packages/materialnode_modules 中不存在哪些包文件夹，所以我得到ENOENT: no such file or directory open.

我已将此提交给材料和 ng-packagr 问题跟踪器，但这很可能是我在本地做的事情。我在这里开始了一个新项目material-issue-project，它唯一做的就是从材料库中导入一个模块（MatIconModule）。

其他人遇到过这个问题吗？使用 ng-packagr 和 material-beta.12 的人可能不会太多，但任何想法或提示将不胜感激。

我不确定如何解释它，因为我不明白发生了什么，但这里是材料问题和 ng-packagr问题。我确定需要澄清，所以请告诉我。我还附上了我收到的错误的屏幕截图。

在 angularjs 中开发两个本地项目（其中一个导入另一个）时，我只需在模块 B 的文件夹中运行“npm link”，然后在我的主模块文件夹中运行“npm link module-B”，每当我更改模块 BI 中的文件时会直接在我的浏览器服务模块 A 中看到它。

但是使用 angular(4) 似乎并不容易。

我使用 ng-packagr 生成 dist 文件夹。
我在 dist 文件夹中运行 npm link 。
我在主模块的文件夹中运行 npm link module-B 。
然后我运行 ng serve --preserve-symlinks。

到目前为止一切顺利，它可以理解模块 B 的组件。但是如果我尝试更改模块 B 中的某些内容，重新运行 ng-packagr，我的主模块的“ng serve”无法编译，我必须停止并启动 ng serve .

我认为 ng-packagr 首先删除了 dist 文件夹，这会触发 ng serve 中的重建，失败并且不会注意到删除 dist 文件夹后新创建的文件。

我们是否必须使用 ng-packagr 或者是否有其他方式来进行多项目本地开发。

更新：

如果我们在 ng-packagr.js 中注释掉这一部分，它不会删除文件夹，并且每当文件更改并运行 ngpackagr 时浏览器都会更新：

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

但是运行 ng-packagr 需要一些时间，具体取决于库的大小。因为它构建了整个事物，而不仅仅是更改的文件。

使用使用的打包库为我的应用程序提供服务时，我收到以下警告： . 此外，在提供应用程序时，我收到以下错误消息：

core_1 与顶部的其他模块一起导入： import core_1, { Component, Inject, Injectable, InjectionToken, NgModule } from '@angular/core';

更新！！ 配置如下：ng-package.json

tsconfig.json

我正在创建一个提供多个 UI 组件的 Angular 组件库。这个库将在另一个 Angular 项目中与 npm 一起导入。对于我的组件的主要部分，它工作正常，除了需要带有图像 url 链接（传单）的 3rd 方库 css 文件。

我的组件库遵循 Nikolas LeBlanc 撰写的关于使用 Angular CLI 和 ng-packagr 构建组件库的文章。

项目结构如下：

ng-packagr 可以很好地捆绑到其他项目可用的 npm 库中，结构如下：

为了使用 Leaflet 库，我必须在我的组件 sass 文件中导入 css 文件

位置-component.component.scss

位置组件.component.ts

Leaflet.css 和 Leaflet-draw.css 使用名为 images/ 的文件夹来导入地图的图标。运行 ng-packagr 后，我的捆绑组件包含传单样式，但与图像文件夹的链接断开。

ui-components.umd.js（ng-packagr 捆绑文件）

当这个 npm 包安装在测试项目中时，我的地图没有图标，因为浏览器通过 http 请求请求它们。

测试项目 app.module.ts

传单地图

浏览器请求

一种可能的解决方法是退出 angular-cli 和 ng-packagr 环境并使用带有 Postcss 插件的 webpack 将图像 url 转换为 base64 图像，但我没有设法制作一个有效的捆绑包，因为捆绑结果与我的非常不同原始项目配置。

简而言之，使我的组件工作的唯一方法是在使用组件库的项目中导入传单 css 文件。

有没有办法将这些图像集成到我的角度组件库中，而不是使用这个库在项目中建立依赖关系？

我正在尝试将我的角度模块导出为单独的 npm 模块。

所以我试图用 npm ( "packagr": "ng-packagr -p ng-package.json"

一切顺利，直到“编译到 FESM15”：

我在下面粘贴日志：

tsconfig.json

在我的 package.json 下面：

不知道为什么该软件包不想构建。当我正常构建模块（npm run build）或什至用于生产（npm run build -- --prod）时，一切似乎都可以正常工作。

谢谢。

我有一个动态注入服务的问题。

运行项目时，我得到了错误：

服务没有注入到 NPM 包 2。

如果我在主项目中直接包含npm包2的代码，是没有问题的。BaseService 将作为 ServiceB 注入。

知道可能出了什么问题吗？我使用 ng-packagr ( https://github.com/dherges/ng-packagr ) 来生成 NPM 包。

我正在尝试将本地开发的 Angular 项目/模块导入 Angular 应用程序而不将其发布到 npm 存储库中。

首先，我按照本教程以 UMD 格式构建我的模块（我跳过了发布部分）：

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

然后，我尝试通过执行以下命令行在最终应用程序中安装我的模块：

这成功地添加了我的模块，就像@myscope/myModule在package.json我的应用程序中一样，但问题是无法识别应用程序中模块的导入。我最终收到以下错误：

在 mynode_modules中，创建了文件夹@myscope，在其中，有一个快捷方式，../path-to-my-module名称为myModule

有捷径这一事实会是问题的根源吗？如果是这样，如何解决？

在一个角度 cli 项目中，我设法像这样嵌入 json

• 添加typings.d.ts

• 导入.json

但是如果我想用 ng-packagr 将它编译成 Angular 5 模块，我会收到以下错误：

.../.ng_pkg_build/my-module/ts/src/app/my-module.module 处出错。ts:28:33：找不到模块“../assets/data.json”。

有没有人遇到过这个问题并知道如何解决？

我构建了一个 Angular 应用程序 [MASTER]。在其中，我想导入另一个使用功能模块 [FEATURE_MODULE] 构建的应用程序。

要生成 FEATURE_MODULE，我遵循了本教程：模块教程。这会导出一个名为“SharedModule”的功能模块（参见教程）。我将 EagerComponent 包含到此模块中以便导入 MASTER。

另一方面，我按照另一个教程中提到的步骤生成库组件（包）：如何构建组件教程

最后，我将该组件导入 MASTER，但是当我运行它时，Angular 会显示以下消息。

我的问题是：

如何导入和使用包含在功能模块中的组件？

App.module.ts：

“EagerComponent”是我想在 MASTER 中使用的组件。

输出：

在 C:\entorno\diciembreALG\src 中寻找模块

使用描述文件：...\package.json（相对路径：./src）

使用描述文件后，字段“浏览器”不包含有效的别名配置：...\package.json（相对路径：./src）

使用描述文件：...\package.json（相对路径：./src/lazy-eager/src/app/eager.component）无扩展名

字段“浏览器”不包含有效的别名配置 C:\entorno\diciembreALG\src\lazy-eager\src\app\eager.component 不包含

存在 .ts 字段“浏览器”不包含有效的别名配置 ...\src\lazy-eager\src\app\eager.component.ts 不存在

.js 字段“浏览器”不包含有效的别名配置 ...\src\lazy-eager\src\app\eager.component.js 不存在

作为目录 ...\src\lazy-eager\src\app\eager.component 不存在

角度版本：

角 CLI：1.6.1

节点：9.1.0

操作系统：win32 x64

角度：5.1.1

... 动画、通用、编译器、编译器-cli、核心、表单

... http、语言服务、平台浏览器

...平台-浏览器-动态，路由器

@角/cdk：5.0.1

@角/cli：1.6.1

@角/材料：5.0.1

@angular-devkit/build-optimizer：0.0.36

@angular-devkit/核心：0.0.22

@angular-devkit/原理图：0.0.42

@ngtools/json-schema：1.1.0

@ngtools/webpack：1.9.1

@原理图/角度：0.1.11

@原理图/原理图：0.0.11

打字稿：2.4.2

网络包：3.10.0