Angles2/Typescript/Webpackのプレレンダーes6エラー

Question

私はプレレンダーノードとプライベートプレレンダーサーバーを使ってAngular2/Expressアプリケーションをプリレンダーしようとしています。私は私のtsconfig.jsonでES5をターゲットにしようとした場合、事前レンダリングサーバは、このエラーがスローされます。

ReferenceError: Can't find variable: Map 

undefined:1521 in KeyRegistry 
:1540 
:7 

私は（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 

私は、これを動作させるために何らかの種類のポリフィルを含める必要があると思いますが、どのようなものを含めるべきか、どこに含めるべきかについての最初の考えはありません。

は

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：私は私のWebPACKの設定を変更する場合は

{ 
    "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をターゲットに

はここに役立ちます場合は、私のWebPACKの設定ですnodeの代わりにserver.use(prerender.removeScriptTags());をコメントアウトすると、リクエストは毎回プレレンダリングサーバーにヒットし、n oエラーはスローされますが、あらかじめレンダリングされているものはありません。以前よりも近くに見えるので、私は更新すると思った。

更新

プレレンダリングは角度コードを実行していないようです。私は私の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をターゲットにしているにもかかわらず、ウェブパックはまだPhantomJsが処理できないes6 styntaxを残しています。私はTypescriptプロジェクトにbabelを含めるという考えが好きではありませんが、これは私が見つけた唯一のものです：require('babel-polyfill');すべてのes6構文を使用できるアプリケーションコードまたはベンダーコードより前。

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

注：上記は、活字体で動作するため、あなたが確認する必要がありますあなたは、ルートアプリケーションコンポーネントをインスタンス化するとき

設定し、文書のheadでwindow.prerenderReady = false;、その後はtrueに設定しましたタイプWindowにプロパティprerenderReadyが存在します。例：サーバー側では、ルートが設定される前に事前レンダリングノードを設定してください。例えば。：これは誰かに役立ちます

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`); 
     }); 
} 

希望は