无法让Angular2 + gulp项目工作

Question

我遵循了Angular 2快速入门指南，该工作正常。但我真的不喜欢他们使用的ts编译器，也不希望我的node_modules文件夹中不需要数十亿的依赖项。所以我决定从头创建我自己的angular 2项目，使用gulp将我的脚本代码的编译/ uglifying/concatting转换为1个文件。

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

而且在我的控制台我得到以下错误：

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

Error: (SystemJS) XHR error (404 Not Found) loading ((index):37)

即时猜测事情错在这里与我的SystemJS和/或打字稿的编译。它正在寻找一个'main.js'，即使我只有'main.ts'。

在快速入门指南中，由于编译后的打字稿，我的应用程序文件夹中确实存在'main.js'。 但是由于我使用的是gulp，我所有编译的东西都进入了一个单独的文件夹，并且有一个单独的名称，所以我没有'main.js'。

在这一点上，我无法找到任何解决方案在线，我已经开始错过Angular 1，所以任何帮助都会受到欢迎。

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

UPDATE

这是我的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

你的问题不是你需要重新创建你的项目与角度cli ...你的项目是说它找不到你的main.js文件或换句话说你的main.ts文件。在角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位于我的组件文件夹下。

编辑

确定这是我最后编辑：

，你明白，你的打字稿没有什么实际被编译的，如果你有分裂您的.js文件到另一个文件夹中是很重要的，那么这就是你需要指出的app路径定义。 我也想添加这个作为一个说明。不要害怕npm和node_modules。角2是庞大的，只在开发时涉及到实际部署您的项目，角会将您的项目削减到非常合理的大小，您可以参考其他问题发现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！