无法在Visual Studio代码中使用TypeScript设置Angular 2

问题描述：

我在这里疯了。我是JavaScript模块加载新手，新手Angular和TypeScript新手，我无法弄清楚为什么我的安装程序无法正常工作。请帮忙！无法在Visual Studio代码中使用TypeScript设置Angular 2

我跟随了Angular 2网站的quickstart instructions，并且已经能够获得一个正在运行的应用程序。下面是关键文件

的index.html

<html> 
    <head> 
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="js/angular2.dev.js"></script> 
    </head> 
    <body> 
    <my-app></my-app> 
    <script>System.import('./js/app');</script> 
    </body> 
</html>

js/app.js的主要成分和工作上的事情，但他们都非常缓慢。我现在试图让我的本地机器上的一切工作，并使用AMD（RequireJS）加载模块。这是新指数的样子：

的index.html（第2版）

<html> 
    <head> 
    <script data-main="js/launch" src="js/require.js"></script> 
    </head> 
    <body> 
    <my-app></my-app> 
    </body> 
</html>

launch.js（在同一文件夹中app.js和require.js）

define(["require", "exports", "angular2.dev", "app"], 
    function (require, exports, angular2, app) {});

的应用无法运行并且浏览器抛出以下错误：
1）Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror
2）TypeError: es6Promise is undefined
我试图在js/文件夹放置es6-promise.js（从here）和改变launch.js到：

launch.js（第2版）

define(["require", "exports", "es6-promise", "angular2.dev", "app"], 
    function (require, exports, es6Promise, angular2, app) { 
});

...但我得到同样的2错误。我编译Visual Basic代码中打字稿与下面的设置：

tsconfig.json

{ 
    "compilerOptions": { 
     "target": "ES5", 
     "module": "amd", 
     "sourceMap": false, 
     "removeComments": true, 
     "noImplicitAny": false, 
     "emitDecoratorMetadata":true, 
     "outDir": "./js", 
     "out": "app.js" 
    }, 
    "files": [ 
     "ts/app.ts" 
    ] 
}

我缺少什么？为什么es6Promise未定义？请帮忙。

感谢您的链接。除非我错过了一些东西，否则我不认为自己正在处理来自该帖子的同一问题。就我而言，似乎是相同的JavaScript（来自'app。js'）在一种情况下工作，但在另一种情况下不起作用。我不明白如何在我的第一个设置中定义es6Promise对象，但不能在我的第二个设置中定义。 – BeetleJuice

如果你只是想开始使用Angular2和TypeScript，那么[大量的样板]（http://www.tryangular2.com/category/Boilerplate）。我会特别推荐Angular2 Webpack Starter。幸运的是，将来安装过程将变得更加容易。 – shmck

@shmck这是一个很好的资源谢谢！它仍然让我困惑，为什么我的第一个设置上面的工作，但第二个没有。在我的研究中，我发现'system.js'和'require.js'都是模块加载器。那么为什么我的'required.js'实现不工作？我只是觉得我错过了一个基本概念，所以我想我会在这里问。 – BeetleJuice

答

那么，只是不会工作。 Angular 2的加载速度较慢，因为它需要运行时转换，因为它使用es6功能。而为了运行时的蒸腾作用，你需要包含traceur，它将为es6-promise提供polyfill。

这就是为什么它不起作用，即使你已经建立时间与打字稿编译你的app.ts。

另外require.js不知道如何自己加载es6模块，您仍然需要es6模块加载器polyfill的system.js。

谢谢！这是第一个帮助我理解的回应。这是否意味着要使用Angular 2（一旦它在生产中），我们将不得不在浏览器中运行一个转译器？这似乎违背了Angular团队对速度的专注。其次，你的回答让我想知道我们这些想限制依赖关系的人是否必须在ES5中编写Angular 2，所以我们不需要依赖'System.js'库。对此有何看法？ – BeetleJuice

不，当然你不会在生产环境中进行运行时间转换，或者浏览器支持ES6，或者它将被编译时间。 System.js只是一个用于加载ES6模块的polyfill，一旦浏览器支持ES6，也不需要它。最后但并非最不重要的，请标记为已接受的答案;-) –

答

这是一个完整的启动项目，有几个样本。现场演示。 http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

希望这会帮助您开始。

谢谢。我已经获得了不同初学者/种子项目的很好链接，并且我在搜索过程中遇到了您链接的网站！正如我在开篇文章中指出的那样，我实际上可以让项目成功运行。我想知道的是为什么我的文件的第二个版本不起作用。我想我错过了一个重要的概念，我希望其中的一个答案能帮助我学习。 – BeetleJuice

无法在Visual Studio代码中使用TypeScript设置Angular 2

相关推荐