Question

我面临一个奇怪的问题。随着我的模块的增长，我决定创建一些子文件夹并将子文件夹放入我的组件中。

这是我的新结构：

claimfile/
    appendix-tabs/
        appendix-tabs.component.html
        appendix-tabs.component.ts
    quick-create/
        quick-create.component.html
        quick-create.component.ts
    claimfile.component.html
    claimfile.component.less
    claimfile.component.ts
    claimfile.module.ts

我使用Webpack，并使用相对路径指定所有styleUrls和templateUrl。但现在，我有这样的信息：

zone.js?fad3:1274 GET http://192.168.33.10:7777/appendix-tabs.component.html 404 (Not Found)

Unhandled Promise rejection: Failed to load appendix-tabs.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load appendix-tabs.component.html 

undefinedError: Uncaught (in promise): Failed to load appendix-tabs.component.html(…)

它来自附录组件，无法加载他的模板：

appendix-tabs.component.ts ：

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

@Component({
    selector: 'prop-appendix-tabs',
    templateUrl : './appendix-tabs.component.html'
})
export class AppendixTabsComponent {

    constructor() {}
}

为了使它工作，我必须指定index.html的绝对路径：

templateUrl : 'app/claimfile/appendix-tabs/appendix-tabs.component.html'

现在，我不明白的是......它对于快速创建组件非常有效。装饰者没有什么不同：

quick-create.component.ts ：

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

@Component({
    selector: 'prop-claimfile-quick-create',
    templateUrl: './quick-create.component.html'
})
export class QuickCreateComponent { }

它也适用于claimfile.component，它是模块的bootstrap组件。

另一件事：当我设置绝对路径并编辑模板时，实时重新加载不会触发，就像文件没有被Webpack监视。另外，我不在组件中使用moduleId: module.id，因为它似乎不适用于Webpack

compiler.umd.js?9df7:13350 Uncaught TypeError: uri.match is not a function

它可能来自哪些想法？这不是第一次发生，我已经遇到过那种问题

感谢您的帮助

Answer 1

我有这个问题。它突然出现，没有任何解释:(

我发现在模板上使用require会立即修复它。不知道为什么......

@Component({
    selector: 'home', 
    template: require('./home.component.html')
})
export class HomeComponent {}

}

无法加载xxx.component.html

1 个答案: