joost-de-vries/play-angular-typescript.g8

A giter8 template for a Play Angular 4 Typescript application

Play Angular 4 Typescript sample application

This is a Play Angular 4.2.5 starter application with incremental Typescript compilation.

Installation

Run sbt new joost-de-vries/play-angular-typescript.g8 and you'll have a local application.
Or you can just clone this repo and move the contents of src/main/g8 to the root.

Running

The project code and the readme can be found in src/main/g8.

play-angular-typescript.g8's Issues

coursier.ResolutionException: Conflict(s) in dependency resolution

Hi, I'm trying to run the sbt application, but I'm getting the following error

coursier.ResolutionException: Conflict(s) in dependency resolution:
  org.webjars.npm:glob:5.0.15:default(compile)
org.webjars.npm:glob:7.0.6:default(compile)
[error] (*:coursierResolution) coursier.ResolutionException: Conflict(s) in dependency resolution:
[error]   org.webjars.npm:glob:5.0.15:default(compile)
[error] org.webjars.npm:glob:7.0.6:default(compile)

I have tried with both activator run and sbt run. Tried creating an app using activator new and also by cloning the repository. The same error comes up in all cases.

Importing modules with index1

I'm using the index1 configuration for development (SystemJS downloads individual JavaScript files) but I can't seem to get loading of 3rd party libs to work.

I can import modules which are part of the angular2.js bundle since they are already loaded from the <script> tag and I can import my own modules but for everything else SystemJS tries the wrong URL.

E.g. import { Http } from 'angular2/http' causes SystemJS to try localhost/angular2/http.

It seems like the System.config in index1.html needs to be changed but I'm not sure how to fix it. There is no way to make a map entry that applies to all libs by default. I would need to change the imports in my typescript code to start with "lib/" but then the directory structure produced by sbt-typescript is wrong and sbt fails.

Any ideas? Or am I missing something?

Error: Cannot find module 'sprintf-js'

Hi,

When I follow the instructions I get the following error:

[info] Loading project definition from /home/blr/telugunewsfeed/play-angular2-typescript/project
[info] Updating {file:/home/blr/telugunewsfeed/play-angular2-typescript/project/}play-angular2-typescript-build...
[info] Resolving org.fusesource.jansi#jansi;1.4 ...
[info] Done updating.
[info] Set current project to play-angular2-typescript (in build file:/home/blr/telugunewsfeed/play-angular2-typescript/)
[info] Updating {file:/home/blr/telugunewsfeed/play-angular2-typescript/}root...
[info] Done updating.

--- (Running the application, auto-reloading is enabled) ---

[info] p.c.s.NettyServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000

(Server started, use Ctrl+D to stop and go back to the console...)

[info] Compiling 8 Scala sources and 1 Java source to /home/blr/telugunewsfeed/play-angular2-typescript/target/scala-2.11/classes...
[success] Compiled in 4s
[info] Typescript compiling on 3 source(s)
[info] Typescript linting on 3 source(s)
[error]
[error] module.js:340
[error]     throw err;
[error]           ^
[error] Error: Cannot find module 'sprintf-js'
[error]     at Function.Module._resolveFilename (module.js:338:15)
[error]     at Function.Module._load (module.js:280:25)
[error]     at Module.require (module.js:364:17)
[error]     at require (module.js:380:17)
[error]     at Object.<anonymous> (/home/blr/telugunewsfeed/play-angular2-typescript/target/web/node-modules/main/webjars/codelyzer/componentClassSuffixRule.js:8:20)
[error]     at Module._compile (module.js:456:26)
[error]     at Object.Module._extensions..js (module.js:474:10)
[error]     at Module.load (module.js:356:32)
[error]     at Function.Module._load (module.js:312:12)
[error]     at Module.require (module.js:364:17)
[info]
com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure:
module.js:340
    throw err;
          ^
Error: Cannot find module 'sprintf-js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/blr/telugunewsfeed/play-angular2-typescript/target/web/node-modules/main/webjars/codelyzer/componentClassSuffixRule.js:8:20)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Tslint show JsFailure message "Set is not defined".

I run web application with command line sbt run. After open application with port 9000 is http://localhost:9000/ an present an error message as below. What's a points problems on Tllint configuration file name tslint.json?

com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure:
E:\workspacescala\play-angular2-typescript\project\target\node-modules\webjars\tslint\lib\error.js:29
var shownWarnings = new Set();
                        ^
ReferenceError: Set is not defined
    at Object.<anonymous> (E:\workspacescala\play-angular2-typescript\project\target\node-modules\webjars\tslint\lib\error.js:29:25)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (E:\workspacescala\play-angular2-typescript\project\target\node-modules\webjars\tslint\lib\configuration.js:23:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

        at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:215)
        at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:187)
        at scala.util.Success$$anonfun$map$1.apply(Try.scala:206)
        at scala.util.Try$.apply(Try.scala:161)
        at scala.util.Success.map(Try.scala:206)
        at scala.concurrent.Future$$anonfun$map$1.apply(Future.scala:235)
        at scala.concurrent.Future$$anonfun$map$1.apply(Future.scala:235)
        at scala.concurrent.impl.CallbackRunnable.run(Promise.scala:32)
        at scala.concurrent.impl.ExecutionContextImpl$$anon$3.exec(ExecutionContextImpl.scala:107)
        at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260)
        at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1339)
        at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979)
        at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107)
[error] (web-assets:tslint) com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure:

empty lib directory

Hello Joost,

sorry for my question asked here. I saw in your html file there are references to the lib directory, e.g. "<script type='text/javascript' src='@routes.Assets.versioned("lib/systemjs/dist/system-polyfills.js")'></script>". But there is actually no such directory in your project. Therefore I got errors like "GET
http://127.0.0.1:9000/assets/lib/angular2/bundles/angular2-polyfills.js 404 not found" in the Firefox console. Could you tell me how to create this directory and get the library files?
Thank you very much!
Best Regards
Wei

TypeError: ts.convertCompilerOptionsFromJson is not a function

Hi,

I'm very interested by this plugin.

Running the sample I get :

JsTaskFailure: /Users/laguiz/temp/play-angular2-typescript/project/target/typescript/sbt-typescript-0.2.2.jar:121
    var tsConfig = ts.convertCompilerOptionsFromJson(unparsedCompilerOptions, options.tsconfigDir, "tsconfig.json");
                      ^

TypeError: ts.convertCompilerOptionsFromJson is not a function
    at compile (/Users/laguiz/temp/play-angular2-typescript/project/target/typescript/sbt-typescript-0.2.2.jar:121:23)
    at Object.<anonymous> (/Users/laguiz/temp/play-angular2-typescript/project/target/typescript/sbt-typescript-0.2.2.jar:109:21)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

Property not passed to the top level component

I am not able to pass properties into the component. Here are the changes to reproduce the issue:

• modify app/views/index1.scala.html:
  <todo-app myprop="someValue"></todo-app>

• modify app/assets/app/app.ts to import Input and add the property:

