出口沒有定義

我試圖產生基於我的第一個應用的角度應用，這給我帶來些麻煩。出口沒有定義

下面是我得到了什麼：

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>FiveRX 2.0 Management</title> 
    <meta charset="utf-8"/> 

    <!-- Dependencies --> 
    <script src="/node_modules/core-js/client/shim.min.js"></script> 
    <script src="/node_modules/systemjs/dist/system.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.js"></script> 

    <!-- Init Application --> 
    <script src="/app/config/system.config.js"></script> 
    <script src="/app/config/system.init.js"></script> 

</head> 
<body> 
<div class="header"> 
    <div class="title">Troubleshooting</div> 
</div> 
<layout></layout> 
</body> 
</html>

system.config.js

(function (global) { 
    System.config({ 
     paths: { 
      "npm:": "node_modules/" 
     }, 

     map: { 
      "app": "app", 
      "@angular/core": "npm:@angular/core/bundles/core.umd.js", 
      "@angular/common": "npm:@angular/common/bundles/common.umd.js", 
      "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js", 
      "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd.js", 
      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js", 
      "@angular/http": "npm:@angular/http/bundles/http.umd.js", 
      "@angular/router": "npm:@angular/router/bundles/router.umd.js", 
      "@angular/forms": "npm:@angular/forms/bundles/forms.umd.js", 
      "@angular/animations": "npm:@angular/animations/bundles/animations.umd.js", 
      "@angular/animations/browser": "npm:@angular/animations/bundles/animations-browser.umd.js", 
      "@angular/platform-browser/animations": "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js", 
      "rxjs": "npm:rxjs", 
     }, 
     packages: { 

      app: { 
       main: "bootstrap.js" 
      }, 
      rxjs: { 
       defaultExtension: "js" 
      }, 
      scripts: { 
       format: "register", 
       defaultExtension: "js", 
       scriptLoad: true 
      } 
     }, 
     meta: { 
      "*": { 
       authorization: true 
      } 
     } 
    }); 
})(this);

system.init.js

System.import('app') 
    .catch(function(err) { 
     console.error(err); 
    });

引導.ts

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

tsconfig.json

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

正如你看到的，引導文件不包含任何東西，但平臺的瀏覽器的動態的進口。我收到以下錯誤，當我嘗試運行此：

Error: exports is not defined 
    Evaluating http://localhost:55549/app/bootstrap.js 
    Loading app 
    at eval (:55549/app/bootstrap.js:2) 
    at eval (<anonymous>) 
    at _e (evaluate.js:106) 
    at instantiate.js:414 
    at R (register-loader.js:684) 
    at E (register-loader.js:631) 
    at O (register-loader.js:540) 
    at register-loader.js:128 
    at ZoneDelegate.invoke (zone.js:365) 
    at Zone.run (zone.js:125) 
    at zone.js:760 
    at ZoneDelegate.invokeTask (zone.js:398) 
    at Zone.runTask (zone.js:165) 
    at drainMicroTaskQueue (zone.js:593) 
    at <anonymous>

現在，我能得到這個通過靶向而不是ES5 ES6的工作，但是這既不解釋也不是一個選項。任何想法是怎麼回事嗎？

來源

2017-09-07 Sebastian Edelmeier

這不是直接回答你的問題，但 - 如果你剛剛開始使用Angular，我會認真推薦使用[CLI]（https://github.com/angular/angular-cli/）而不是嘗試手動配置所有內容。 –

你已經運行到一個相當特殊的情況。如果你的目標是不es6

您的配置，tsc將編譯模塊到CommonJS的格式，這是默認的。所以，你的bootstrap.ts代碼編譯成這個JavaScript：

"use strict"; 
Object.defineProperty(exports, "__esModule", { value: true }); 
//# sourceMappingURL=bootstrap.js.map

SystemJS通常能認識到一個模塊是一個CommonJS的模塊，並會自動提供適用於這種情況下的執行環境。 不幸的是，生成的代碼上面是不夠的，讓SystemJS認識到你的模塊是在CommonJS的格式，所以它默認爲它的本機模塊格式上卻失敗Object.defineProperty因爲exports不存在。

在上面的代碼中，您會注意到沒有require調用對應於您的import語句。這是因爲tsc檢測，沒有必要在運行時require呼叫，從而不發射它。如果你只需要改變你的打字稿代碼這一點，那麼tsc會散發出require調用（否則platformBrowserDynamic()調用將失敗）和SystemJS可檢測模塊格式：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 

platformBrowserDynamic();

在SystemJS仍無法檢測到的情況下格式，記住，你可以使用format option在SystemJS配置告訴SystemJS使用特定的格式。

當您將目標更改爲es6時，默認模塊格式也更改爲es6，這就解釋了爲什麼您不會再遇到該錯誤。

來源

2017-09-07 10:40:25 Louis

出口沒有定義

回答

相關問題