为 Angular 7 中的特定组件生成单独的构建文件

Posted 2023-03-13

【中文标题】为 Angular 7 中的特定组件生成单独的构建文件

【英文标题】：Generate seperate build file for a particular component in angular 7

【发布时间】：2019-09-11 00:40:25

【问题描述】：

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

我使用

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

 ng new angular-app --create-application=false

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

 ng generate application app-one

 ng generate application app-two

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

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

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

请阅读我已经尝试了解的内容。

我尝试了以下步骤：

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

ng new app-name --prefix custom

添加角度元素包：

ng 添加@angular/elements

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

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

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

    import   Injector from '@angular/core';
       import   createCustomElement  from '@angular/elements';
        ...
        export class AppModule 
            constructor(private injector : Injector)
            const el = createCustomElement(MyComponent, injector : this.injector);
            customElements.define('my-component',el);
    
            ngDoBootstrap() 
        

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

npm i ngx-build-plus

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

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

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

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

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

     const fs = require('fs-extra');
        const concat = require('concat');
        (async function build() 
            const files = [
                './dist/<your_project>/scripts.js',
                './dist/<your_project>/main.js',
            ]
            await fs.ensureDir('elements_ngx')
            await concat(files, 'elements_ngx/combined-script.js');
        )()   

运行文件获取单个js文件：

节点 concat_ngx.js

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

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

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

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

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

【问题讨论】：

你能达到你想要的吗？

是的@supercool，但不是我喜欢的方式。不得不将我的方法从基于组件的架构更改为基于应用程序的架构。

好吧！因此，如果将它们拆分为两个项目，则可以解决依赖 w.r.t 构建。请分享您的方法作为答案，以便对来到这里的任何人有所帮助。

【参考方案1】：

在 Angular 7 中，添加默认或自动引导：-

这是 Angular 应用程序引导和 main.ts 保存应用程序起点的默认方式。

platformBrowserDynamic().bootstrapModule(AppModule);

更多信息请看这里：-https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604

【讨论】：

感谢希尔帕的回答。但我面临的问题是如何自动化这个引导处理来创建不同组件的构建，我每次都必须手动更改这段代码。

显然，我必须利用 Angular 7 的应用系统来获得单独的构建。叹息……

【参考方案2】：

ng serve -o app-one 要么 ng serve -o app-two

更多信息请看这里https://medium.com/@klauskpm/change-the-default-angular-project-27da8fca8721

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review