cincheo / jsweet-angular2-quickstart

JSweet-enabled Angular 2 quickstart

Angular 2 QuickStart Source in Java (JSweet-powered)

This repository is an adaptation of the Angular 2 quickstart with TypeScript. The core difference is that the source code is written in Java and transpiled using JSweet. So, this project is potentially a good starting point to start building an Angular 2 application with Java. It should also be possible to adapt this project for Angular 4 (would require an Angular 4 candy) - contributions are more than welcome ;)

For details on how to use this project, please refer to the original project, which provides extensive documentation, and to the angular.io quickstart.

Prerequisites

Node.js > v4.x.x and npm > v3.x.x.

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions may produce errors.

Maven (for compiling with JSweet).

Getting started

Clone the project.

git clone  https://github.com/cincheo/jsweet-angular2-quickstart my-proj
cd my-proj

Compile JSweet sources (located in: src/main/java).

mvn generate-sources

Note: you can also use Eclipse to compile (see the JSweet Eclipse plugin).

Install the npm packages described in the package.json and verify that it works:

Attention Windows Developers: You must run all of these commands in administrator mode.

npm install
npm start

This will open the application in your browser. If you compile again the Java source files, the application will automatically reload. Shut it down manually with Ctrl-C.

How to extend the application

You can add new files in the app package (src/main/java). For example sake, your may want to check the JSweet PrimeNG Quickstart, which provides a more complete Angular2 example based on the same project's structure.

The project uses the angular2 candy, see the Maven dependencies in pom.xml. This candy may require some improvements. In that case, you may want to clone that repository and contribute to it. You may also want to get rid of the dependency, copy the def.angular source code in your project's source code and perform in-place modifications.

jsweet-angular2-quickstart's Issues

Module names

Right now it looks like the default name for the module files is always "module.ts". Can we customize this? I suppose I'm expecting the output to look like a standard Angular2 app, but maybe that's not necessary. It would help, however, when naming templates and other dependencies to know exactly where they should go...

access module.id

I have noticed that in Angular 2 examples, some decorators access module.id, which is from commonsjs. Right now JSweet does not support this construct, but it could quite easily. Would it be helpful?

Module 'core' has no exported member 'Component'

Hi,

Just tried to run the default quickstart and I got the following error messages:

[email protected] start C:\Workspaces\workspaceJSweet\jsweet-angular2-quickstart
tsc && concurrently "tsc -w" "lite-server"

.generated/app/AppComponent.ts(3,29): error TS2305: Module 'core' has no exported member 'Component'.
.generated/app/AppComponent.ts(3,29): error TS2339: Property 'Component' does not exist on type 'typeof core'.
.generated/app/AppModule.ts(3,28): error TS2305: Module 'core' has no exported member 'NgModule'.
.generated/app/AppModule.ts(3,28): error TS2339: Property 'NgModule' does not exist on type 'typeof core'.
.generated/app/AppModule.ts(5,28): error TS2304: Cannot find name 'platform_browser'.
.generated/app/AppModule.ts(5,28): error TS2503: Cannot find namespace 'platform_browser'.
.generated/app/Globals.ts(3,37): error TS2304: Cannot find name 'platform_browser_dynamic'.
.generated/app/Globals.ts(3,37): error TS2503: Cannot find namespace 'platform_browser_dynamic'.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Dani\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.2.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "tsc -w" "lite-server"
npm ERR! Exit status 2

I'm using:

node v4.2.0
npm v4.0.5
tsc 1.0.3
java 1.8.0_111
Any clue?