2017-04-24 46 views
2

我想實現角度的AOT教程: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html角AOT和彙總 - 未捕獲的ReferenceError:出口沒有定義

使用NGC部分作品和它所產生AOT文件夾。然而,當我運行應用程序,我得到下面的錯誤

bundle.js:1 Uncaught ReferenceError: exports is not defined 

我的代碼如下: -

tsconfig-aot.json

{ 
     "compilerOptions": { 
     "target": "es5", 
     "module": "es2015", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2015", "dom"], 
     "noImplicitAny": true, 
     "suppressImplicitAnyIndexErrors": true 
     }, 

    "files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

     "angularCompilerOptions": { 
     "genDir": "aot", 
     "skipMetadataEmit" : true 
    }, 
    "exclude": [ 
      "node_modules", 
      "bower_components", 
      "typings/main", 
      "typings/main.d.ts" 
     ] 
    } 

執行後node_modules /的.bin/ngc -p tsconfig -aot.json,aot文件夾已成功生成。

main.ts

import { platformBrowser } from '@angular/platform-browser'; 
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory'; 
console.log('Running AOT compiled'); 
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

我的這麼一讀鏈接,「你需要編譯這些TS文件作爲ES2015模塊,以受益於‘樹搖晃’。這意味着必須成爲一個只能指向main-aot.ts文件的配置文件(tsconfig-compile-aot.json)。「

tsconfig - 編譯 - aot.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "es2015", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es2015", "dom"], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    }, 

    "files": [ 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
}, 
"exclude": [ 
     "node_modules", 
     "bower_components", 
     "typings/main", 
     "typings/main.d.ts" 
    ] 
} 

編譯與TSC和tsconfig - 編譯 - aot.json主aot.ts文件,再次爲ES2015模塊和生成您的js文件。在編譯我得到我的js文件 我執行命令
tsc src/main.ts

彙總-config.js

import rollup  from 'rollup' 
import nodeResolve from 'rollup-plugin-node-resolve' 
import commonjs from 'rollup-plugin-commonjs'; 
import uglify  from 'rollup-plugin-uglify' 

export default { 
    entry: 'src/main.js', 
    dest: 'bundle.js', // output a single application bundle 
    sourceMap: false, 
    format: 'iife', 
    onwarn: function(warning) { 
    // Skip certain warnings 
    // should intercept ... but doesn't in some rollup versions 
    if (warning.code === 'THIS_IS_UNDEFINED') { return; } 
    // console.warn everything else 
    console.warn(warning.message); 
    }, 
    plugins: [ 
     nodeResolve({jsnext: true, module: true}), 
     commonjs({ 
     include: 'node_modules/rxjs/**', 
     }), 
     uglify() 
    ] 
} 

之後,我執行下面的命令 node_modules /的.bin /彙總-c rollup- config.js

然後執行npm run lite,我得到錯誤。

+0

我沒有看到tsconfig-aot.json'和'tsconfig - 編譯 - aot.json'第一個已經'之間的區別有'es2015'模塊類型 – yurzui

+0

彙總配置應該有'main-aot'入口點用於生產 – yurzui

+0

@yurzui:對不起,區別在於files部分,它只是一個名稱問題。我的main.ts內容已經根據aot改變了,並且沒有主要的ao – Shifs

回答

1

您需要添加按照您的主網頁代碼:

window.module = { 
    id: 'foo', 
    exports: [] 
} 
相關問題