Angular 4 server side rendering to serve a fully generated HTML page
I am starting with Angular4.I am trying to integrate server side rendering for SEO purpose with some Angular 4 free templates which needs to integrated in my actual project later on.Though app is successfully building I am facing below while running the Angular app
> 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
below is my package.json snippet
"prestart": "ng build --prod && ./node_modules/.bin/ngc",
"start": "ts-node src/server.ts"
Any help is really appreciated!!!
Have you imported @angular/platform-browser to use document object?
import { DOCUMENT } from '@angular/platform-browser';
@Injectable()
export class MyService {
constructor(@Inject(DOCUMENT) private document: any) {}
}
Else if your using document.getElementById()
you need to create an html element as importing
HTMLElement el = document.getElementById()
..
Else if your doing dynamic DOM operation, it is better to create a promise to resolve the DOM to load.
链接地址: http://www.djcxy.com/p/31396.html