Angular 4 服务器端渲染以提供完全生成的 HTML 页面

Question

我从 Angular4 开始。我正在尝试将用于 SEO 的服务器端渲染与一些 Angular 4 free templates 集成，这些Angular 4 free templates 稍后需要集成到我的实际项目中。虽然应用程序正在成功构建，但在运行 Angular 应用程序时我正面临下面

    > 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 sn-p

"prestart": "ng build --prod && ./node_modules/.bin/ngc",

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

非常感谢任何帮助！！！

Answer 1

您是否已导入 @angular/platform-b​​rowser 以使用文档对象？

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

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

否则，如果您使用 document.getElementById()

你需要创建一个html元素作为导入

   HTMLElement el = document.getElementById()

..

如果你在做动态 DOM 操作，最好创建一个 promise 来解析要加载的 DOM。