无法在Visual Studio Code中使用TypeScript设置Angular 2
[英]Unable to setup Angular 2 with TypeScript in Visual Studio Code
问题描述
I'm going nuts here. 
我要疯了。 I am new to JavaScript module loading and new to Angular and new to TypeScript and I can't figure out why my setup is not working. 我是JavaScript模块加载的新手，是Angular的新手，还是TypeScript的新手，我不知道为什么我的设置无法正常工作。 Please help! 请帮忙！
I have followed the quickstart instructions from the Angular 2 site and have been able to get a running app. 我已经按照Angular 2网站上的快速入门说明进行操作 ，并且能够获得正在运行的应用程序。 Below are the key files 以下是关键文件
index.html 的index.html
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></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 is the main component and things work, but they are very slow. js/app.js是主要组件，并且可以正常运行，但是速度很慢。 I am now trying to get everything working on my local machine and to load modules using AMD (RequireJS). 我现在正在尝试使所有事情都在本地计算机上运行，并使用AMD（RequireJS）加载模块。 Here is how the new index looks: 这是新索引的外观：
index.html (2nd version) index.html （第二版）
<html>
<head>
<script data-main="js/launch" src="js/require.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
launch.js (in same folder as app.js and require.js ) launch.js （与app.js和require.js位于同一文件夹中）
define(["require", "exports", "angular2.dev", "app"],
function (require, exports, angular2, app) {});
The app fails to run and the browser throws the following errors: 该应用程序无法运行，并且浏览器引发以下错误：
1) Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror 1） Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror
2) TypeError: es6Promise is undefined 2） TypeError: es6Promise is undefined
I have tried placing es6-promise.js (from here ) in the js/ folder and changing launch.js to: 我尝试将es6-promise.js （从此处开始 ）放置在js/文件夹中，并将launch.js更改为：
launch.js (2nd version) launch.js （第二版）
define(["require", "exports", "es6-promise", "angular2.dev", "app"],
function (require, exports, es6Promise, angular2, app) {
});
...but I get the same 2 errors. ...但是我得到同样的2个错误。 I am compiling TypeScript within Visual Basic Code with the settings below: 我正在使用以下设置在Visual Basic代码中编译TypeScript：
tsconfig.json tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "amd",
"sourceMap": false,
"removeComments": true,
"noImplicitAny": false,
"emitDecoratorMetadata":true,
"outDir": "./js",
"out": "app.js"
},
"files": [
"ts/app.ts"
]
}
What am I missing? 我想念什么？ why is es6Promise not defined? 为什么es6Promise ？ please help. 请帮忙。
2 个解决方案
解决方案1
2 2015-07-16 01:06:22
Here is a complete starter project with a few samples. 这是一个完整的入门项目，其中包含一些示例。 Live demo as well. 现场演示。 http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples
Hopefully this will help you get started. 希望这会帮助您入门。
解决方案2
1 已采纳 2015-07-16 09:31:06
Well that just won't work. 好吧，那是行不通的。 Angular 2 loads slow because it needs to be runtime transpiled because it uses es6 features. Angular 2加载速度很慢，因为它需要使用ES6功能，因此需要在运行时进行编译。 And for runtime transpiration you'll need to include traceur which will provide the polyfill for es6-promise. 对于运行时蒸腾，您将需要包括traceur，它将为es6-promise提供polyfill。
That's why it doesn't work even though that you've build time transpiled your app.ts with typescript. 这就是为什么即使您已经用typescript转换了app.ts的构建时间也无法正常工作的原因。
Also require.js doesn't know how to load es6 modules on its own you still need system.js for the es6 module loader polyfill. 另外require.js不知道如何自行加载es6模块，您仍然需要system.js来实现es6模块加载器polyfill。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.