问题标签 [angular-library]

In angular 5 , install package or lib required npm install. I'd like to know if it is possible to include library like this :

<script src="http://xxxx/.js" ><script>

or use angular-cli

I don't know which file i should put in the new project .Or how to use it for example :

In angularjs 1.x we could use the script xxx for us to include 3rd party lib, i'd like to do is the same doing the 3rd party lib without using npm install.That's all.It better using below example

````

```

大家好，我需要一些帮助，因为我似乎无法让它工作。我想我可能使用了不正确的语法或其他东西。

我目前正在使用 YO https://github.com/jvandemo/generator-angular2-library构建 Angular 4 库

所以除了@Input装饰器之外一切都在工作。

这里有一些简单的代码

我使用 npm 构建包，然后导入 dist 到另一个应用程序，然后导入模块。

然后我按如下方式使用此组件：

它工作得很好，并显示了正确的消息。

我的问题是关于当我像这样绑定 hello 属性时

我koos = 'hello I am koos;'在后端有变量，它根本没有绑定到它？

我应该使用其他方式来做到这一点吗？还有另一种绑定@Input 和@Output 变量的方法吗？

您的洞察力将不胜感激。

根据父组件的要求：

我显然删除了其他代码，因为这是唯一需要的部分。

我创建了一个自定义属性指令库包并安装到 myProject 中，当我尝试使用此自定义指令时会引发错误。

错误错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“appHasAccess”，因为它不是“输入”的已知属性。

我使用的代码如下：

我已经做了所有可能的尝试。任何人都知道我如何解决这个问题。

1.指令：HasAccessDirective.ts

2. 模块：DigiUserRightsModule.ts

我按照Nikolas LeBlanc 的这篇教程构建了一个 Angular 4 组件库。本教程描述了一种在另一个项目中重用模块的方法，方法是打包一个项目并将其安装到另一个项目中。

首先，这是我的软件版本：

• Windows 10 专业版：1709 内部版本 16299.371
• 角 IDE：17.0.0.c0000019t201804160508
• ng-packagr：2.4.2
• @角/*：5.2.10
• 打字稿：2.5.3
• rxjs：5.5.10
• 节点：9.4.0
• npm：5.6.0

除了标题“创建我们的包”之外，我无法进一步遵循本教程，因为执行以下命令：

ng-packagr -p ng-package.json

执行此命令时会出现以下错误：

再次尝试时出现以下错误：

我也在我的 Mac 上尝试过，但一切正常，但我们都在 Windows 机器上工作。那么如何让 ng-packagr 在我的 Windows 机器上工作呢？

从我的库执行“ng build”时出现以下错误。

我目前正在使用 Angular 6，但我相信这个错误与版本无关。

/home/rafaelvicio/desenv/my-lib/arquitetura-web/projects/pf-siseg/src/lib/keycloak-service/keycloak.service.ts:13:1：为导出符号“KeycloakService”生成的元数据中遇到错误：
/home/rafaelvicio/desenv/my-lib/arquitetura-web/projects/pf-siseg/src/lib/keycloak-service/keycloak.service.ts:18:12：收集的元数据包含将报告的错误运行时：只能引用已初始化的变量和常量，因为模板编译器需要此变量的值。
{"__symbolic":"error","message":"变量未初始化","line":17,"character":11} 错误：/home/rafaelvicio/desenv/my-lib/arquitetura-web/projects/ pf-siseg/src/lib/keycloak-service/keycloak.service.ts:13:1：为导出的符号“KeycloakService”生成的元数据中遇到错误：
/home/rafaelvicio/desenv/my-lib/arquitetura-web/projects /pf-siseg/src/lib/keycloak-service/keycloak.service.ts:18:12: Metadata collection contains a error that will return at runtime: Only initialized variables and constants can be referenced because this variable的值是模板编译器需要。
{"__symbolic":"error","message":"变量未初始化","line":17,"character":11} 在 /home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@ angular/compiler-cli/src/metadata/collector.js:707:31 at Array.forEach () at validateMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler-cli/ src/metadata/collector.js:695:46) 在 MetadataCollector.getMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler-cli/src/metadata/collector.js:550 :21) 在 MetadataCache.getMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler-cli/src/transformers/metadata_cache.js:86:41) 在 Object.在 Object.readMetadata (/home/rafaelvicio/desenv/ my-lib/arquitetura-web/node_modules/@angular/compiler-cli/src/transformers/metadata_reader.js:46:37) 在 TsCompilerAotCompilerTypeCheckHostAdapter.getMetadataFor (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules /@angular/compiler-cli/src/transformers/compiler_host.js:464:38) 在 StaticSymbolResolver.getModuleMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot /static_symbol_resolver.js:480:49) 在 StaticSymbolResolver._createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver.js:268:33)33)33)在 TsCompilerAotCompilerTypeCheckHostAdapter.getMetadataFor (/home/rafaelvicio/desenv/ my-lib/arquitetura-web/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:464:38) 在 StaticSymbolResolver.getModuleMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules /@angular/compiler/src/aot/static_symbol_resolver.js:480:49) 在 StaticSymbolResolver._createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver .js:268:33)在 TsCompilerAotCompilerTypeCheckHostAdapter.getMetadataFor (/home/rafaelvicio/desenv/ my-lib/arquitetura-web/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:464:38) 在 StaticSymbolResolver.getModuleMetadata (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules /@angular/compiler/src/aot/static_symbol_resolver.js:480:49) 在 StaticSymbolResolver._createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver .js:268:33)在 StaticSymbolResolver.getModuleMetadata (/home/rafaelvicio/desenv/ my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver.js:480:49) 在 StaticSymbolResolver._createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@角度/编译器/src/aot/static_symbol_resolver.js:268:33)在 StaticSymbolResolver.getModuleMetadata (/home/rafaelvicio/desenv/ my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver.js:480:49) 在 StaticSymbolResolver._createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@角度/编译器/src/aot/static_symbol_resolver.js:268:33)_createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver.js:268:33)_createSymbolsOf (/home/rafaelvicio/desenv/my-lib/arquitetura-web/node_modules/@angular/compiler/src/aot/static_symbol_resolver.js:268:33)

keycloak.service.ts：

我使用 Yeoman 生成器 ( https://github.com/jvandemo/generator-angular2-library ) 创建了一个名为 my-lib 的 Angular 库。我的角度应用程序正在使用创建的库，一切正常。

我唯一遇到的问题是，在开发模式下，我必须对我的库进行频繁的更改并执行一些命令来重建库并将其发布到 NPM：

将库发布到 NPM 注册表后，我使用 npm install 命令将其重新导入到我的 Angular 应用程序中。

是否有更好的方法或更短的路径（在开发模式下）来检测库上的更改并将它们反射到我的消费应用程序？

ps：在全局node_modules目录下创建符号链接到库的dist目录：

并将全局库目录链接到 app 目录的 node_modules ：

不解决问题。。

我试图找到在各种角度应用程序（一些现有的，一些新的）之间共享角度代码（包含模块、服务、组件等）的最佳方式。我想标准的解决方案是将此共享代码发布为 npm 包，但由于多种原因，这是不可能的。Angular 6 库似乎适合我的用例，但我不确定：

• 我可以为一组库（即没有应用程序）创建角度工作区吗？
• 我可以从另一个工作区（即包含我的应用程序的那个）引用一个工作区中的库吗？

我正在尝试为 CI 集成构建 Angular 6 库，而不将其集成到 Angular 应用程序中。（出于多种原因）

到目前为止我所做的是：

• 创建一个 package.json 以安装所有 lib 的依赖项
• 创建一个angular.json引用 ci 文件的类似常规 angular6 应用程序（见下文）
• 复制所有ng-packages.\*.json并ng-package.ci.\*.json更新它们的路径以引用正确的文件和目录（node_modules、entryfiles等）
• 复制所有ts-config.\*.json并tsconfig.ci.\*.json更新它们的路径以引用正确的文件和目录（src、dist 等）

我期望通过运行ng build能够构建库，但我收到了以下消息：

无法确定 @angular/compiler-cli 和 typescript 的版本。

（但所有软件包都已安装；我检查了两次）

有没有人尝试过在不使用应用程序内的库的情况下构建其 Angular 6 库？

谢谢

我在使用 Angular 6 从延迟加载模块加载组件时遇到问题。

我使用 CLI 创建了一个库 - ng generate library @org/chat

更新angular.json的文件包括：

然后通过 AppComponent 成功加载模块：

到目前为止一切顺利，模块正在加载。

但是，ChatModule 有一个名为 ChatPopupComponent 的组件，我找不到使用对话框（或将其添加到 ViewChild 容器）来显示它的方法。

为了在对话框中打开一个组件，它需要在模块的 entryComponents 下声明，并在 AppComponent 级别导入：

但是当直接导入组件（并从库中导出它）时，我得到以下（明显的）错误：' Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'。由于它是一个延迟加载的模块，它显然还没有被导入。

当我尝试以下操作时：

我收到以下错误 -error loading module Error: No component factory found for EmailPopUpComponent. Did you add it to @NgModule.entryComponents?

似乎显示组件的唯一方法是在 中导入模块app.module.ts，尽管它违背了延迟加载模块的目标。

有没有办法做到以上几点，或者我错过了一些关于延迟加载模块和组件的基本知识？

我正在尝试在我的 angular npm 包中创建我认为称为辅助入口点的东西。我想要以下两个入口点

使用angular-cli生成基础包生成如下结构

根据 ng-packagr文档，您可以在名为 models 的数据服务下添加一个文件夹，然后在该文件夹中添加一个package.json文件夹，但 ng-packagr 似乎使用与 angular-cli 略有不同的结构。理想情况下，我正在尝试对类似于https://github.com/angular/angular/tree/master/packages/common的结构进行建模，但只要公众公开@scope/data-service，@scope/data-service/models我就会很高兴。

当我尝试创建类似于 ng-packager 推荐的结构时，我得到

error TS6059: File 'C:/projects/data-service-app/projects/scope/data-service/models/src/index.ts' is not under 'rootDir' 'C:\projects\data-service-app\projects\scope\data-service\src'. 'rootDir' is expected to contain all source files.

当我将模型目录移动到data-service\src目录中时，我的入口点是

如何摆脱辅助入口点上的 src？

使用 angular-cli 时创建具有辅助入口点的库的正确方法是什么？