如何在 angular 混合应用程序中加载模板？

Question

我最近将应用程序从 angular 1.7 迁移到 Angular 8。加载应用程序时无法加载模板。然后我在指令中使用 require('./tempalte-name') 来加载。但随后它给出了例外 "Module parse failed: Unexpected token (1:0)"

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

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

有什么方法可以获取模板 html 而不是 [对象模块]。

Answer 1

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

因为 0.803.0 它显示 [对象模块]

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

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

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

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

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

Answer 2

试试这个

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

Int 对我来说很好用 (angularjs + angular9 + angular-cli)

How to load templates in angular Hybrid application?