Angular 从现有项目生成角度元素

我们有一个现有的Angular 8项目，其中包括一系列常见组件（如自定义

日期选择器、数字输入等）。该项目本身是一个标准的Angular应用程序

我们希望将其中一些组件提取为角度元素，它们可以用于其他角度应用程序，甚至其他与角度无关的项目

生成的JavaScript文件中是否可能只包含特定于单个角度元素的代码

我需要的是这样的东西：
ng构建——元素myDatePicker

这应该为
myDatePicker元素
生成所有JavaScript文件，仅包含所有需要的依赖项，但不包含项目中的任何其他代码（如其他
组件、模块，
）

当我使用
ng build
时，整个应用程序仍应正常构建

可以创建和发布新库以扩展角度功能。如果您发现您需要在多个应用程序中解决同一问题（或希望与其他开发人员共享您的解决方案），那么您有一个库的候选者

生成库的命令是
ng generate library my lib

库通常包括可重用代码，这些代码定义了组件、服务和其他角度构件（管道、指令等），您只需将这些构件导入到项目中即可。库打包到npm包中用于发布和共享，此包还可以包括原理图，这些原理图提供了直接在项目中生成或转换代码的说明，与CLI使用ng generate组件创建通用框架应用程序的方式相同。例如，与库组合的原理图可以向Angular CLI提供生成该库中定义的特定组件所需的信息

来源：
您正在寻找用于JavaScript的模块绑定器，它可以将小部分代码编译成更大、更复杂的东西，如库或应用程序。
尝试使用RollupJS

这些命令假定应用程序的入口点名为main.js，并且希望将所有导入编译成一个名为bundle.js的文件

对于浏览器：

编译到包含自执行函数的
$rollup main.js--file bundle.js--format iLife
您需要做很多事情
我建议你读一下

此外，我还建议为要导出的共享组件创建一个新项目

然后在现有项目中将它们用作元素。（您需要为组件引用javascript、css文件和html标记）。比如像这样

    <link rel="stylesheet" href="https://xybot-v1-dev.web.app/dist/dlx-styles-1.0.css">

    <dlx-chat-fab 
      bot-name="Condo Bot" 
      popup-text="Hi I am your virtual concierge." 
      theme="blue_deep-orange" 
      agent="condo-dev">
    </dlx-chat-fab>

     <script type="text/javascript" src="https://xybot-v1-dev.web.app/dist/dlx-chatbot-1.0.js"></script>




你应该没问题。
将角度组件添加到非角度应用程序有点棘手，但也有一些缺点。您甚至可能想考虑创建没有角度的特定组件，然后将它们导入角度项目而不是其他方式。

我有一个angular项目（项目A）和一个jquery项目（项目B），我想在这两个项目之间共享一个组件。我可以通过创建一个基本的（没有路由器，没有额外的依赖项）项目（项目C）并将组件从项目a迁移到C来实现这一点。一个项目a从C中消费组件相对简单，因为它们都是有角度的。这是在6号之前。现在在Angular 6中，他们甚至创建了一个
ng生成库
。更多信息，请查看此答案

Angular有一些要求，当您构建应用程序时，它将在dist文件夹中为垫片、Angular框架、供应商包和共享组件代码创建一些文件。如果共享组件被非angular应用程序使用，则需要引用这些文件，因为您的组件是以angular编写的，因此需要angular的存在才能运行。此时，您还可以将Angular添加到非Angular应用程序中。我在jQuery应用程序中这样做，然后通过Rxjs在Angular中使用发送和接收事件的组合。
为了组件的可重用性，您可以在“通用”npm依赖项中提取组件。
可在此处找到角度文档：

请记住，您必须构建库项目，然后在npm注册表（公共注册表或私有注册表）上发布该包以用作依赖项

要在Angular之外使用角度组件，可以使用角度元素将组件转换为标准WebComponents（）

请记住，您仍然需要某种构建管道来将Angular代码转换为JS。
我建议您更具体地看一下。这将帮助你实现你所需要的

我可以给你一个关于你能做什么的简短指南


1） 第一件事是安装@angular/元素

npm i@angular/elements——保存

2） 此步骤包括修改您的
app.module.ts
。如果您只想构建一组选定的组件（自定义日期选择器、数字输入等），则必须先删除
引导程序：[]
，然后将其替换为
入口组件：[]
。在entryComponents中，您将放置要构建的自定义组件

entryComponents: [MyCustomDatePickerComponent, CustomButtonComponent]

3） 现在是时候告诉Angular引导您的自定义组件了。您还必须为自定义组件定义选择器。您将使用该选择器从您注入它们的任何其他应用程序中调用它们。例如：

4） 构建组件-如果运行
ngbuild--prod
，将获得多个文件。我们希望将这些文件合并到一个文件中，以便更轻松地使用和注入我们构建的自定义元素。有两个软件包可以帮助我们做到这一点<代码>npm安装--保存开发人员concat fs extra

创造

export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomButtonComponent,
      { injector: this.injector });
    customElements.define('my-button-element', el);
    const el2 = createCustomElement(MyCustomDatePickerComponent,
      { injector: this.injector });
    customElements.define('custom-date-picker', el2);
  }
}

const concat = require('concat');
const fs = require('fs-extra');

(async function build() {
  // Instead of /CustomElements/ put your project name - just check a dist folder to see how its formatted and make it that way
  const files = [
    './dist/CustomElements/runtime-es2015.js',
    './dist/CustomElements/polyfills-es2015.js',
    './dist/CustomElements/main-es2015.js'
  ];

  await fs.ensureDir('elements');
  await concat(files, 'elements/myCustomElements.js');
  await fs.copyFile(
    './dist/CustomElements/styles.css',
    'elements/styles.css'
  );
})();

"build:elements": "ng build --prod --output-hashing none && node elements-build.js",

ng generate application MyWebComponent --routing=false --skipInstall=true