如何使用typescript让angular2在eclipse中工作

Question

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.

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.

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.

Answer 1

What I did was:

1- Install Eclipse Mars, other guys uses older versions

2- Install Node.js

3- Install WildFly Server

4- Install TypeScript plugin 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

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

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

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.

Answer 2

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

• 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

Answer 3

Eclipse >= Neon

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

Answer 4

Eclipse Oxygen

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

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.

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.

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

Answer 5

I found TypeEcs plugin for 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