完全に生成されたHTMLページを提供する角4のサーバー側のレンダリング

Question

私はAngular4から始めています。私の実際のプロジェクトに後で統合する必要があるAngular 4 free templatesとSEO目的のサーバー側レンダリングを統合しようとしています。角度アプリ

以下

> ang_bs@0.0.0 start /Applications/Workspace/Angular/Ang_Bs 
    > ts-node src/server.ts 

    listening on http://localhost:4001! 
    ERROR { ReferenceError: document is not defined 
     at DefaultDomRenderer2.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72) 
     at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62) 
     at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23) 
     at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1) 
     at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5) 
     at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12) 
     at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46) 
     at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29) 
     at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1) 
     at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1 
    __zone_symbol__currentTask: 
    ZoneTask { 
     _zone: 
     Zone { 
      _properties: [Object], 
      _parent: [Object], 
      _name: 'angular', 
      _zoneDelegate: [Object] }, 
     runCount: 0, 
     _zoneDelegates: null, 
     _state: 'notScheduled', 
     type: 'microTask', 
     source: 'Promise.then', 
     data: undefined, 
     scheduleFn: undefined, 
     cancelFn: null, 
     callback: [Function], 
     invoke: [Function] } } 
    Unhandled Promise rejection: document is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: document is not defined 
     at DefaultDomRenderer2.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72) 
     at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62) 
     at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23) 
     at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1) 
     at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5) 
     at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12) 
     at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46) 
     at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29) 
     at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1) 
     at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1 
    __zone_symbol__currentTask: 
    ZoneTask { 
     _zone: 
     Zone { 
      _properties: {}, 
      _parent: null, 
      _name: '<root>', 
      _zoneDelegate: [Object] }, 
     runCount: 0, 
     _zoneDelegates: null, 
     _state: 'notScheduled', 
     type: 'microTask', 
     source: 'Promise.then', 
     data: undefined, 
     scheduleFn: undefined, 
     cancelFn: null, 
     callback: [Function], 
     invoke: [Function] } } ReferenceError: document is not defined 
     at DefaultDomRenderer2.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72) 
     at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62) 
     at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23) 
     at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1) 
     at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5) 
     at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12) 
     at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46) 
     at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29) 
     at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1) 
     at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1 

私のpackage.jsonが

をスニペットである "事前開始" 実行中の建物は、私は以下の直面しています： "NGビルドが& & ./node_modules/.bin/ngcを--prod" を、

"start"： "ts-node src/server.ts"

本当にありがとうございます！

Answer 1

ドキュメントオブジェクトを使用するために、@ angular/platform-b​​rowserをインポートしましたか？あなたは、動的なDOM操作を行った場合、あなたは

document.getElementById()を使用している場合

import { DOCUMENT } from '@angular/platform-browser'; 

    @Injectable() 
    export class MyService { 
     constructor(@Inject(DOCUMENT) private document: any) {} 
    } 

エルスあなたがそうでなければ

HTMLElement el = document.getElementById() 

.. 

をインポートするとhtml要素を作成する必要があり、解決する約束を作成することをお勧めしますロードするDOM。