使用TS开发Angular2但没有NPM

Question

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

有Angular2文件可用,但它们都不是TypeScript代码.

那我该怎么办？我需要Angular2.ts或具体Angular2-xx.js和.d.ts文件？

更新:我已经下载Angular2过NPM,并得到完整的源代码树,其中很难找到具体的东西.搜索.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