ReferenceError가 : 네비게이터가 서버 측이 내 각 4 서버 측 렌더링 응용 프로그램과 simpleMDE 편집기를 사용하고

Question

렌더링 및 텍스트 영역의 참조를 받고

@ViewChild('simpleMDE') textarea : ElementRef; 

을 사용하고 ngAfterViewInit에 초기화와 angular4에 정의되지 않은()

오전에 템플릿에서

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

- 서버에 존재하지 않는 - (예 : jQuery를)를 사용하므로이를 사용, 또는 라이브러리를합니다 작동하지 않음

사용하려는 경우 클라이언트로만 제한하고 상황에 맞게 배치하는 것이 좋습니다. PLATFORM_ID 토큰을 사용하여 삽입 된 Object를 사용하여 현재 플랫폼이 브라우저인지 서버인지 확인할 수 있습니다.

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"; 
} 

PS를 조작하려고 할 때 오류가 codemirror.js에서 오는 라인을 다음에서 :

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. 
    ... 
    } 
} 

도서관 :(

편집을 조작해야하는 것 : 어떤 영향을 미칠지 확실하지 않음 : D

Answer 2

js/ts 파일에 다음과 같은 코드가 있다고 생각해보십시오. @Parth Ghiya 응답으로

import CodeMirror from 'codemirror'; 

이 navigator 만 브라우저에서 surpported되고,이 오류로 이어질 것입니다.

다음

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

CodeMirror(...) 

Answer 3

내가이 그렇다고 문제를 처리하는 방법입니다 : 서버 렌더링을 지원하기 위해 노력하고 있지만

, 당신은 이런 식으로 코드에서 약간의 변화를 (게으른가 필요) 할 수 있습니다. 나에게 서버 렌더링은 SEO 목적으로 만 사용됩니다. 그리고 codemirror와 같은 것들은 SEO와 아무런 관련이 없습니다. 따라서 내 접근 방식은 "서버 쪽에서 렌더링하지 않는"것입니다.

ref

기본 구조

위 그림과 같다.

두 개의 부팅 파일이 있습니다. 하나는 서버 렌더링 용이고 다른 하나는 클라이언트 렌더링 용입니다.

따라서 실제로 각 부팅 파일마다 다른 응용 프로그램 모듈을 사용할 수 있습니다.

서버 렌더링을위한 응용 프로그램 모듈에서 모의 구성 요소을 사용하여 브라우저 개체를 사용하는 구성 요소를 대체하고 클라이언트 측 실제 구성 요소를 사용할 수 있습니다.

이렇게하면 서버 렌더링에서 문제가되는 구성 요소에 대해 걱정할 필요가 없습니다.

또 다른 해결책은 webpack을 사용하여 브라우저 개체를 처리하는 것입니다. 개인적으로이 ref

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

같은

뭔가, 내가 처음 솔루션을 선호합니다. 두 번째는 저에게 다소 해킹이며 서버 측에서 SEO와 아무 관련이없는 구성 요소를 렌더링한다고해서 실제로 어떤 이점도 얻지 못합니다.