Javascript 如何使Angular2在生成的分发文件夹中工作？_Javascript_Typescript_Gulp_Angular_Systemjs

Javascript 如何使Angular2在生成的分发文件夹中工作？

javascript typescript gulp angular

Javascript 如何使Angular2在生成的分发文件夹中工作？,javascript,typescript,gulp,angular,systemjs,Javascript,Typescript,Gulp,Angular,Systemjs,我正试图让我自己的Angular2+Typescript（+SystemJS+Gulp4）入门项目开始运行，但当我从将Typescript编译在与JavaScript相同的文件夹中，并访问node\u模块文件夹切换到将所有内容放入dist文件夹时，遇到了一些问题（对于已编译的JavaScript，使用dist/js，对于供应商文件（angular2.dev.js，http.dev.js，router.dev.js，Rx.js，system.src.js等）使用dist/js/js）你可以找到完

我正试图让我自己的Angular2+Typescript（+SystemJS+Gulp4）入门项目开始运行，但当我从将Typescript编译在与JavaScript相同的文件夹中，并访问

node\u模块

文件夹切换到将所有内容放入

dist

文件夹时，遇到了一些问题（对于已编译的JavaScript，使用

dist/js

，对于供应商文件（

angular2.dev.js

，

http.dev.js

，

router.dev.js

，

Rx.js

，

system.src.js

等）使用

dist/js/js

）

你可以找到完整的项目

有人愿意看看我做错了什么吗？可能是

index.html

中的

SystemJS

配置，因为根据我尝试的配置，我要么没有实际加载

boot.js

（网络选项卡显示所有东西都已加载，但

System.import（）

promise从不解决），或出现类似

core\u 1.组件不是函数的错误

或

core\u 1.当我同时添加InputComponent
时，输入不是函数
注意：在您考虑将此标记为重复之前，我已经在net&StackOverflow搜索了几天，并尝试了我能找到的每一个变体，因此它不是真正的重复问题（尽管有许多类似的问题）
如果您不想查看完整的项目，我认为这里包括一些可能相关的内容：

TypeScript
编译（Gulp4
任务）：

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist/js",
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}


index.html

<head>
  <base href="/">
  <link rel="stylesheet" href="styles.css">
  <!-- inject:libs -->
  <!--   add wanted libs to gulpfile -->
  <!--   this is replaced by the gulp task runner -->
  <!--   lib order: -->
  <!--     angular2-polyfills, system.src, Rx, -->
  <!--     angular2.dev, router.dev, http.dev -->
  <!-- endinject -->
  <script>
    System.config({
      baseUrl: './', // same result with this omitted
      transpiler: 'typescript', // same result with this omitted
      defaultJSExtensions: true,
      bundles: {
        './js/lib/angular2.dev.js': ['angular2/*']
      },
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      },
      paths: {
        'angular/http': './js/lib/router.dev.js',
        'angular/router': './js/lib/http.dev.js',
        'angular2/*': './js/lib/angular2.dev.js',
        'rx/*': './js/lib/Rx.js'
      }
    });
    System.import('js/boot')
      .then(
        function() {console.log('loaded')},
        console.error.bind(console)
      );
  </script>
</head>

<body>
  <main-app>Loading...</main-app>
</body>

</html>


app.component.ts
（实际的Angular2
app是无关紧要的，它应该按原样工作，错误不在这里，为了完整起见包括在内）

我设法找到了解决方案，System.config（）
参数错误。这是适用于有类似问题的人的工作版本：
    System.config({
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });

它的其余部分显然会自行处理。
使用babel而不是typescript进行编译有什么特别的原因吗？Gulp内置了对babel的支持，在运行Gulp之前，我不必传输gulpfile。如果我用typescript编写gulpfile，我必须在运行它之前进行传输（据我所知）.那么纯粹的懒惰：DWY你想传输一个gulp文件吗？对不起，我有点迷茫gulp+Babel只是用于gulpfile任务。它是一个gulpfile.Babel.js。我会编辑它以消除混淆，因为对于包含的代码片段，它是否是Babel gulpfile其实并不重要。而且可能有一些原因让你想传输它nspile a gulpfile（可能与我在gulpfile中使用ES6的原因类似：在我看来，它使编写任务更简单、更优雅）明白了，那么加载index.html文件时会出现什么错误呢？
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';

bootstrap(AppComponent, []);

import {Component} from 'angular2/core';
import {InputComponent} from './input.component';

@Component({
  selector: 'main-app',
  template: `<h1>Hi!</h1>
  <input-component label="A"></input-component>
  <input-component label="B"></input-component>
  `,
  directives: [InputComponent]
})
export class AppComponent {

}

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'input-component',
  template: `
    <label [attr.for]="inputName">{{label}}
    <input #input [attr.id]="inputName" type="text"></label>
  `,
  styles: [
    `label { color: red; }`
  ]
})
export class InputComponent {
  public static latestId: number = 0;
  private inputId: number = InputComponent.latestId;
  @Input() public label: string = '';

  constructor() {
    InputComponent.latestId++;
  }
  get inputName(): string {
    return 'input-' + this.inputId;
  }
}

    System.config({
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });