Question

我想升级ng2组件以在ng2组件中使用。

如果我只使用模板字符串ng1组件进行升级，则可以正常工作。但是，如果我切换到使用templateUrl，应用程序崩溃并给我这个错误：

angular.js:13920 Error: loading directive templates asynchronously is not supported
at RemoteUrlComponent.UpgradeComponent.compileTemplate (upgrade-static.umd.js:720)
at RemoteUrlComponent.UpgradeComponent (upgrade-static.umd.js:521)
at new RemoteUrlComponent (remote-url.component.ts:11)
at new Wrapper_RemoteUrlComponent (wrapper.ngfactory.js:7)
at View_AppComponent1.createInternal (component.ngfactory.js:73)
at View_AppComponent1.AppView.create (core.umd.js:12262)
at TemplateRef_.createEmbeddedView (core.umd.js:9320)
at ViewContainerRef_.createEmbeddedView (core.umd.js:9552)
at eval (common.umd.js:1670)
at DefaultIterableDiffer.forEachOperation (core.umd.js:4653)

这是一个证明我的问题的插件：

https://plnkr.co/edit/2fXvfc?p=info

我已经关注了Angular 1 - ＆gt; 2升级指南似乎这个代码应该工作。我不太确定为什么它不起作用。

Answer 1

我找到了一个非常便宜的解决方案。

只需使用template: require('./remote-url.component.html')代替templateUrl: './remote-url.component.html'，它应该可以正常使用！

Answer 2

这实在令人沮丧，因为Angular升级文档明确表示可以使用templateUrl。永远不要提到这个异步问题。我通过使用$ templateCache找到了解决方法。我不想改变我的角度1指令，因为它使用了我的角度1应用程序，也将被角度4应用程序使用。所以我必须找到一种方法来动态修改它。我使用$ delegate，$ provider和$ templateCache。我的代码如下。我也使用它来删除replace属性，因为它已被弃用。

function upgradeDirective(moduleName, invokedName) {
    /** get the invoked directive */
    angular.module(moduleName).config(config);

    config.$inject = ['$provide'];
    decorator.$inject = ['$delegate', '$templateCache'];

    function config($provide) {
        $provide.decorator(invokedName + 'Directive', decorator);
    }

    function decorator($delegate, $templateCache) {
        /** get the directive reference */
        var directive = $delegate[0];

        /** remove deprecated attributes */
        if (directive.hasOwnProperty('replace')){
            delete directive.replace;
        }

        /** check for templateUrl and get template from cache */
        if (directive.hasOwnProperty('templateUrl')){
            /** get the template key */
            var key = directive.templateUrl.substring(directive.templateUrl.indexOf('app/'));

            /** remove templateUrl */
            delete directive.templateUrl;

            /** add template and get from cache */
            directive.template = $templateCache.get(key);
        }

        /** return the delegate */
        return $delegate;
    }
}

upgradeDirective('moduleName', 'moduleDirectiveName');

Answer 3

这个问题的一个非常低技术的解决方案是在index.html中加载模板，并为它们分配与指令正在寻找的templateUrls匹配的ID，即：

private compileTemplate(directive: angular.IDirective): angular.ILinkFn {
    if (this.directive.template !== undefined) {
      return this.compileHtml(getOrCall(this.directive.template));
    } else if (this.directive.templateUrl) {
      const url = getOrCall(this.directive.templateUrl);
      const html = this.$templateCache.get(url) as string;
      if (html !== undefined) {
        return this.compileHtml(html);
      } else {
        throw new Error('loading directive templates asynchronously is not supported');
        // return new Promise((resolve, reject) => {
        //   this.$httpBackend('GET', url, null, (status: number, response: string) => {
        //     if (status == 200) {
        //       resolve(this.compileHtml(this.$templateCache.put(url, response)));
        //     } else {
        //       reject(`GET component template from '${url}' returned '${status}: ${response}'`);
        //     }
        //   });
        // });
      }
    } else {
      throw new Error(`Directive '${this.name}' is not a component, it is missing template.`);
    }
  }

然后Angular会自动将模板放入$ templateCache中，这是UpgradeComponent的compileTemplate正在寻找模板开始的地方，因此无需更改指令中的templateUrl，因为id匹配templateUrl 。

如果你查看了UpgradeComponent的源代码（见下文），你可以看到已经注释掉的代码来处理获取网址，所以它必须在工作中，但目前这可能是一个可行的解决方案，甚至一个可编写脚本的。

