Question

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

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

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

在这个工作空间中，我有两个使用以下命令创建的角度应用程序：

 ng generate application app-one

 ng generate application app-two

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

我正在寻找一种为每个组件创建单独的javascript构建文件的方式，以减小构建尺寸。

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

请阅读我已经尝试过的更好的主意。

我尝试了以下步骤：

使用用于自定义角度元素的自定义前缀创建存储库：

ng新的应用程序名称-前缀自定义
添加角度元素包：

ng添加@ angular / elements
创建自定义元素组件，并根据需要将其封装为本机/模拟/无：

ng g组件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文件中的应用程序的构建器部分，使其指向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中的引导程序。

Answer 1

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

有关更多信息，请参见此处：-https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604

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

1 个答案: