Question

我开始使用Angular4.I我正在尝试将服务器端渲染用于SEO目的与一些Angular 4 free templates集成，后者需要在我的实际项目中集成。尽管应用程序已成功构建，但我正在运行角度应用

    > 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片段

＆＃34;预启动＆＃34;：＆＃34; ng build --prod＆amp;＆amp; ./node_modules/.bin/ngc"，

＆＃34; start＆＃34;：＆＃34; ts-node src / server.ts＆＃34;

真的很感激任何帮助!!!

Answer 1

您是否导入了@ angular / platform-browser以使用文档对象？

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

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

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

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

   HTMLElement el = document.getElementById()

..

否则，如果您正在进行动态DOM操作，最好创建一个承诺来解析要加载的DOM。

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

1 个答案: