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

问题描述

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

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-如何创建自定义角度元素55aea29d80c5 https://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 Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！