使用 Systemjs 加载 angular2 依赖项答案

【问题标题】：Load angular2 dependencies with Systemjs使用 Systemjs 加载 angular2 依赖项
【发布时间】：2016-10-21 19:56:47
【问题描述】：

我一直在关注官方网站学习angular2。由于 SystemJS 似乎是推荐的模块加载器，我正在尝试使用它。从官方快速入门 (https://angular.io/guide/quickstart) 可以找到以下加载 angular2 项目的 index.html 示例：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

我想用 systemJS 加载所有东西，遇到这种情况：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 2. Loading SystemJS -->
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

这可能吗？

【问题讨论】：

标签： angular systemjs

【解决方案1】：

我建议您使用 angular-cli (https://github.com/angular/angular-cli) 来帮助您生成一个新项目并为您完成所有配置和艰苦的工作。相信我，它会对你有很大帮助，你会节省时间。现在情况发生了很大变化，因此您可以更轻松地在旅途中拥有像 angular-cli 这样的好朋友。

如果您不想使用它，您可以创建一个类似 system-config.js 的文件，其中包含类似的内容，您可以添加barrels 您想要的对象特定库：

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>

【讨论】：

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