问题标签 [ng-packagr]

在 Nikolas LeBlanc 的这篇优秀文章的帮助下，我正在尝试创建一个 Angular 4 组件库：

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

问题是……我的库依赖于一个外部 JavaScript 文件——我们称之为somefunctions.js.

在常规的 Angular 4 应用程序中 - 我已经能够通过引用文件中的angular-cli.json文件来做到这一点：

...然后将变量声明为文件any中的类型typings.d.ts。

这使得 JavaScript 文件可用于应用程序，并且运行良好。

但是 - 我的目标是创建一个 Angular 4 组件库，并将其打包/发布到 npm。

当我按照创建库的说明进行操作时 - 功能模块打包时没有somefunctions.js.

所以 - 如果其他人安装了我的模块，他们不会有somefunctions.js，而且它显然不会工作。

所以，我想我需要知道如何告诉 ng-packagr 捆绑模块以便它包含somefunctions.js，以及如何设置我的模块，以便当模块安装在其他应用程序中时我的代码可以引用该文件。

提前致谢！

这是一个复制它的仓库：https ://github.com/dragonflypl/ng-packagr-issue

1. 我创建了一个简单的包logging。 npm run build生成库 + 确实npm pack
2. 然后我fooGui使用 Angular CLI 生成并通过npm run consume安装 tgz安装库
3. npm run build从fooGui投掷中运行：

./src/app/app.component.ngfactory.js 中的错误 找不到模块：错误：无法解析 'C:\XXX\dev\ng-packagr 中的 'logging/src/modules/logging/logger/index' -issue\fooGui\src\app' resolve 'logging/src/modules/logging/logger/index' in 'C:\XXX\dev\ng-packagr-issue\fooGui\src\app' 解析的请求是一个模块使用描述文件：C:\XXX\dev\ng-packagr-issue\fooGui\package.json（相对路径：./src/app） 使用描述文件后，字段“浏览器”不包含有效的别名配置：C： \XXX\dev\ng-packagr-issue\fooGui\package.json（相对路径：./src/app）解析为模块 C:\XXX\dev\ng-packagr-issue\fooGui\src\app\node_modules '不存在或不是目录 C:\XXX\dev\ng-packagr-issue\fooGui\src\node_modules 不存在't 存在或不是目录 C:\XXX\dev\ng-packagr-issue\node_modules 不存在或不是目录 C:\XXX\dev\node_modules 不存在或不是目录 C:\ XXX\node_modules 不存在或不是目录 C:\node_modules 不存在或不是使用描述文件在 C:\XXX\dev\ng-packagr-issue\fooGui\node_modules 中查找模块的目录：C :\XXX\dev\ng-packagr-issue\fooGui\package.json (relative path: ./node_modules) 使用描述文件后，字段“浏览器”不包含有效的别名配置：C:\XXX\dev\ng -packagr-issue\fooGui\package.json（相对路径：./node_modules）使用描述文件：C:\XXX\dev\ng-packagr-issue\fooGui\node_modules\logging\package.json（相对路径：./src/modules/logging/logger/index) 无扩展字段“浏览器”不包含有效的别名配置 C:\XXX\dev\ng-packagr-issue\fooGui\node_modules\logging\src\modules\logging\ logger\index 不存在 .ts 字段“浏览器”不包含有效的别名配置 C:\XXX\dev\ng-packagr-issue\fooGui\node_modules\logging\src\modules\logging\logger\index。 ts 不存在 .js 字段“浏览器”不包含有效的别名配置 C:\XXX\dev\ng-packagr-issue\fooGui\node_modules\logging\src\modules\logging\logger\index.js '不作为目录 C:\XXX\dev\ng-packagr-issue\fooGui\node_modules\logging\src\modules\logging\logger\index 不存在

知道我做错了什么还是某处的错误？

我目前正在使用ng-packagr开发一个 Angular 库包。显然，构建的结果是在 './dist' 文件夹下生成的，它包含我想要发布到 npm 服务器并且需要作为根目录的所有文件（包括 package.json、js 和 d.ts 文件）我的包裹。

长话短说，我希望能够使用“npm publish”命令从根文件夹发布 ./dist 文件夹。是否可以将默认文件夹设置为发布（而不是发布根文件夹）？我知道我们可以使用npm publish dist，但问题是我的队友可能会不小心npm publish在根文件夹上进行操作，这会使整个根文件夹都被发布。

目前我正在使用以下版本：

在使用ng-packagr ( )将我自己的库与一些组件打包后"ng-packagr": "^1.6.0"，我将在我的应用程序上创建的文件添加到 node_modules 文件夹中，但是当我尝试使用ng serveor运行应用程序时ng serve --aot=false，出现此错误：

TypeError 中的错误：无法读取未定义的属性“成员”： 出现错误的图像

创建的库上的版本和使用该库的应用程序是相同的，并且似乎与打字稿版本有关。

我还尝试将库与其他 typescript 版本（如 2.4.2）打包（该版本对于 angular 5 最稳定）并使用该版本运行应用程序，但它不起作用。

