angular - 引用错误: navigator is not defined in angular4 with server side rendering

Question

我正在将 simpleMDE 编辑器与我的 Angular 4 服务器端渲染应用程序一起使用，并使用

获取文本区域的引用

@ViewChild('simpleMDE') textarea : ElementRef;

并在 ngAfterViewInit() 中初始化它

   this.simplemde = new SimpleMDE(
      {
          element: this.textarea.nativeElement.value,
      })

在模板中使用像这样的文本区域

<textarea id="simpleMDE" #simpleMDE></textarea> 

启动服务器时抛出错误

projectpath\node_modules\codemirror\lib\codemirror.js:11
        typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
                                                                                 ^
ReferenceError: navigator is not defined
    at projectpath\node_modules\codemirror\lib\codemirror.js:18:17

请提出一些建议，我被困在这里了。 GitHub Repo

Answer 1

我猜你的 js/ts 文件中有这样的代码。

import CodeMirror from 'codemirror';

正如@Parth Ghiya所回答的，navigator仅在浏览器中支持，这将导致错误。

在尝试支持服务器渲染时，您可以通过这种方式在代码中进行一些更改(惰性需求):

// just before places where are using codemirror
const CodeMirror = require('codemirror');   
require('codemirror/addon/hint/show-hint');

CodeMirror(...)