Угловой 5 с требованием броска Не удается прочитать свойство 'appendChild' из null

Question

У меня есть приложение Angular 5, которое я пытаюсь использовать, требовать ввода. В качестве файла 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>

Маршрутизатор для тестирования просто маршрутизирует пустой компонент, который ссылается на HTML-файл Hello World.Когда я запускаю это с помощью 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

На основе документации template используется для встроенного HTML.Таким образом, вы должны предоставить встроенный HTML в виде строки, если вы хотите использовать свойство template.

С другой стороны, если вы хотите использовать путь к файлу HTML, вы должны использовать свойство templateUrl.Пожалуйста, прочитайте о templateUrl в Angular docs.

Функция require() здесь не подходит, потому что это функция узла, используемая для загрузки модулей.Пожалуйста, отметьте здесь .

Answer 2

Вот как вы должны написать свой 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')
})