仅基于 app.ts 文件位置的不同加载行为

Question

这个有效！称之为 APP01

这个不行！ APP02

app.ts 文件的内容在两个文件系统之间没有变化

app.ts

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

@Component({
    selector: "my-app",
    template: '<h1>My First Angular 2 App</h1>'
})

export class TodoAppComponent {}

bootstrap(TodoAppComponent);

index.html APP01

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            //typescriptOptions: { emitDecoratorMetadata: true },
            packages: { app: { defaultExtension: 'js' } }
        });

        System.import('app/app');
    </script>
</head>
<body>
    <my-app></my-app>

</body>
</html>

APP02

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            //typescriptOptions: { emitDecoratorMetadata: true },
            packages: { defaultExtension: 'js' }  <-- THIS CHANGED
        });

        System.import('app');  <-- THIS CHANGED
    </script>
</head>
<body>
    <my-app></my-app>

</body>
</html>

因此在 APP02 两者之间， app.ts 的位置在根目录而不是在应用程序文件夹中， index.html 的内容System.import 由 "app/app" 和 System.config 中的包属性更改而来。但是启动时APP02找不到应用程序。我在 Web 浏览器的控制台中收到如下错误。

当唯一改变的是 app.ts 文件的位置时，为什么一个有效而另一个无效。 System.import 告诉应用程序在哪里可以找到它引导的主应用程序，但在第二种情况下它似乎找不到它只有当我将 app.ts 文件放在 appfolder 中并更改System.import 行到 app/app 并更改配置中的 packages 节点以告诉配置有一个应用程序文件夹。

Answer 1

您的导入电话应该是

System.import('app.js').then(void 0, console.error.bind(console));

（在错误处理程序中添加了 console.error 以更好地捕获错误）

初始 .js 文件导入应包括扩展名，之后系统将接管。

APP01 版本工作是因为

packages: { app: { defaultExtension: 'js' } }

这意味着，文件夹 app 中的所有内容都应该是一个 .js 文件。

我的假设是您的应用程序的其余部分将位于 app 文件夹中，因此我建议您保持这一行不变。

通过使用

packages: { defaultExtension: 'js' }

您实际上是在告诉系统寻找 defaultExtension 包。

仅基于 app.ts 文件位置的不同加载行为

Different loading behavior based solely on location of app.ts file

typescript

systemjs

angular