在 static & 中使用 Angular 2 组件非 SPA 网络应用程序 [英] Using Angular 2 components in static & non-SPA web applications

问题描述

我想知道是否可以在非 SPA 应用程序中使用使用 Angular CLI 构建的 Angular 2 组件.我想开发一些独立的小部件，如组件 &在我的静态网站或现有的非角度网络应用程序中引导这些组件.

I would like to know if it is possible to use Angular 2 components built using Angular CLI in non-SPA apps. I would like to develop some independent widget like components & bootstrap those component in my static website or already existing non-angular web application.

有没有办法在 Angular CLI 中使用生成的构建包来包含在静态 HTML 页面中 &根据要求引导组件.

Is there any way to use generated build bundle in Angular CLI to include in static HTML pages & bootstrap the components as per the requirement.

或者什么是执行此类实现的建议方法，即构建 Angular 2 组件 &在非 SPA 应用中使用这些.

Or what is the suggested way of doing such implementations, i.e. build Angular 2 components & use those in non-SPA apps.

推荐答案

我也一直在尝试解决这个问题，最终找到了答案，如果您不希望 Angular 完全控制整个前端，您可以使用 Angular Elements.这些组件已导出以在 Angular 应用程序之外运行，但仍支持属性和其他 Angular 功能.

I had been trying to figure this out also and finally found the answer if you don't want Angular to absolutely control the entire frontend you can use Angular Elements. These are components that have been exported to run outside an Angular app but still supports attributes and other Angular functionality.

我在网上找到了几篇文章，对其进行了更详细的解释.

I found a couple of articles online that explain it in a little more detail.

https://nitayneeman.com/posts/a-角度元素实用指南/https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5https://angular.io/guide/elements#example-a-popup-服务

当我尝试这些示例时，我遇到了一些关于 createCustomElement 无法添加它们的错误.这可能是由于我用于调试的浏览器(Edge)不支持自定义元素，所以我最终不得不安装 @webcomponents/custom-elements

When I tried the samples I ran into a couple of errors about createCustomElement not being able to add them. This was probably due to the browser I was using for debugging (Edge) due to not supporting custom elements so I ended up having to install @webcomponents/custom-elements

npm install @webcomponents/custom-elements

然后一切顺利.基本上，底线是你像往常一样创建你的应用程序，但不是引导 AppModule 而是创建一个自定义的 ngDoBootstrap 方法来初始化和安装组件作为自定义元素.注意:需要在app模块的entryComponents数组中添加组件.

Then everything ran fine. Basically, the bottom line is you create your app as usual but instead of bootstrapping the AppModule you create a custom ngDoBootstrap method to initialize and install the components as custom elements. Note: You need to add the components in the entryComponents array in the app module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   entryComponents: [
      TestComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   // bootstrap: [AppComponent]
})
export class AppModule {

   constructor(private injector: Injector) {
   }

   ngDoBootstrap() {
      const customElement = createCustomElement(TestComponent, { injector: this.injector });
      customElements.define('app-test', customElement);
   }
}

test.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-test',
    template: '<div style="border: 1px solid red">Test Component Works!</div>',
    styleUrls: ['./test.scss']
})
/** test component*/
export class TestComponent {
    /** test ctor */
    constructor() {

    }
}

然后为了解决跨浏览器支持问题，您还需要更新polyfills.ts并在最后添加以下内容.

Then in order for cross-browser support issues, you also need to update the polyfills.ts and add the following at the end.

// Used for browsers with partially native support of Custom Elements
import '@webcomponents/custom-elements/src/native-shim';

// Used for browsers without a native support of Custom Elements
import '@webcomponents/custom-elements/custom-elements.min';

如果您查看上面的示例，他们提到使用自定义构建脚本将所有文件合并到一个文件中，但您也可以简单地加载单个文件.

If you look at the samples above they mention using a custom build script to combine all the files into one file but you can also simply load the individual files also.

<!doctype html>
<html>
<head>
    <base href="/">
</head>
<body>
    Testing Component
    <app-test></app-test>

    <script type="text/javascript" src="~/js/runtime.js"></script>
    <script type="text/javascript" src="~/js/es2015-polyfills.js"></script>
    <script type="text/javascript" src="~/js/polyfills.js"></script>
    <script type="text/javascript" src="~/js/styles.js"></script>
    <script type="text/javascript" src="~/js/scripts.js"></script>
    <script type="text/javascript" src="~/js/vendor.js"></script>
    <script type="text/javascript" src="~/js/main.js"></script>

</body>
</html>

注意:为了将我的脚本输出到 wwwroot/js 文件夹中，我更新了 angular.json

Note: In order for my scripts to be output into the wwwroot/js folder I updated the angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../wwwroot/js",
        ...
      }
   }
},

然后只需使用普通命令 ng build 来生成脚本.您还可以使用 ng build --watch 来在每次发生更改时保持脚本更新.

then just used the normal command ng build to generate the scripts. You can also use ng build --watch to keep the scripts updated everytime there is a change made.

这篇关于在 static & 中使用 Angular 2 组件非 SPA 网络应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！