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

Question

我正在尝试让我自己的 Angular2+Typescript (+SystemJS+Gulp4) 入门项目开始运行，但是我运行从在同一文件夹中编译 TypeScript 切换时遇到了一些问题JavaScript 并有权访问 node_modules 文件夹以将所有内容放入 dist 文件夹（dist/js 用于编译 JavaScript 和 dist/js/lib 用于供应商文件（angular2.dev.js、http.dev.js、router.dev.js、Rx.js、system.src.js 等）。

您可以找到完整的项目 on github (souldreamer/event-planner)。

有人愿意看一看我做错了什么吗？它可能是 index.html 中的 SystemJS 配置，因为根据我尝试的配置，我要么没有实际加载 boot.js （网络选项卡显示一切都已加载，但 System.import() promise never resolves)，或者当我还添加 InputComponent.

时出现 core_1.Component is not a function 或 core_1.Input is not a function 之类的错误

注意： 在你考虑将其标记为重复之前，我在过去几天一直在网络和 Whosebug 上搜索，并尝试了我能找到的所有变体, 所以这不是一个真正的重复问题（即使有很多类似的问题）。

这里包含一些我认为可能相关的部分，以防您不想查看完整项目：

TypeScript编译（Gulp4任务）：

function tsCompile() {
  var tsResult = gulp
    .src(['./app/**/*.ts', './typings/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsc(tsc.createProject('tsconfig.json')));

  return merge([
    tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')),
    tsResult.js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('./dist/js'))
  ]);
}

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>

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

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';

bootstrap(AppComponent, []);

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

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 {

}

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

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;
  }
}

Answer 1

我设法找到了解决方案，System.config() 参数错误。这是任何有类似问题的人的工作版本：

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

其余部分显然会自行处理。

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

How can you make Angular2 work in a generated distribution folder?

javascript

typescript

gulp

systemjs

angular