Question

我有一个Angular 5应用程序，试图在其中使用require。我的app.component.ts文件如下：

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

@Component({
    selector: 'app',
    template: require('./app.component.html')
})

export class AppComponent {

}

还有一个app.component.html文件：

<div id="wrapper">
    <div class="main-content">
        <!-- Acts as a placeholder that Angular dynamically fills content based on the current router state. -->
        <router-outlet>
        </router-outlet>
    </div>
</div>

用于测试的路由器仅路由到引用Hello World HTML文件的空组件。当我使用require运行此程序时，出现以下错误：

zone.js?fad3:672 Unhandled Promise rejection: Cannot read property 'appendChild' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'appendChild' of null

at MatCommonModule._checkThemeIsPresent (eval at <anonymous> (vendor.js:544), <anonymous>:148:33)
at new MatCommonModule (eval at <anonymous> (vendor.js:544), <anonymous>:100:18)
at _createClass (eval at <anonymous> (vendor.js:11), <anonymous>:10661:20)
at _createProviderInstance$1 (eval at <anonymous> (vendor.js:11), <anonymous>:10635:26)
at initNgModule (eval at <anonymous> (vendor.js:11), <anonymous>:10588:28)
at new NgModuleRef_ (eval at <anonymous> (vendor.js:11), <anonymous>:11831:9)
at createNgModuleRef (eval at <anonymous> (vendor.js:11), <anonymous>:11821:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (eval at <anonymous> (vendor.js:11), <anonymous>:14131:12)
at NgModuleFactory_.create (eval at <anonymous> (vendor.js:11), <anonymous>:15255:25)
at eval (eval at <anonymous> (vendor.js:11), <anonymous>:5409:78)
at ZoneDelegate.invoke (eval at <anonymous> (polyfills.js:2027), <anonymous>:388:26)
at Object.onInvoke (eval at <anonymous> (vendor.js:11), <anonymous>:4668:33)
at ZoneDelegate.invoke (eval at <anonymous> (polyfills.js:2027), <anonymous>:387:32)
at Zone.run (eval at <anonymous> (polyfills.js:2027), <anonymous>:138:43)
at NgZone.run (eval at <anonymous> (vendor.js:11), <anonymous>:4485:69)
at PlatformRef.bootstrapModuleFactory (eval at <anonymous> (vendor.js:11), <anonymous>:5407:23)
at eval (eval at <anonymous> (vendor.js:11), <anonymous>:5486:59)
at ZoneDelegate.invoke (eval at <anonymous> (polyfills.js:2027), <anonymous>:388:26)
at Zone.run (eval at <anonymous> (polyfills.js:2027), <anonymous>:138:43)
at eval (eval at <anonymous> (polyfills.js:2027), <anonymous>:858:57)
at ZoneDelegate.invokeTask (eval at <anonymous> (polyfills.js:2027), <anonymous>:421:31)
at Zone.runTask (eval at <anonymous> (polyfills.js:2027), <anonymous>:188:47)
at drainMicroTaskQueue (eval at <anonymous> (polyfills.js:2027), <anonymous>:595:35) TypeError: Cannot read property 'appendChild' of null
at MatCommonModule._checkThemeIsPresent (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:544:2), <anonymous>:148:33)
at new MatCommonModule (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:544:2), <anonymous>:100:18)
at _createClass (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:10661:20)
at _createProviderInstance$1 (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:10635:26)
at initNgModule (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:10588:28)
at new NgModuleRef_ (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:11831:9)
at createNgModuleRef (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:11821:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:14131:12)
at NgModuleFactory_.create (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:15255:25)
at eval (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:5409:78)
at ZoneDelegate.invoke (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:388:26)
at Object.onInvoke (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:4668:33)
at ZoneDelegate.invoke (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:387:32)
at Zone.run (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:138:43)
at NgZone.run (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:4485:69)
at PlatformRef.bootstrapModuleFactory (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:5407:23)
at eval (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/vendor.js:11:2), <anonymous>:5486:59)
at ZoneDelegate.invoke (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:388:26)
at Zone.run (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:138:43)
at eval (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:858:57)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:421:31)
at Zone.runTask (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:188:47)
at drainMicroTaskQueue (eval at <anonymous> (http://mderrybe.aka.corp.amazon.com:6789/polyfills.js:2027:2), <anonymous>:595:35)

有趣的是，如果我不使用require而是使用templateUrl引用文件，就不会出现此错误，

templateUrl: 'src/app/app.component.html'

有人可以帮助我解决这个问题吗？为什么要求导致此错误？谢谢！

Answer 1

这就是您应该编写app.component.ts

的方式

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

和您的app.component.html：

<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>

因此，您可能会误会在这里：

@Component({
    selector: 'app',
    template: require('./app.component.html')
})

Answer 2

基于documentation template用于内联HTML。因此，如果要使用template属性，则应提供内联HTML作为字符串。

另一方面，如果要使用HTML文件的路径，则应使用templateUrl属性。请阅读Angular文档中的templateUrl。

函数require()在这里不太适合，因为它是用于加载模块的节点函数。请检查here。

带有要求抛出的Angular 5无法读取null的属性'appendChild'

2 个答案: