Javascript 如何使用打字稿让 angular2 在 Eclipse 中工作

How to get angular2 to work in eclipse with typescript

提问by monkey intern

So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.

所以我开始研究 angular2 并且因为我看到了很多对 typescript 的引用，所以我试图从 javascript 切换到它。问题是，我看到了一个很好的小指南，我可以按照它在 Eclipse 中安装它（angular、javascript、在 angular 主页上启动 5 分钟指南代码所需的一切），所以我做到了并设法让它工作。

Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.

现在我想对打字稿做同样的事情，但我发现自己迷路了，因为它似乎不起作用，我无法启动代码，就像 node.js 不再工作一样，但因为我不知道预期的结果是什么，我不确定缺少什么。

For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.

例如，我重新做了 5 分钟的指南，并注意到我没有安装模块，也没有准备好任何 run-as 配置，事实上，我无法像我尝试的任何打字稿代码一样运行去做。

回答by Mohy Eldeen

What I did was:

我所做的是：

1- Install Eclipse Mars, other guys uses older versions

1-安装Eclipse Mars，其他人使用旧版本

2- Install Node.js

2- 安装 Node.js

3- Install WildFly Server

3- 安装 WildFly 服务器

4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript

4- 安装 TypeScript 插件https://marketplace.eclipse.org/content/typescript

5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have

5- 在 Eclipse 中导入我的项目，您可能需要创建一个新的静态 Web 项目并在其中添加您的文件。5 分钟快速入门不是 eclipse web 项目，因此您可能无法导入它。不要忘记使用您拥有的节点模块复制和粘贴相同的结构

6- Right click on the project > Configure > Enable Typescript Builder

6- 右键单击​​项目 > 配置 > 启用 Typescript Builder

7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:

7-右键单击项目>属性>打字稿>编译器并配置如下：

I hope this will do it for you.

我希望这对你有用。

Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like @Input will not work, you will have to use inputs:[] inside your @Component annotation.

请记住，此插件不尊重 json 配置文件，因此您必须如屏幕截图所示手动执行此操作。此外，如果您要为组件构造函数提供参数，则会出现错误。如果你有这些，请告诉我。另一件要提到的事情是，使用诸如 @Input 之类的注释是行不通的，您必须在 @Component 注释中使用 input:[] 。

回答by Mickael

You can try to add those plugins on top of Mars:

您可以尝试在 Mars 上添加这些插件：

• https://github.com/angelozerr/angular2-eclipse
• https://github.com/angelozerr/typescript.java

• https://github.com/angelozerr/angular2-eclipse
• https://github.com/angelozerr/typescript.java

Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:

这两个正在孵化，但已经提供了很好的功能。还有一个，我没有尝试，但有一定的人气：

• https://github.com/palantir/eclipse-typescript

• https://github.com/palantir/eclipse-typescript

回答by Christophe Roussy

Eclipse >= Neon

日食 >= 霓虹灯

• sudo npm install -g angular-cli(ng helpmust work)
• See: https://github.com/angelozerr/angular2-eclipse
• Install it and restart Eclipse
• Open a .tsfile

• sudo npm install -g angular-cli（ng help必须工作）
• 见：https: //github.com/angelozerr/angular2-eclipse
• 安装它并重新启动 Eclipse
• 打开.ts文件

回答by Craig

Eclipse Oxygen

日蚀氧气

Default javascript installation, then added the default free plugin for angular 2 / typescript from here:

默认 javascript 安装，然后从这里添加了 angular 2 / typescript 的默认免费插件：

angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/

angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/

After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.

安装后我打开了一个现有的 Angular 4 / TS 项目，工作正常。然后我从http://www.liclipse.com/text/updates安装了对 .scss 的支持。所有设置和配置都使用 Typescript 2.4.1 / nodejs v6.9.4。

But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.

但在几天之内，它现在根本无法打开 .ts 文件。重新安装 ng 插件并没有修复它，我卸载了 liclipse 插件，也没有任何变化。它基本上使 eclipse 无法按原样用于 ng4 项目。

The logs show the following errors.

日志显示以下错误。

org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
    at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
    at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
    at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
    at java.lang.Class.getDeclaredConstructors0(Native Method)
    at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
    at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
    at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
 ...
 Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager

回答by Juneho Nam

I found TypeEcsplugin for Typescript

我找到 TypeEcs了 Typescript 的插件

it provide below.

它提供如下。

?Syntax highlighting

?语法高亮

?Code Completion

?代码补全

?Code Outline

?代码大纲

?Find References

? 查找参考资料

?Rename / Refactor

?重命名/重构

?Open Type

?开放式

?Code Compilation

?代码编译

?Format Code

?格式代码

?Comment Code

?评论代码

?Open Declaration

?公开声明

?Mark Occurences

? 标记出现

?Type Script Debug

?键入脚本调试