使用Systemjs加载angular2依赖项

我在官方网站上学习angular2已有一段时间了。因为SystemJS似乎是推荐的模块加载器，所以我尝试使用它。 在官方的快速入门（）中，可以找到加载angular2项目的以下index.html示例：

角度2快速入门
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

我想用systemJS加载所有内容，达到以下情况：

角度2快速入门
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

---

这可能吗？

我建议您使用angular cli（）来帮助您生成新项目，并为您完成所有配置和艰苦工作。相信我，这对你会有很大帮助，你会节省时间的。现在情况发生了很大的变化，所以在你的旅途中有一个像你这样的好朋友会更容易

如果您不想使用它，您可以创建一个类似于system config.js的文件，该文件将包含以下内容，您可以添加所需的特定于对象的库：

var map = {};
/** User packages configuration. */
var packages = {};

var barrels = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/http',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    // Thirdparty barrels.
    'rxjs',
    // App specific barrels.
    'app',
    'app/shared',
];
var cliSystemConfigPackages = {};
barrels.forEach(function (barrelName) {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
});
// Apply the CLI SystemJS configuration.
System.config({
    map: {
        '@angular': 'vendor/@angular',
        'rxjs': 'vendor/rxjs',
        'main': 'main.js'
    },
    packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map: map, packages: packages });

然后在index.html文件中，您可以有：

<script>
  System.import('system-config.js').then(function () {
    System.import('app');
  }).catch(console.error.bind(console));
</script>

导入（'System-config.js'）。然后（函数（）{
系统导入（“应用程序”）；
}).catch（console.error.bind（console））；

我建议您使用angular cli（）来帮助您生成新项目，并为您完成所有配置和艰苦工作。相信我，这对你会有很大帮助，你会节省时间的。现在情况发生了很大的变化，所以在你的旅途中有一个像你这样的好朋友会更容易

如果您不想使用它，您可以创建一个类似于system config.js的文件，该文件将包含以下内容，您可以添加所需的特定于对象的库：

var map = {};
/** User packages configuration. */
var packages = {};

var barrels = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/http',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    // Thirdparty barrels.
    'rxjs',
    // App specific barrels.
    'app',
    'app/shared',
];
var cliSystemConfigPackages = {};
barrels.forEach(function (barrelName) {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
});
// Apply the CLI SystemJS configuration.
System.config({
    map: {
        '@angular': 'vendor/@angular',
        'rxjs': 'vendor/rxjs',
        'main': 'main.js'
    },
    packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map: map, packages: packages });

然后在index.html文件中，您可以有：

<script>
  System.import('system-config.js').then(function () {
    System.import('app');
  }).catch(console.error.bind(console));
</script>

导入（'System-config.js'）。然后（函数（）{
系统导入（“应用程序”）；
}).catch（console.error.bind（console））；

感谢您的回复，我想尝试anglular cli，但我已经了解到它仍在开发中，还没有那么成熟。@GiovanniDiSanto您可以使用它。我也在使用它。谢谢你的回复，我想尝试anglular cli，但我读到它仍在开发中，还没有那么成熟。@GiovanniDiSanto你可以使用它。我也在用它。