无法让 Angular2 + gulp 项目工作

Question

我遵循了 Angular 2 快速入门指南，它运行良好。但我真的不喜欢他们使用的 ts 编译器，也不希望我的 node_modules 文件夹中有数十亿个我不需要的依赖项。所以我决定我要使用 gulp 从头开始​​构建我自己的 angular 2 项目，用于将我的 typescript 代码编译/丑化/合并到 1 个文件中。

现在，当我运行我的应用程序时，我看到“正在加载...”而不是“Hello world！”。

在我的控制台中，我收到以下错误：

GET http://localhost:3000/app/main.js 404（未找到）（zone.js:138）

错误：(SystemJS) XHR 错误 (404 Not Found) loading ((index):37)

我猜我的 SystemJS 和/或 typescript 的编译出了点问题。即使我只有一个“main.ts”，它也在寻找一个“main.js”。

在快速入门指南中，我的 app 文件夹中确实有一个“main.js”，这是编译后的打字稿的结果。 但是由于我使用的是 gulp，所以我所有编译的东西都放在一个单独的文件夹中，具有单独的名称，所以我没有“main.js”。

此时我在网上找不到任何解决方案，而且我已经开始怀念 Angular 1，因此我们非常欢迎任何帮助。

如果需要，我很乐意提供我的任何代码，但我的 app 文件夹 systemjs.config.js 和 tsconfig.json 与快速入门指南完全相同。

更新

这就是我的 systemjs.config.js 的样子，正如我所料，这就是问题所在。它似乎在寻找 .module 和 .component 文件，但我只有 1 个文件：包含所有代码的“app.min.js”。这是错的吗？

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist/app',
      // angular bundles
      '@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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './app.min.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

您的问题不在于您需要使用 angular cli 重新创建项目...您的项目说它找不到您的 main.js 文件，或者换句话说，您的 main.ts 文件。在 Angular 2 中，您的编译器 npm 获取这些 .ts 文件并将它们转换为 .js 或 javascript 文件。所以你遇到的错误

GET http://localhost:3000/app/main.js 404 (Not Found) (zone.js:138)

基本上是说它不能引用你的 main.ts 文件。您可以尝试的几件事是

1. 您的 main.ts 文件实际上是否位于您的应用程序文件夹中？根据您的项目认为应该出现的错误。
2. 当您启动应用程序时，您的 index.html 会寻找什么？例如，你应该有一个看起来像这样的脚本......

<script> System.import('app').catch(function(err){ console.error(err) }); </script>

需要注意的重要部分是('app') 部分。这是将被引用以查找您的main.ts的文件路径

3.确保('app') 实际上引用了指向您main.ts 的正确路径位置。要找出答案，只需导航到您的 systemjs.config.js 文件并查找类似这样的内容...

map: {
  app: 'app/components',

只需将应用程序的路径更改为您放置 main.ts 文件的每个位置。在此示例中，我必须将 main.ts 放在组件文件夹下。

编辑

好的，这是我的最后一次编辑：

重要的是，您要了解您的 typescript 并不是实际编译的内容，如果您已将 .js 文件拆分到另一个文件夹中，那么这就是您需要为 app 路径定义指向的内容。 我还想将此添加为注释。不要害怕 npm 和 node_modules。 Angular 2 仅在实际部署项目时在开发中体积庞大，Angular 会将您的项目缩减到非常合理的大小，您可以参考 SO found here 上的其他问题

Answer 2

如果你想开始一个新项目，你应该这样做：

---

安装angular-cli：

npm i -g angular-cli

---

创建一个新项目：

ng new yourNewProjectName --style=scss

（您可以删除 scss 或将其替换为“less”或“sass”。默认值：“css”）。

---

转到您的项目：

cd yourNewProjectName

---

启动项目：

ng serve

转到http://localhost:4200

---

愉快地玩 angular2 ！