import {Component, Input} from "@angular/core"
.....
export default class TodoAppComponent implements OnInit {
    @Input() myprop:string
.....

At runtime the myprop property will be undefined. I noticed that the issue is only with the top level component from the scala.html file. I was able to pass properties to components under the app/assets/app.

how to use libarary.such as ng2-bootstrap

how to use libarary.such as ng2-bootstrap

Links broken

The links in the Readme.md are broken.

Typescript errors only shown once in the browser

To reproduce:

1. Checkout the project and do sbt run
2. Open the page in the browser
3. Remove a type, say in store.ts change the todo array line to: scala todos:Array
4. Reload the page in the browser - sbt will compile and list the error correctly: \play-angular2-typescript\app\assets\app\services\store.ts:11: TS2314 Generic type 'Array<T>' requires 1 type argument(s). - and the browser (play) correctly stops and displays the page 'Compilation error' - all good
5. Now reload the page again - and it goes through - play/sbt dosn't show the error page, and some version of the transpiled javascript is now being run

This can be quite confusing, especially when, say, you make a bad change to a source file, an ajax hit fires for some other reasone and gets the compile error, and now your manual browser refresh would appear to indicate, that your code-change was good.

Migrating from SBT to Maven

Would it be possible to make a maven version of this project? I wouldn't mind getting my hands dirty trying this but would need some guidance on how to migrate. Any help is appreciated. Thanks!

Dependencies are broken

I am trying to use this template but got a dependency issue stating:

org.webjars.npm typescript 2.3.2 not found

It is indeed not present here: https://mvnrepository.com/artifact/org.webjars.npm/typescript.

Runtime exception: Invalid regular expression

I am trying to use this seed by running:

sbt new joost-de-vries/play-angular-typescript.g8

And then (from the project folder):

sbt run 

But I get a javascript exception when loading the page:

Error: Invalid regular expression: missing /
Evaluating http://localhost:9000/assets/systemjs-angular-loader.js
Loading http://localhost:9000/assets/systemjs-angular-loader.js
Instantiating http://localhost:9000/assets/app/main.js
Loading assets/app/main.js

angular2/router

Hello,
Congratulations for your job...

I have a problem trying to use it, when I try to config "angular2/router" an error occurs, the folowing error:
=> "NetworkError: 404 Not Found - http://localhost:9000/angular2/router" <=
Do you have any idea about this?

thanks.

Unexpected exception languageServiceHost.js:21 ReferenceError: Map is not defined

I need a working copy of this seed example for a new application. When I clone and run get the error below. What is the issue and how can be solved? Oh I checked and the same error happens in travis I see that the build is broken there with this same issue ... I don't feel too bad now :) but would be nice if it is fixed or someone help me figure out how to fix it.

template3 (single js out file) doesn't work with ng2

Hi, great activator!

However when doing sbt dist for production and then launching the binary file it fails with

http://localhost:9000/assets/lib/rxjs/rx.js Failed to load resource: the server responded with a status of 404 (Not Found)
zone.min.js:1 Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:9000/assets/lib/rxjs/rx.js(…)e.invoke @ zone.min.js:1

Running test under karma with jasmine

I have successfully build my play application with Angular front-end thanks to your project template.
Now I search to test my code Typescript code using karma and jasmine. I have see you have a test directory and you import jasmine-core and types__jasmine but I don't know how to use it with sbt. Is it possible or need I use external command ?

EDIT: Maybe it was helpfull to use sbt-mocha instead of karma but I got an Error: Cannot find module 'internal/fs'

Recommended IDE?

Out of curiosity, what is recommended in terms of IDE for this seed? I am used to Visual Studio Code when it comes to Angular applications, but it seems it does not work out of the box since dependencies are managed with sbt.

activator error , please help me, thanks a lot

Move System.js import script from <head> to <body>

Although it doesn't appear to cause issues in your TodoMVC example application, calling System.import in the head tag can cause the application to bootstrap itself before the dom is ready.

This has happened to me, and and others.

The solution is to move the script to the bottom of the body tag. Strangely, Angular's own documentation, shows the bootstrapping call in the head. I'm not sure if it's because Angular is still RC and the docs are being hastily written, or that they know something I don't 😕

Update the readme for latest changes

Hi,

Can you please update the readme to validate if the gotcha's are still valid? Is it possible to update the Angular version to recent version now

Thanks

Sbt test cannot test running because find Linter.createProgram().

Hello all,
I cannot run command sbt test because project show error as below

PS C:\workspacescala\webapp-example\> sbt test
Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was removed in 8.0
[warn] Executing in batch mode.
[warn]   For better performance, hit [ENTER] to switch to interactive mode, or
[warn]   consider launching sbt without any commands, or explicitly passing 'shell'
[info] Loading project definition from C:\workspacescala\webapp-example\project
[info] Set current project to tracethreatweb-fwdist (in build file:/C:/workspacescala/webapp-example/)
[info] Typescript linting on 3 source(s)
[error] C:\workspacescala\webapp-example\target\tslint\tslint.js:64
[error]     var tsProgram = Linter.createProgram(sbtTslintConfig.tsConfigFile);
[error]                            ^
[error]
[error] TypeError: Linter.createProgram is not a function
[error]     at C:\workspacescala\webapp-example\target\tslint\tslint.js:64:28
[error]     at Object.<anonymous> (C:\workspacescala\webapp-example\target\tslint\tslint.js:117:2)
[error]     at Module._compile (module.js:570:32)
[error]     at Object.Module._extensions..js (module.js:579:10)
[error]     at Module.load (module.js:487:32)
[error]     at tryModuleLoad (module.js:446:12)
[error]     at Function.Module._load (module.js:438:3)
[error]     at Module.runMain (module.js:604:10)
[error]     at run (bootstrap_node.js:389:7)
[error]     at startup (bootstrap_node.js:149:9)
[info]
com.typesafe.sbt.jse.SbtJsTask$JsTaskFailure: C:\workspacescala\webapp-example\target\tslint\tslint.js:64
    var tsProgram = Linter.createProgram(sbtTslintConfig.tsConfigFile);
                           ^

TypeError: Linter.createProgram is not a function
    at C:\workspacescala\webapp-example\target\tslint\tslint.js:64:28
    at Object.<anonymous> (C:\workspacescala\webapp-example\target\tslint\tslint.js:117:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

        at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:215)
        at com.typesafe.sbt.jse.SbtJsTask$$anonfun$com$typesafe$sbt$jse$SbtJsTask$$executeJsOnEngine$1.apply(SbtJsTask.scala:187)
        at scala.util.Success$$anonfun$map$1.apply(Try.scala:206)
        at scala.util.Try$.apply(Try.scala:161)
        at scala.util.Success.map(Try.scala:206)
        at scala.concurrent.Future$$anonfun$map$1.apply(Future.scala:235)
        at scala.concurrent.Future$$anonfun$map$1.apply(Future.scala:235)
        at scala.concurrent.impl.CallbackRunnable.run(Promise.scala:32)
        at scala.concurrent.impl.ExecutionContextImpl$$anon$3.exec(ExecutionContextImpl.scala:107)
        at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260)
        at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1339)
        at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979)
        at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107)