这是我要打包的库中的 package.json：

这是使用该库的应用程序中的 package.json：

提前致谢。

使用 ng-packagr 打包一个项目@my/common-util 时，没有问题。该类在 abstract-person.ts 中包含一个名为 AbstractPerson 的抽象类。

在另一个名为 @my/common-impl 的项目中，创建了另一个 Person 类，它扩展 AbstractPerson 并使用 @my/common-util 包名导入它。当我使用 ng-packagr 打包它时，我收到以下错误-->

在 options.globals 中没有为外部模块“@my/common/abstract-person”提供名称 - 猜测“abstractPerson”

由于这似乎是一个警告，我继续将 @my/common 和 @my/common-impl 都 npm install 到另一个项目中，但是当我从 @my/common-impl 导入 Person 类时出现以下错误

./node_modules/@my/common-impl/esm5/common-impl.js 中的错误模块未找到：错误：无法解析 'C:\Data\me\ 中的 '@my/common/abst ract-person' node_modules\@my\common-impl\e sm5' resolve '@my/common/abstract-person' in 'C:\Data\me\node_modules\@my\common-impl\esm5' 解析的请求是一个使用描述的模块文件：C:\Data\me\node_modules\@my\com mmon-impl\package.json（相对路径：./esm5） 使用描述文件后，字段“浏览器”不包含有效的别名配置：C:\ Data\me\node_modules\@my\common-impl\package.json（相对路径：./esm5）解析为模块

我在 package.json 中尝试了一些东西，比如 externals、globals、umdModuleIds（见下文），但这些都没有奏效。

这是 package.json

还需要什么来纠正这个问题？

我有一个包含模块 M1 的应用程序 A1，它使用 ngx-translate 模块。模块 M1 由​​ ng-packagr 导出并由也使用 ngx-translate 模块的应用程序 A2 使用。我注意到的是 TranslateHttpLoader 从主机应用程序加载语言文件。不知何故，我想强制使用模块提供的语言而不是应用程序中的语言。
有什么办法可以做到这一点？

模块 M1 中的示例代码：

谢谢你。

我们正在使用 systemjs 将我们庞大的 angularjs 应用程序升级为混合 Angular 应用程序（angularjs + angular5）。我们已经开始在 Angular 5 中实现新功能。我正在使用 systemjs-builder 创建我的 main.ts 的捆绑文件，并使用 index.html 中的脚本标记包含此文件。

现在，问题是 systemjs-builder 正在将 main.ts 的全部内容及其所有依赖项打包到一个文件中（包括 app.module.ts、路由、服务、组件），所有从 main.ts 引用的内容。

缩小后我的文件大小为 1.2MB，非常大。我现在的表现很好。但是，将来随着我们不断添加更多组件或服务，捆绑文件的文件大小会增加，这可能会导致客户端速度变慢。我该如何摆脱这个问题。

system_prod.config 文件

})

gruntfile.js 中的代码——生成捆绑文件

我在 index.html 中使用 script 标签包含了 system-generated.min.js 文件。

任何帮助是极大的赞赏。我真的很担心在不久的将来随着应用程序的增长，捆绑的文件大小也会增长，对吗？这可能会导致客户端在下载巨大的捆绑文件时速度变慢。

注意：对于混合 Angular 应用程序，我们没有找到使用 angular-cli 或 webpack 的好文档。大多数情况下，他们谈到只使用 systemjs。这就是我们使用 systemjs 开始升级过程的原因。

操作系统：Windows 10

使用 Angular-CLI

dist我的最终目标是在运行后在文件夹中设置一个包含以下文件结构的包npm run packagr：

我angular-cli.json根据文档做了以下设置：

根据文档，这应该针对assets/styles我的 src 目录中的文件夹，抓取其中的所有内容，然后将其作为副本发送到 dist。它不会那样做，我已经做了很多次迭代。我想要的只是 dist 目录中的样式文件夹，因此当我运行npm pack它时，它位于包中并准备好上传。

包.json

我已经为 Angular 创建了一个外部模块，当我尝试在我的其他项目中使用它时，VsCode 不理解组件标签。

我正在使用 ng-packagr 创建模块。

例子：

但是，如果我 ng serve 甚至 ng build --prod --aot 它确实按预期工作......

我在自定义模块包中缺少什么来获得 VsCode 的智能感知？

我正在使用 ng-packagr 创建模块。

我正在用 ng-packagr 构建一个 Angular 5 组件库。组件最好开箱即用。这样您就可以安装库，一切都会正常工作。我的问题：该库有一些依赖项。我现在必须包含我在 angular-cli.json 文件中包含的引导程序（+jquery）。此外，我使用存储在单独文件夹中的自定义主题。我希望它们由 ng-packagr 打包，如果我安装库，则依赖项应该与它们一起安装，最好不要为库的用户做其他工作。这可能吗？如果有怎么办？

任何帮助，将不胜感激！谢谢！

撞