无法让 Angular2 + gulp 项目工作

Posted 2023-03-13

【中文标题】无法让 Angular2 + gulp 项目工作

【英文标题】：Can't get Angular2 + gulp project to work

【发布时间】：2017-04-04 23:18:18

【问题描述】：

我遵循了 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);

【参考方案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 文件。您可以尝试的几件事是

您的 main.ts 文件实际上是否位于您的应用程序文件夹中？根据您的项目认为应该出现的错误。 当您启动应用程序时，您的 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 上的其他问题

【讨论】：

感谢您的回答！我相信你是对的，问题出在我的 systemjs.config.js 文件中。我尝试添加地图部分，但理解错误。我将其更改为匹配我的应用程序名称并使其引用我的连接文件：'app.min.js'，现在我得到的错误是 404 找不到错误。就好像 systemjs 或 zone.js 正在寻找 app.component 和 app.module 文件一样。我没有这些有问题吗？因为我只有 1 个捆绑文件。我将编辑我的帖子，向您展示我的配置文件是什么样的

值得注意的是，只要您将 .ts 和 js 文件分离出来，您将继续遇到问题。继续重新映射所有错误以指向您拥有 .js 文件的文件夹。因为这些才是编译时真正重要的。打字稿只是为了方便用户或他们认为是“更简单的语言”

所以我需要在我的项目中存在 .js 文件？因为目前我正在将我的打字稿编译为 javascript，然后在 1 中将其连接和丑化，这意味着我的项目中从来没有单独的 .js 文件。仅 .ts 文件和一个 app.min.js

是的，我相信你会的。因为 .js 是实际运行的代码。然而;有一些方法可以将它们隐藏在您的项目中，这样您就不会在每个组件中有 3 个文件，并在您尝试编码时增加混乱（.ts、.js。我相信 .map 也存在）。您可以找到隐藏这些文件的帮助，这取决于您使用的编辑器。你可以在这里找到视觉工作室代码例如***.com/questions/31587949/…

只是为了澄清，这只是“隐藏”文件，而不是从项目中删除或分离它们，因为你需要它们。 :)

【参考方案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 ！

【讨论】：

我想我不得不使用预构建项目结构...我将使用它并手动删除我不需要的所有内容...我的目标是了解原因它不起作用，而不是通过使用脚手架工具来修复它。无论如何感谢您的回答！

systemjs 不再被 angular-cli 使用，因为例如添加第三部分库要复杂得多。当我看到“此时我在网上找不到任何解决方案并且我已经开始怀念 Angular 1”时，我以为您想快速启动一个项目并专注于 NG2 代码，而不是构建系统。无论如何，祝 ng2 好运:)

这不是回答这个问题的合适方式。 angular 2 快速入门是开始学习 angular 2 的好方法，他的问题可能只是文件夹结构问题。

@Bean0341 如果他想专注于如何编译 TS、SCSS 等，好的，他可以做到所有这些。但在教程结束时，他会发现类似这样的内容：“无论如何，我们在 angular-cli（这是官方 cli）中删除了 systemjs，所以现在只需使用 webpack 并忘记我们对 systemjs 所说的话”。在我看来，他想专注于 Angular2 而不是如何设置项目。也许我错了，因此你的答案是更好的主意；）

@Maxime 让您误会了！在掌握了对 angular2 的基本理解后，我打算切换到 Webpack。我只是想根据我的个人喜好创建一个 angular 2 骨架，但我想用 gulp 连接并创建一个 Web 服务器。我在某处读到 webpack 也可以做到这一点，所以我想先这样尝试。我认为问题在于 systemjs.config.js 仍然基于一个项目，该项目在将我的 TS 编译为 JS 后将 typescript 和 javascript 文件放在同一个文件夹中。