How to run Typescript tests

Not sure if this is the appropriate way to ask questions, but I can't find a way to run the typescript tests in test/assets/* could you explain how to run these tests?

Update to Angular 2 RC

There are now Angular 2 RC.3 deps at http://www.webjars.org/npm. Would it be possible to update this template accordingly?

Problem with the third option: app/bootstrap not found

Hi!

I was trying to execute the third option, where a single JavaScript is generated and provided by the server. I have no problem with the second option, multiple files compiled by the server and provided separately.

The problem I got was that app/bootstrap is not found on the main page.

I changed the Application controller to return index2.scala.html and passed the jvm parameter -DtsCompileMode=stage when running:

activator ~run -DtsCompileMode=stage

The browser tells me that it finds the main.js, the problem is when loading app/bootstrap here; it tries to download a localhost/app/bootstrap instead of loading it from main.js (I checked and it is not inside main.js).

I don't know if I am doing something wrong, if something is missing or if this is a bug.

Thank you! 😄

unresolved dependency: org.webjars.npm#through

Creation of the application template fails with an unresolved dependency

[2K�[0m[�[0minfo�[0m] �[0mResolving org.webjars.npm#jsesc;[0.5.0,0.6) ...�[0m
�[0m[�[33mwarn�[0m] �[0m ::::::::::::::::::::::::::::::::::::::::::::::�[0m
�[0m[�[33mwarn�[0m] �[0m :: UNRESOLVED DEPENDENCIES ::�[0m
�[0m[�[33mwarn�[0m] �[0m ::::::::::::::::::::::::::::::::::::::::::::::�[0m
�[0m[�[33mwarn�[0m] �[0m :: org.webjars.npm#through;0: not found�[0m
�[0m[�[33mwarn�[0m] �[0m ::::::::::::::::::::::::::::::::::::::::::::::�[0m
�[0m[�[33mwarn�[0m] �[0m�[0m
�

err.txt

rxjs dependencies passed compilation but failed at runtime.

Hi, I've created a template project from the sbt new command and try to run it with sbt run.

It started successfully but when I open it in browser, there occured the error in console:

TypeError: Subject_1.Subject is not a constructor
    at new HeroSearchComponent (hero-search.component.js:47)
    at createClass (core.umd.js:10960)
    at createDirectiveInstance (core.umd.js:10788)
    at createViewNodes (core.umd.js:12229)
    at callViewAction (

It seems that the rxjs is not loaded in runtime. But I've found it in the source assets/lib/rxjs. I don't know why. Wish that I can get some help from you. Many thanks!

Support scss instead of css

I was wondering if you can add support for scss too, It will be better and cleaner, I know this could be tricky but just to keep this item as enhancement for later.