未定义出口

Question

我正在尝试基于我的第一个应用程序制作一个 Angular 应用程序，这给我带来了一些麻烦。

这是我得到的：

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

bootstrap.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" ]
    }
}

如您所见，bootstrap 文件只包含 platform-browser-dynamic 的导入。当我尝试运行 this:

时出现以下错误

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>

现在，我可以通过以 ES6 而不是 ES5 为目标来让它工作，但这既不是解释也不是选项。知道这里有什么吗？

Answer 1

您运行陷入了一个相当特殊的境地。

根据您的配置，tsc 会将模块编译为 CommonJS 格式，如果您的目标是 而不是 es6，则这是默认格式。所以你的 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 调用，因此不会发出它。如果您只是将 TypeScript 代码更改为此，那么 tsc 将发出 require 调用（否则 platformBrowserDynamic() 调用将失败）并且 SystemJS 可以检测模块格式：

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

platformBrowserDynamic();

如果 SystemJS 仍然无法检测格式，请记住您可以在 SystemJS 配置中使用 format option 来告诉 SystemJS 使用特定格式。

当您将目标更改为 es6 时，默认模块格式也更改为 es6，这解释了为什么您不再收到该错误。

未定义出口

Exports is not defined

typescript

systemjs

angular