WebProxy proxy = new WebProxy();
proxy.Address = new Uri("myproxyaddress");
proxy.UseDefaultCredentials = true;
proxy.BypassProxyOnLocal = false;  

WebClient client = new WebClient();
client.Proxy = proxy;

string doc = client.DownloadString("http://www.google.com/");

Answer 4

尝试使用requireJS和对我不起作用的文本插件进行require之后，我设法使用'ng-include'使它起作用，如下所示：

angular.module('appName').component('nameComponent', {
template: `<ng-include src="'path_to_file/file-name.html'"></ng-include>`,

我希望这会有所帮助！

Answer 5

我已经创建了一个方法实用程序来解决这个问题。基本上它将模板url内容添加到angular的templateCache中，使用requireJS和“text.js”：

   initTemplateUrls(templateUrlList) {
    app.run(function ($templateCache) {
      templateUrlList.forEach(templateUrl => {
        if ($templateCache.get(templateUrl) === undefined) {
          $templateCache.put(templateUrl, 'temporaryValue');
          require(['text!' + templateUrl],
            function (templateContent) {
              $templateCache.put(templateUrl, templateContent);
            }
          );
        }
      });
    });

您应该做的是将此方法实用程序放在appmodule.ts中，然后创建一个您将要从angular指令升级的templateUrls列表，例如：

const templateUrlList = [
      '/app/@fingerprint@/common/directives/grid/pGrid.html',
    ];

Answer 6

作为一种解决方法，我在AngularJS上使用$ templateCache和$ templateRequest将模板放入$ templateCache中，以获取所需的Angular模板：

app.run(['$templateCache', '$templateRequest', function($templateCache, $templateRequest) {
        var templateUrlList = [
            'app/modules/common/header.html',
            ...
        ];
        templateUrlList.forEach(function (templateUrl) {
            if ($templateCache.get(templateUrl) === undefined) {
                $templateRequest(templateUrl)
                    .then(function (templateContent) {
                        $templateCache.put(templateUrl, templateContent);
                    });
            }
        });
    }]);

Answer 7

我为此使用webpack的require.context：

templates-factory.js

@patch('A.d.D', new=D_prime)
def my_func(...):
    a = A() # a.d.D is D_prime

app.html-bundle.js

不要忘记将html-loader添加到您的 webpack.config.js ：

import {resolve} from 'path';

/**
 * Wrap given context in AngularJS $templateCache
 * @param ctx - A context module
 * @param dir - module directory
 * @returns {function(...*): void} - AngularJS Run function
 */
export const templatesFactory = (ctx, dir, filename) => {
    return $templateCache => ctx.keys().forEach(key => {

        const templateId = (() => {
            switch (typeof filename) {
                case 'function':
                    return resolve(dir, filename(key));
                case 'string':
                    return resolve(dir, filename);
                default:
                    return resolve(dir, key);
            }
        })();

        $templateCache.put(templateId, ctx(key));
    });
};

此外，您可能需要将相对路径转换为绝对路径。为此，我使用了自己编写的babel插件 ng-template-url-absolutify ：

   import {templatesFactory} from './templates-factory';

    const ctx = require.context('./', true, /\.html$/);

    export const AppHtmlBundle = angular.module('AppHtmlBundle', [])
        .run(templatesFactory(ctx, __dirname))
        .name;

Answer 8

此处给出的大多数答案都涉及以某种方式预加载模板，以使其可以与指令同步使用。

如果您想避免这样做-例如如果您有一个包含许多模板的大型AngularJS应用程序，并且不想全部下载它们，则只需将指令包装在同步加载的版本中即可。

例如，如果您有一个名为myDirective的指令，该指令具有一个异步加载的templateUrl，并且您不想预先下载它，则可以执行以下操作：

angular
  .module('my-module')
  .directive('myDirectiveWrapper', function() {
    return {
      restrict: 'E',
      template: "<my-directive></my-directive>",
    }
  });

然后，在对扩展'myDirectiveWrapper'的{{1}}调用中，您只需提供'myDirective'而不是super()即可提供升级的Angular指令。

Answer 9

如果您不想修改Webpack配置，快速/肮脏的解决方案是使用raw-loader导入语法：

template: require('!raw-loader!./your-template.html')

NgUpgrade：升级Angular1组件时无法使用templateUrl

9 个答案: