2

我们在 officeJS 插件中使用 Webpack 和 Angular 模板，其require语法如下所示。

@Component({
    moduleId: module.id.toString(),
    selector: 'list',
    template: require('./list.html')
})

我们Component 'List' must have a template or templateUrl在组件声明中遇到错误。

我没有太多关于 Webpack 的详细信息，但是由于templateUrl应用程序无法正常工作（可能是因为使用了 webpack/system.js），因此应用程序无法templateUrl在运行时获取 HTML。

但上述要求语法的核心问题是我没有在 Angular 语言服务的模板 HTML wrt 相关组件中获得智能感知。

我在 GitHub 上发现了一个未解决的问题，需要语法https://github.com/angular/angular/issues/23553

考虑模板语法的解决方案，我们是否有任何替代解决方案可以让智能感知和 webpack 一起工作？

我们正在使用 Angular 4 和“webpack”：“^4.41.5”，但我认为这个问题也存在于更高的 Angular 版本中，基于上面的 GitHub 帖子。

最近的观察：

我按照这里从头开始为 OfficeJS 尝试了新的 Angular 项目，https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/word-quickstart?tabs=yeomangenerator同时也面临与默认 webpack 配置相同的问题，似乎可能存在一些限制。

4

1 回答 1

0

查看当前版本（11.1.2）的代码说这个错误只发生在

template === null && !templateUrl

既然你没有通过，templateUrl那一定意味着那template是空的。

我不知道这是否是同一个问题，但这里有一些我必须完成的工作才能让这个过程为我工作。它可能会阐明您的问题可能是什么。

该template部分假定它正在传递一个字符串，因此我必须弄清楚如何将整个模板加载到组件的该部分的字符串中。这是我决定的。

import { Component } from '@angular/core';

import template from './foo.html'

@Component({
    selector: 'foo',
    template
})
export class FooComponent {}

结合将html-loaderhtml 导出为字符串的 webpack ，然后将 html 作为每个组件的字符串加载到我的 javascript 中。

但是，打字稿不喜欢这样，所以我必须为 html 创建一个定义文件，以便它知道我期望它是一个字符串。

declare module '*.html' {
    const _: string;
    export default _;
}

有了它，一切正常。

于 2021-02-08T22:36:13.633 回答