我正在尝试基于我的第一个应用程序制作一个 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>
系统.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);
系统.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 的导入。当我尝试运行它时出现以下错误:
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 格式，因此它默认为其 native 模块格式并且在 Object.defineProperty 上失败> 因为 exports 不存在。
在上面的代码中，您会注意到没有与您的import 语句相对应的require 调用。这是因为 tsc 检测到在运行时不需要 require 调用，因此不会发出它。如果您只是将 TypeScript 代码更改为此，则 tsc 将发出一个 require 调用(否则 platformBrowserDynamic() 调用将失败)和 SystemJS可以检测模块格式:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
platformBrowserDynamic();
如果 SystemJS 仍然无法检测格式，请记住您可以使用 format option在您的 SystemJS 配置中告诉 SystemJS 使用特定格式。
当您将目标更改为 es6 时，默认模块格式也更改为 es6，这解释了为什么您不再收到该错误。
关于angular - 未定义导出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46093508/