问题标签 [angular-builder]

我将使用 Angular 7 框架开发一个非常大的应用程序。

我使用创建了一个空白的角度工作区

在这个工作区中，我使用以下命令创建了两个 Angular 应用程序：

在这两个应用程序中，我将有多个组件，每个组件都彼此独立工作。

我正在寻找一种方法来为每个组件创建一个单独的 javascript 构建文件，以减少构建大小。

并使用每个单独构建的 js 文件将每个组件用作 Web 组件。

请阅读我已经尝试过的内容以获得更好的想法。

我尝试了以下步骤：

1. 为自定义角度元素创建一个带有 custom 前缀的存储库：

   ng new app-name --prefix custom

2. 添加角度元素包：

   ng 添加@angular/元素

3. 根据需要创建封装为 native/emulated/none 的自定义元素组件：

   ng g 组件 my-component --inline-style --inline-template -v Native

4. 在 app.modulte.ts 中定义自定义元素

5. 安装 ngx-build-plus 包以构建单个包（例如，用于 Angular Elements）：

   npm i ngx-build-plus

6. 在 angular.json 文件中更新应用程序的 builder 部分，使其指向 ngx-build-plus：

   "builder": "ngx-build-plus:build",

7. 在 package.json 中添加脚本以运行构建器：

   "build:ngx": "ng build --prod --output-hashing none --single-bundle true"

8. 如果需要，通过创建 js 文件“concat_ngx.js”将创建的 dist 文件夹中的 scripts.js 和 main.js 合并：

7. 运行文件以获取单个 js 文件：

   节点 concat_ngx.js

8. 在任何 Angular/Other 项目中使用 js 文件来使用创建的自定义组件。

但这里的问题是我每次都必须在 app-module.ts 中更改组件引导程序

我需要一种自动化的方式来在运行时更改 app-module.ts 中的引导。

但这里的问题是我每次都必须在 app-module.ts 中更改组件引导程序

我需要一种自动化的方式来在运行时更改 app-module.ts 中的引导。

我的项目用户 angular 版本 7，这里是 angular.json 配置

当我为生产构建时，我的 main.js 文件太大了，接近 12MB，这使得我的应用程序加载页面非常缓慢。几乎初始加载需要 4 - 5 分钟

这是构建结果

这是我的分析器结果

提前致谢

我正在开发一个由后端 + 前端组成的 Angular 7+ 项目。现在我有一个要求，我需要再创建一个由前端+后端组成的项目。但是存在一些可重用的前端代码，可以在两个应用程序中重用。

我的项目结构

要求

所以当我读到图书馆概念时，我可以找到

1）创建两个前端应用程序并共享一个公共库

我无法采用这种方法，因为我正在使用通过 Visual Studio 创建的 asp.net 角度模板项目（如图所示）。两个应用程序（项目一和项目二）都有自己的 FE+BE。因此，我无法将两个 FE 应用程序分组到同一个文件夹中并让它们使用共享库。

2）创建库并上传到npm并用作依赖项

我不能采用这种方法，因为代码是专有的，不能在网络之外共享。也没有本地公司 npm 注册表来使用公司 npm。

我知道这可以使用库概念来完成。但我不明白如何在多个应用程序中做到这一点。有人可以帮助解决这个问题。谢谢 ！

我们想在 webpack 中使用新的 Angular 8 Ivy 编译器。我们不使用 Angular CLI。这可能吗？如何才能做到这一点？我似乎无法找到有关此要求的信息。

我最近将@angular-builders/jest7 更新到 8。在迁移指南中，它指出我应该删除它，@types/jest因为它现在随 Jest v24 一起提供。（我还更新了我的 tsconfig）

到现在为止还挺好。

但是现在我的测试失败了

而 VS Code 与 jest 全局变量无关。根据迁移指南，当我从 tsconfig 中删除 typeRoots 时，哪种有意义。

在 tsconfig.json（根目录，IDE 使用）中：

删除 typeRoots 数组

同样，由于 Jest 类型被打包在 jest 包中并且不位于 node_modules/@types 下，因此您不希望类型根被限制在特定文件夹中。

但是什么给了？迁移指南说我应该删除@types/jest，但我如何让它一次又一次地玩得jest.mock很好jest.clearAllMocks？

我试过：

请指教。

这是我的配置（与简单应用示例相同）

相关开发包

tsconfig.json

tsconfig.spec.json

角.json

在以下场景中组织组件、服务的最佳实践是什么。

在我们的产品中，有 70-80 个组件，每个组件也有一个可注射的服务。

并且最大所有下拉选项数据都通过 api 动态获取

方法

案例：正如我上面所说，所有下拉菜单都是动态方式， AComponent 注入 Aservice、Bservice、Dservice等等

当前代码现在使用 Promise 组织成这样

应用设置.ts

在上述情况下，都是独立的服务功能，彼此之间没有依赖关系。在从所有 api 获取所有数据后要记住的一件事是我只需要加载页面，并且在 http 中的 apiurl 中，直到在该路由之后使用的端口号一个常量变量被硬编码

所以我想使用订阅者使用angular forkjoin来清理代码。在以下解决方案中，这是最佳实践

解决方案1：在组件本身中使用fork join

注意事项

在所有组件中

我的经理告诉我在 api 中更改参数值的机会更少，例如： '/RMAN_PRODUCTS/RMAN_PRODUCTS/producttype="xoc"' // "xoc"(parameter)

. 但即使我在想，如果我遵循 seccode 方法（解决方案 2(b)），即使我改变了参数或路由，那么它'非常容易并且改变它所花费的时间更少）

在 Angular 8 中使用 web worker 在 CDN 上部署时会出现跨域问题（https://github.com/angular/angular-cli/issues/14901），所以我想使用angular-builder来自定义我的 worker。Angular cli 使用worker-plugin，我使用worker-loader来导出inline工作者。

这是我的代码：

app.module.ts

应用程序.worker.ts

角.json

额外的webpack.config.js

但是当我运行时出现错误页面ng serve，如何配置？

假设我们有一个很大NgModule的 the SharedModule，它导出了多个组件中需要的很多组件。通过将其SharedModule导入功能模块通常会产生开销，因为所有共享组件都会被导入，而不仅仅是那些必要的。拆分会SharedModule减少构建/编译时间吗？除了可读性更好的代码之外，将其拆分成更小的模块还有什么好处吗？

非常感谢你的帮助！

We recently upgraded our Angular version from 7 to 8 and have run into some problems when using Jest as our test runner. The goal is to get our build pipeline running again with our javascript tests. We are getting an error: An unhandled exception occurred: core_1.experimental.workspace.Workspace.fromPath is not a function

I have upgraded both "@angular-builders/jest": "8.0.4" as well as upgraded "jest": "24.8.0" as per the angular-builders README.

I have updated our Jest config property setupTestFrameworkScriptFile to setupFilesAfterEnv

I have tried clearing out my node_modules and reinstalling them as per this issue

我每 10 秒使用 Observable.timer(0,10000) 调用一个 API，并取消订阅 ngOnDestroy() 方法。但是这个调用并没有停止，它不断地添加到队列中，即使在离开该组件后也调用。

我试图破坏ngOnDestroy()功能上的组件。但它仍然是它的接听电话。

它应该只在这个组件上调用，并且应该每 10 秒调用一次，但是如果我们去其他组件调用被添加到队列中并且一旦返回到实例组件，它每 10 秒调用多次。

代码：