angular - 导出未定义

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

这是我所拥有的:

索引.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>

系统配置文件

(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";

配置文件

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

如您所见， bootstrap 文件只包含 platform-browser-dynamic 的导入。当我尝试运行它时出现以下错误:

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 来实现这一点，但这既不是解释也不是选项。
有什么想法吗？

最佳答案

你遇到了一个相当奇怪的情况。

使用您的配置， 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 ，这解释了为什么您不再收到该错误的原因。

关于angular - 导出未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46093508/