완전히 생성 된 HTML 페이지를 제공하기 위해 앵귤러 4 서버 측 렌더링

Angular4부터 시작합니다. 나중에 실제 프로젝트에 통합해야하는 Angular 4 free templates과 함께 서버 측 렌더링을 SEO 용으로 통합하려고합니다. 각 응용 프로그램완전히 생성 된 HTML 페이지를 제공하기 위해 앵귤러 4 서버 측 렌더링

아래

> [email protected] 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"

도움이 정말 감사합니다 !!!

출처

2017-10-24 ShaMoh

문서 객체를 사용하려면 @ angular/platform-browser를 가져 왔습니까? 당신의 동적 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.

출처

2017-10-24 11:45:43

아니요 작동하지 않습니다. – ShaMoh

완전히 생성 된 HTML 페이지를 제공하기 위해 앵귤러 4 서버 측 렌더링

답변

관련 문제