在Angular2发展与TS，但没有NPM [英] Development on Angular2 with TS but without NPM

问题描述

所有指南建议安装 NPM ，但我没有它搜索的方式。

All guides suggests to install npm, but I'm searching way without it.

有Angular2文件中可用，但他们都不是打字稿code。

There's Angular2 files available, but none of them are TypeScript code.

所以，我必须做的？我需要Angular2.ts或特定 Angular2-xx.js 和 .d.ts ？

So what I must do? Do I need Angular2.ts or specific Angular2-xx.js and .d.ts?

UPD：我已经下载了Angular2 NPM并得到了完整的源代码树，在这里很难找到所需要的东西。搜索 .d.ts 为Angular2返回任何结果。
很多 .TS 和 .d.ts 链接到code文件巨大的混乱。

UPD: I've downloaded Angular2 over NPM and got full source tree, where hard to find something needed. Searching for .d.ts for Angular2 returned no results. A lot of .ts and .d.ts are linked to huge mess of code files.

这是一个地狱。

推荐答案

在事实上，这些文件是Angular2及其依赖的捆绑版本。它们可以与打字原稿编写的应用程序中使用。事实上打字稿事项不能使用开箱到浏览器。你必须以preprocess它们，将它们汇编成ES code与打字稿编译器或直接与打字稿库在浏览器中transpile他们。

In fact, these files are a bundled version of Angular2 and its dependencies. They can be used within an application written with TypeScript. As a matter of fact TypeScript can't be used out of the box into browsers. You must to preprocess them to compile them into ES code with the TypeScript compiler or transpile them in the browser directly with the TypeScript library.

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

This can be configured within SystemJS directly through its transpiler configuration attribute (see below).

首先简单地在HTML文件中添加这些文件：

First simply add these files in your HTML file:

<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的应用程序，你可以在browser.It的方式，我们使用plunkr时做内transpile您的打字稿文件。为此，您需要配置SystemJS描述如下：

If you want to implement an application without NPM, you can transpile your TypeScript files within the browser.It's way we do when using plunkr. For this you need to configure SystemJS as described below:

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

要小心，以定义一个应用文件夹下的文件打字稿

下面是一个简单的（完整的）plunkr描述如何做到这一点： https：//开头plnkr .CO /编辑/ vYQPePG4KDoktPoGaxYu？p =信息。

Here is a simple (and complete) plunkr describing how to do that: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.

您也可以下载相应的code和像 HTTP服务器静态HTTP服务器在本地使用其code，而不使用NPM。这可能是为您的使用情况下，一个良好的起点......

You can download the corresponding code and use its code locally with a static HTTP server like http-server without using NPM. This could be a good starting point for your use case...

修改

如果您的打字原稿文件由VS编译，则需要适应SystemJS配置，如下所述：

If your TypeScript files are compiled by VS, you need to adapt the SystemJS configuration, as described below:

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

这样，SystemJS执行导入时会加载您的JS文件。例如： System.import（应用程序/启动'）将使用应用程序/ boot.js 而不是打字稿有一个

This way, SystemJS will load your JS files when doing an import. For example: System.import('app/boot') will use the app/boot.js and not the TypeScript one

这篇关于在Angular2发展与TS，但没有NPM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！