如何在 Angular Hybrid 应用程序中加载模板？答案

【问题标题】：How to load templates in angular Hybrid application?如何在 Angular Hybrid 应用程序中加载模板？
【发布时间】：2020-04-27 14:10:47
【问题描述】：

我最近将应用程序从 Angular 1.7 迁移到 Angular 8。在加载应用程序时，它无法加载模板。然后我在加载指令中使用了 require('./tempalte-name') 。但后来它给出了例外 “模块解析失败：意外令牌 (1:0)”

我以这种方式使用 raw-loader => require('raw-loader!./template-name') 控制台中没有错误。但在浏览器窗口中，模板显示为 [object Module]。

当我用原始模板替换 require('raw-loader!./template-name') 时，例如'Test'。显示正确

有什么方法可以获取模板html而不是[object Module]。

【问题讨论】：

【解决方案1】：

尝试将 @angular-devkit/build-angular 降级到版本 0.802.2。

由于 0.803.0 它显示 [object Module]

或者您可以尝试完全不同的方法 - 您可以使用 templateUrl 而不是使用 template: require() 但您必须将 html 文件复制到目标文件夹。

为此，您必须更改 angular.json 并设置资产

{
    "glob": "**/*.html",
    "input": "apps/lopa/src/app-ajs",
    "output": "/app-ajs"
},

并且在你的组件中使用这样的完整路径：

templateUrl: 'app-ajs/components/component-name.html'

【讨论】：

【解决方案2】：

试试这个

// @ts-ignore
import * as TEMPLATE from 'raw-loader!./myComponent.html';
...
{
  ...
  template: TEMPLATE.default
  ...
}

Int 对我来说很好用（angularjs + angular9 + angular-cli）

【讨论】：

感谢您分享这个 - 正在寻找一个在 Angular8/9 中工作的解决方案，作为模板：从 Angular 升级后 require('!raw-loader!./path') 不起作用7 - 您的解决方案似乎正在运行！