app.module.ts

Question

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

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

或者建议的做这种实现的方式是什么，即构建Angular 2组件＆amp;在非SPA应用程序中使用它们。

Answer 1

我认为这不会起作用，就好像你不提供Angular文件一样，我不确定浏览器如何理解你所说的内容。

您可以在其他Angular应用程序中利用Angular组件，但我不认为您可以在非角度/非SPA情况下使用它们，除非您将整个核心软件包与它一起提供并将其嵌入到页面的某个位置

Answer 2

@chrispy是对的。构建角度应用程序时，您将拥有index.html文件以及一些.js，.css和其他资源。您必须包含所有这些文件（尤其是javascript文件）并使其在您的服务器上可用，以使您的组件正常工作。

如果你只想让你的应用程序的一部分使用javascript，为什么不使用jQuery或普通的javascript？

Answer 3

您可以使用/重用组件，但每个小部件需要单独的引导程序指向应用程序标记，因为实际上您将在同一页面上运行多个角度应用程序。

Answer 4

我也一直试图找出答案，如果您不希望Angular完全控制整个前端，则可以找到答案，可以使用Angular Elements。这些是已导出以在Angular应用程序外部运行但仍支持属性和其他Angular功能的组件。

我在网上找到了一些文章，对其进行了更详细的解释。

https://nitayneeman.com/posts/a-practical-guide-to-angular-elements/ https://blog.angulartraining.com/tutorial-how-to-create-custom-angular-elements-55aea29d80c5 https://angular.io/guide/elements#example-a-popup-service

当我尝试采样时，我遇到了一些关于createCustomElement无法添加的错误。这可能是由于我不支持自定义元素而用于调试的浏览器（Edge）所致，所以我最终不得不安装@webcomponents/custom-elements

npm install @webcomponents/custom-elements

然后一切正常。基本上，最基本的方法是照常创建应用程序，而不是引导AppModule，而是创建自定义ngDoBootstrap方法以将组件初始化并安装为自定义元素。 注意：您需要在应用模块的entryComponents数组中添加组件。

app.module.ts

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并在末尾添加以下内容。

// 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';

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

Index.html

<!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

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

然后仅使用普通命令ng build生成脚本。您还可以使用ng build --watch每次进行更改时保持脚本更新。

在静态＆amp;中使用Angular 2组件非SPA网络应用程序

4 个答案:

app.module.ts

test.component.ts

Index.html