Angular 2 - 节点 - gulp |找不到模块 .component

Question

我正在尝试使用 gulp 构建工具在 typescript 中使用 nodejs 构建一个完整的 typescript 应用程序到 Angular 2。

gulp 编译从 /src 到 /dist、从 .ts 到 .js 的所有内容（几乎）没有问题。

当我启动应用程序时，一切正常，除了：

zone.js:101 GET http://localhost:3000/app/boot.component 404 (Not Found).

但是当我改变

import { BootComponent } from './app/boot.component';

到

import { BootComponent } from './app/boot.component.js';

我只得到一个ts错误（当然，因为他会找一个.ts文件），但它有效。

如何在不添加 .js 的情况下让它工作？

这是我的 sysmtemjs.config.js :

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    '@angular':                   'lib/@angular',
    'rxjs':                       'lib/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'main':                       { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  for (var x in ngPackageNames) {
    packIndex(ngPackageNames[x]);
  }

  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

在我的 index.html 中，我还必须将 main 导入为 main.js:

System.import('main.js').catch(function(err){ console.error(err); });

Answer 1

您需要告诉 SystemJS 您的应用程序目录以及如何从中加载组件。通过在 systemjs.config.js 文件中添加应用程序包来执行此操作。

var packages = {
  'main':                       { main: 'main.js',  defaultExtension: 'js' },
  'app':                        { defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
};

Answer 2

var map = {
    'main':                       'my_app_folder',
    '@angular':                   'lib/@angular',
    'rxjs':                       'lib/rxjs'
};

其中 my_app_folder 是找到 main.js 的文件夹。

Angular 2 - 节点 - gulp |找不到模块 .component

Angular 2 - Node - gulp | can not find module .component

node.js

typescript

gulp

gulp-typescript

angular