如何将此 AngularJS HTML 模板添加到我的 Angular 8 项目中答案

【问题标题】：How to add this AngularJS HTML template to my Angular 8 project如何将此 AngularJS HTML 模板添加到我的 Angular 8 项目中
【发布时间】：2019-07-05 08:26:35
【问题描述】：

问题是我有很多 HTML 模板，其中包含标签和 AngularJS 代码。我目前的项目使用的是 Angular 8，其中一个关键部分基本上是使用我在这个新项目中的所有 AngularJS 模板，尽可能少地做工作（因为将来其他用户必须能够向项目添加新模板）。

我必须能够将这个 HTML AngularJS 模板添加到我当前的项目中。为此，我正在使用 ngUpgrade，但它具有很大的误导性，我无法实现这一点。

这是一个模板，对于这个问题尽可能地简化：

HTML

    <body>
        <script>
            angular.module('myApp', [])
                .controller('myController', function ($scope, $timeout) {   
                $scope.local = 'es'; 
                BigFunction($scope, $timeout);
            });

            var texts = {
                title: {
                en: 'A simple title',
            };
            // other constanst go here

            function BigFunction(scope, timeout) {
                scope.texts = texts;
                scope.$watch('content', function(end, ini){
                    // some logic when 'content' changes
                }, true);
            // more logic
            }
        <script>
        <div>
            <!-- Lots of tags using ng-bind and other AngularJS tools -->
        </div>
    </body>

我必须尽可能少地接触它。我不知道我是否应该将脚本的逻辑与 HTML 分开，或者我是否可以按原样导入它并工作。考虑到我以前没有使用 AngularJS 的经验，我是一名 Angular 2+ 开发人员。

如果我必须将逻辑与模板分开，我应该将 angular.module 放在哪里？常量呢？

【问题讨论】：

标签： javascript angularjs angular angular-upgrade

【解决方案1】：

我建议你使用Web Components

基本上，您必须将 AngularJS 应用程序包装为 Web 组件，然后将其导入您的 Angular 8 应用程序。你最终会得到这样的东西

<my-angularjs-app></my-angularjs-app>

它可以导入到 Angular 8 应用程序的任何组件中。

没有关于如何做到这一点的官方解决方案，但那里有很好的例子。我建议你关注这个：

UPGRADING WITH WEB COMPONENTS: FROM ANGULARJS TO ANGULAR

一旦你在那里向下滚动，直到你看到 将 AngularJS 组件公开为自定义元素

在您设法将 AngularJS 应用程序捆绑为一个 Web 组件后，将整个应用程序放在一个脚本 (main.js) 中，您必须将其复制到您的 Angular 8 应用程序中。

在您的 Angular 8 应用中，创建文件夹 assets/web-components/my-angularjs-app
将您从 AngularJS (main.js) 生成的文件复制到您刚刚创建的文件夹中
将文件导入 angular.json - 将此文件添加到脚本：assets/web-components/my-angularjs-app/main.js
您的 AngularJS 应用程序现已导入，但在您可以在组件中使用它之前，我们还需要做一件事。你必须让 Angular 知道会有一些 Angular 可能不知道的选择器。为此，请转到您的 app.module.ts 并添加 schemas: [CUSTOM_ELEMENTS_SCHEMA]
您现在可以使用您声明的选择器在您喜欢的任何地方使用您的 AngularJS 应用程序（这部分在我发布的链接中）。 <my-angularjs-app></my-angularjs-app>

【讨论】：

【解决方案2】：

我推荐 ng-book，它有一整章关于混合应用程序。请注意，本书中的 UpgradeAdapter 已弃用。但许多概念仍然有效。

NgUpgrade 是做你想做的事情的官方包。

您必须做的第一件事是将脚本放入适当的文件中。而不是在 HTML 中。然后你就可以进行认真的编码了。

您必须遵循 NgUpgrade 文档才能使这 2 个应用程序运行。 https://angular.io/guide/upgrade#bootstrapping-hybrid-applications

你需要一个 AngularJS 的引导程序：

angular.bootstrap(document.body, ['heroApp'], { strictDi: true });

还有一个 Angular 8 的引导程序：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

你会注意到 NgModule 有一条指向 AngularJs 的参考线。

他们提供的代码是用于 JIT 编译的。

AOT 编译中的生产构建将如下所示：

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

const { AppModuleNgFactory } = require('../aot/src/app/AppModule.ngfactory');

enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

您必须知道 AngularJS 中的指令对应于 Angular 8 中组件的含义。

你有两个选择。

inject Angular 8 components in ANgular JS directives
inject Angular JS directives in ANgular 8 components.

我建议在 Angular 8 组件中升级 AngularJs 组件。像这样，将来你会趋向于只迁移到 Angular 8。

将每个 AngularJS 组件复制到 Angular 8 组件中需要一些工作。

为了减少工作量，请按原样运行 Angular JS。并将 Angular 8 指令放在 AngularJS 的模板之外。

<div id="angularjs-root"></div>
<div my-unaltereted-angular8-component></div>

这可能是我错了，你不能把它们分开。但值得一试。

我自己，我将 DOM 元素从 Angular8 动态注入到 JQuery 应用程序中。但是你不能在 AngularJS 中这样做，因为它具有所有节点的生命周期。然而，在移除节点的更改检测渲染后，小心翼翼地删除来自 Angular 8 的巨大节点树可以注入到 AngularJs 模板的模板中，并且不会降级。

这是我用的。

  addComponentToElement({ component, element }: { component: any, element: any }) {
    // Create a component reference from the component
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    // Attach component to the appRef so that it's inside the ng component tree
    this.appRef.attachView(componentRef.hostView);

    // Get DOM element from component
    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    // Append DOM element to the body
    element.appendChild(domElem);

    // detect changes
    componentRef.changeDetectorRef.detectChanges();
  }

AppModule 需要在 entryComponents 中添加每个组件：

  entryComponents: [ InjectedCOmponent1m InjectedCOmponent2]

【讨论】：