ReferenceError:angular4中未使用服务器端渲染定义导航器

我在angular 4服务器端渲染应用程序中使用SimpleMode编辑器，并使用

@ViewChild('simpleMDE') textarea : ElementRef;

并在ngAfterViewInit（）中初始化它

在am的模板中使用如下文本区域

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

请提个建议，我被困在这里了。

---

如角度通用文档中所述

窗口、文档、导航器和其他浏览器类型—服务器上不存在—因此使用它们或使用它们的任何库（例如jQuery）都不起作用

如果你需要使用它们，考虑把它们限制在你的客户机上，并在情境中包装它们。您可以使用平台ID标记注入的对象来检查当前平台是浏览器还是服务器

 import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';

 constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

 ngOnInit() {
   if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   }
   if (isPlatformServer(this.platformId)) {
     // Server only code.
     ...
   }
 }

将需要操纵库：(

编辑： 在以下几行中，错误来自codemirror.js

var userAgent = navigator.userAgent;
var platform = navigator.platform;

试着操纵代码

if(navigator){
  var userAgent = navigator.userAgent;
  var platform = navigator.platform;
}else{
 var userAgent="server";
 var platform="server";
}

---

附言：不确定会有什么影响：D.

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

import CodeMirror from 'codemirror';

正如@Parth Ghiya所回答的，

导航器仅在浏览器中受支持，这将导致错误

在尝试支持服务器呈现时，您可以通过以下方式对代码进行一些更改（惰性要求）：

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

CodeMirror(...)

下面是我如何处理这类问题的。
对我来说，服务器渲染只是为了SEO目的。像codemirror这样的东西对SEO没有任何作用。因此，我的方法是“不在服务器端渲染”


基本结构如上图所示

您有两个启动文件，一个用于服务器渲染，另一个用于客户端渲染

因此，对于每个引导文件，实际上可以有不同的应用程序模块

在服务器渲染的应用程序模块中，可以使用模拟组件替换使用浏览器对象的组件，并将真实组件用于客户端

这样，您就不必担心服务器渲染上有问题的组件

另一个解决方案是使用webpack来处理这些浏览器对象

像这样的

就我个人而言，我更喜欢第一种解决方案。第二种解决方案对我来说有点麻烦，在服务器端呈现一个与搜索引擎优化无关的组件并不会给我们带来任何好处。
为了简单起见，只需将

global['navigator'] = {} or global['navigator'] = {  userAgent: ''};

// ...

在server.ts文件的顶部。这样，它将忽略错误。
我没有在代码中的任何地方手动使用它，但SimpleMode texteditor在内部使用它，因此可能会从那里抛出错误。我将在回到我的机器后尽快尝试您的解决方案。谢谢，伙计……。@PraveenRana请查看编辑过的答案，不确定是否正确lp来解决这个问题。好的，Parth。我将测试这段代码，并让您知道它是否有效。只能在晚上进行测试。@PraveenRana当然可以……让我知道发生了什么事情。您可以创建github或其他什么。它不会起作用，因为服务器端的导航器未定义。必须根据错误扫描创建一个解决方案。请查看repository please@PraveenRana依赖项
SimpleMode
似乎在使用
codemirror
，我在这里没有发现任何服务器渲染问题，也没有发现任何支持angular universal的词。如果您仍然想将其与
angular universal
一起使用，您应该按照我对
SimpleMode
的回答进行更改您能根据您所说的更改向存储库发出请求吗？因为我不知道我需要在何处进行更改，也不知道需要进行哪些更改。非常感谢。
// just before places where are using codemirror
const CodeMirror = require('codemirror');   
require('codemirror/addon/hint/show-hint');

CodeMirror(...)

module: {
  rules: [
    { 
      test: /@angular(\\|\/)material/, use: "imports-loader?window=>global,CSS=>null,navigator=>{get userAgent(){return Zone.current.get('req')['headers']['user-agent'];}}"
    }
  ]
}

global['navigator'] = {} or global['navigator'] = {  userAgent: ''};

// ...