在带有TS但没有NPM的Angular2上开发

Question

所有指南都建议安装npm，但我正在寻找一种没有它的方法。

有可用的 Angular2 文件，但没有一个是 TypeScript 代码。

那我该怎么办？我是否需要Angular2.ts或特定的Angular2-xx.js和.d.ts文件？

更新：我已经通过NPM下载了Angular2并获得了完整的源代码树，其中很难找到特定的东西。 搜索.d.ts Angular2未返回任何结果。大量的.ts和.d.ts文件都在庞大的代码集合中。

Answer 1

事实上，这些文件是Angular2及其依赖项的捆绑版本。它们可以在用 TypeScript 编写的应用程序中使用。事实上，TypeScript 不能开箱即用地用于浏览器。您必须对它们进行预处理，以便使用 TypeScript 编译器将它们编译为 ES 代码，或者直接使用 TypeScript 库在浏览器中转译它们。

这可以通过其transpiler配置属性直接在 SystemJS 中进行配置（见下文）。

首先，只需将这些文件添加到您的 HTML 文件中：

<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>

如果要在没有 NPM 的情况下实现应用程序，可以在浏览器中转译 TypeScript 文件。这是我们使用plunkr时的方式。为此，您需要按如下所述配置 SystemJS：

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

小心在app文件夹下定义 TypeScript 文件

这是一个简单（完整）的 plunkr 描述如何做到这一点：https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info。

您可以下载相应的代码，并将其代码本地与静态 HTTP 服务器（如 http-server）一起使用，而无需使用 NPM。这可能是您的用例的一个很好的起点......

编辑

如果你的 TypeScript 文件是由 VS 编译的，你需要调整 SystemJS 配置，如下所述：

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

这样，SystemJS 将在执行导入时加载您的 JS 文件。例如：System.import('app/boot')将使用app/boot.js而不是 TypeScript