Angles2/Typescript/Webpack 프리즘 Es6 오류

Question

프리 렌더 노드와 개인 프리 렌더링 서버를 사용하여 Angular2/Express 응용 프로그램을 미리 렌더링하려고합니다. 내 tsconfig.json에 ES5를 대상으로 시도 할 경우, 사전 렌더링 서버는이 오류가 발생합니다 :

ReferenceError: Can't find variable: Map 

undefined:1521 in KeyRegistry 
:1540 
:7 

I합니다 (files 배열의 node_modules/typescript/lib/lib.es6.d.ts 포함) ES6를 대상으로 시도하는 경우는 사전 렌더링 서버는이 오류가 발생합니다 :

SyntaxError: Unexpected token 'const' 

http://localhost:3000/app.js:50 in eval 
http://localhost:3000/app.js:50 
http://localhost:3000/app.js:20 in __webpack_require__ 
http://localhost:3000/app.js:40 

나는이 일을하기 위해 일종의 polyfill을 포함해야한다고 생각하지만 포함 할 내용이나 포함 할 위치가 무엇인지 알지 못합니다.

는

var webpack = require('webpack'); 
var path = require('path'); 
var rootDir = path.resolve(); 

module.exports = 
{ 
    target: 'node', 
    entry: rootDir + "/dist/client/app/bootstrap.js", 
    output: { 
     path: rootDir + "/dist/client", publicPath: '/', filename: "app.js", 
     pathinfo: true 
    }, 
    devtool: 'eval', 
    resolve: { 
     root: rootDir + "/dist/client/app", 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ 
      } 
     ] 
    } 
}; 

그리고 도움이 경우 내 클라이언트 tsconfig : : 내 웹팩 설정을 변경하는 경우

{ 
    "compilerOptions": { 
     "target": "es6", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": false, 
     "outDir": "../../dist/client", 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": false, 
     "noImplicitAny": true 
    }, 
    "files": ["app/bootstrap.ts", "app/vendor.ts", "app/Window.ts", "tests/index.ts", "../../node_modules/typescript/lib/lib.es6.d.ts"] 
} 

업데이트

web을 대상으로

여기에 도움이 경우 내 웹팩 설정입니다 node 대신 server.use(prerender.removeScriptTags());을 미리 렌더링 서버에 기록하면 요청이 매 시간마다 사전 렌더링 서버에 도달하고 n 오류는 던져 지지만 아무 것도 미리 렌더링되지 않습니다. 이전보다 더 가까이에서 보였으므로 업데이트 할 것이라고 생각했습니다.

업데이트

프리렌더는 각도 코드를 실행하지 않는 것 같습니다. 내 index.html을에서 머리에 스크립트 태그에 window.prerenderReady = false을 설정 한 다음 true로 설정하려고하면 다시는 내 루트 구성 요소가 인스턴스화 될 때, 밖으로 사전 렌더링 서버 시간 :

import { Component, OnInit } from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div id="main"> all the things </div> 
    ` 
}) 
export class AppComponent implements OnInit 
{ 
    constructor(){} 

    ngOnInit() 
    { 
     // Prerender never executes this code before it times out 
     window.prerenderReady = true; 
     console.info('Prerender Ready'); 
    } 
} 

Answer 1

나는 그럭저럭 이 작업은 다음과 같이 변경됩니다.

Webpack 구성에서 target: 'web'을 사용하십시오.

target: 'es5'을 사용하고 node_modules/typescript/lib/lib.es6.d.ts을 tsconfig.json의 파일 배열에 추가하십시오. 이것은 es6에 대한 컴파일 타임 오류를 방지합니다.

웹 및 es5를 타겟팅하더라도 Webpack은 PhantomJs가 처리 할 수없는 es6 styntax를 여전히 남겨 둡니다. Typescript 프로젝트에 babel을 포함시키는 아이디어를 좋아하지는 않지만, 이것이 작동하는 것으로 발견 된 유일한 것입니다 : require('babel-polyfill'); 모든 es6 구문을 사용할 수있는 응용 프로그램 코드 나 공급 업체 코드보다 먼저.

export class ApplicationComponent implements OnInit 
{ 
    ngOnInit() 
    { 
     window.prerenderReady = true; 
    } 
} 

참고 : 위는 타이프에서 일하기 위해 당신이 있는지를 확인해야합니다 루트 응용 프로그램 구성 요소를 인스턴스화 할 때

설정 문서의 head에서 window.prerenderReady = false; 한 다음 true로 설정 속성 prerenderReady이 Window 유형에 있습니다. 예 :

interface Window 
{ 
    prerenderReady:boolean; 
} 

서버 측에서는 모든 경로가 구성되기 전에 사전 렌더링 노드를 구성해야합니다. 예 :이 사람하는 데 도움이

export function routeConfig(app:express.Application):void 
{ 
    // Prerender 
    app.use(require('prerender-node').set('prerenderServiceUrl', CONFIG.prerenderServiceUrl)); 

    // Angular routes should return index.html 
    app.route(CONFIG.angularRoutes) 
     .get((req:Request, res:Response, next:NextFunction) => 
     { 
      return res.sendFile(`${app.get('appPath')}/client/index.html`); 
     }); 
} 

희망