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的位置位于根目录而不是app文件夹中，而index.html的内容System.import已从＆＃34;应用程序/应用程序＆＃34;和System.config中的packages属性。然而，启动时的APP02无法找到应用程序。我在Web浏览器的控制台中收到错误，如下所示。

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

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文件位置的不同加载行为

1 个答案: