提问者:小点点

无法让Angular2吞咽项目工作


我遵循了Angular 2快速入门指南,效果很好。但是我真的不喜欢他们使用的ts编译器,也不希望我的node_modules文件夹中有数十亿个我不需要的依赖项。所以我决定从头开始构建我自己的Angular 2项目,使用Gulp将我的打字稿代码编译/丑化/连接到1个文件中。

现在,当我运行我的应用程序时,我看到“正在加载...”而不是“你好世界!

在我的控制台中,我收到以下错误:

获取http://localhost:3000/app/main.js404(未找到)(zone.js:138)

错误:(SystemJS)XHR错误(404未找到)加载((索引):37)

我猜我的 SystemJS 和/或打字稿的编译出了问题。它正在寻找一个“main.js”,即使我只有一个“main.ts”。

在快速入门指南中,由于编译的打字稿,我的应用程序文件夹中确实有一个“main. js”。但是因为我使用的是Gulp,所以我所有编译的东西都放在一个单独的文件夹中,有一个单独的名称,所以我没有“main.js”。

在这一点上,我在网上找不到任何解决方案,而且我已经开始想念Angular 1,所以非常欢迎任何帮助。

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

更新

这就是我的systemjs. config.js的样子,因为我认为这就是问题所在。它似乎在寻找.mode和.组件文件,但我只有一个文件:'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);

共2个答案

匿名用户

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

获取 http://localhost:3000/app/main.js 404(未找到)(区域.js:138)

基本上是说它不能引用main.ts文件。你可以尝试一下

  1. 您的 main.ts 文件是否实际位于您的应用程序文件夹中?根据您的错误,这就是您的项目认为需要的地方。
  2. 启动应用程序时.html查找索引是什么? 例如,您应该有一个看起来像这样的脚本...

<代码>

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

3.确保(“应用程序”)实际上引用了正确的路径位置。要找到答案,只需导航到您的systemjs.config.js文件并查找类似以下内容...

map: {
  app: 'app/components',

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

编辑

好的,这是我最后一次编辑:

重要的是,你要明白你的typescript并不是真正正在编译的,如果你已经将.js文件拆分到另一个文件夹中,那么这就是你需要指向的app路径定义。我还想将此添加为注释。不要害怕npm和node_modules。angular 2只有在实际部署项目时才显得笨重,angular会将您的项目缩减到非常合理的大小,您可以参考这里的SO中的其他问题

匿名用户

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

安装< code>angular-cli:

npm i -g angular-cli

创建新项目:

ng new yourNewProjectName --style=scss

(您可以删除 scss 或将其替换为“less”或“sass”。默认值:“css”)。

转到您的项目 :

cd yourNewProjectName

启动项目:

ng serve

转到 http://localhost:4200

快乐地玩angular2!