Creating a Angular2 TS app in a Cordova project - angularjs

Question

I thought to myself, I should leverage the best of Angular, Angular 2 TS and cordova to get my web application up and running. Not a bad idea to think of, but I was having some minor issues. I wasn't sure if anyone had them, or knows how to implement them. I noticed there are next to no how-tos online and you end up when searching for angular 2 cordova you actually get results for a different mobile web framework.
So first thing I did was execute these scripts.
mkdir myApp
cd myApp
cordova create .
cordova platform add android browser
cordova plugin add cordova-plugin-browsersync
the browser sync i thought would be necessary to handle the fact I am no longer using server-lite in the angular2 application which has browser sync. More to come later.
cd www
rm /f /r * #or equivalent. I deleted the contents.
This is where I start the Angular 2 TS how-to via: https://angular.io/docs/ts/latest/quickstart.html
#create 4 files: package.json, systemjs.config.js, tsconfig.json, typings.json
Now this is where I do some modifications. Since we are using Cordova and Not server-light, i went into the package.json and updated the npm start script to: "start": "tsc && concurrently \"npm run tsc:w\" \"cordova run browser --live-reload\" ",. The reason as I stated is that it was server-lite but we are using cordova. Since cordova itself doesnt do a live refresh, I installed the plugin cordova-plugin-browsersync you can read up on it here: https://github.com/nparashuram/cordova-plugin-browsersync
npm install
npm typings install
mkdir app
#make ts files.
cd ..
#make html / css file.
Now, Everything is in place, i created everything for Angular 2 in [cordovaProj]/www and i want to now run it.
npm start
it will compile everything and run the cordova server. AWESOME. IT WORKS.... or so i thought. It doesn't refresh.
Test 1: Change index.html file.. Change the contents of title.
Result 1: No live update.
Test 2: Change the result of www/app/app.component.ts template to say: Hello World.
Result 2: tsc-w fires, updates everything as angular does. Browser doesnt refresh.
Observations: When I run npm start i noticed 1 thing, even though it is saying to run cordova run browser --live-reload it ends up running cordova run --nobuild
Here is the console output i scraped:
C:\Users\wfrancis\WebstormProjects\SampleCordovaAngular2Application\www\app>npm
start
> angular-quickstart#1.0.0 start C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\www
> tsc && concurrently "npm run tsc:w" "cordova run browser --live-reload"
[0]
[0] > angular-quickstart#1.0.0 tsc:w C:\Users\wfrancis\WebstormProjects\SampleCo
rdovaAngular2Application\www
[0] > tsc -w
[0]
[0] 9:38:35 AM - Compilation complete. Watching for file changes.
[1] Running command: cmd "/s /c "C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\platforms\browser\cordova\build.bat""
[1]
[1] Cleaning Browser project
[1] Running command: cmd "/s /c "C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\platforms\browser\cordova\run.bat --nobuild""
[1]
[1] Static file server running # http://localhost:8000/index.html
[1] CTRL + C to shut down
[1] 200 /index.html
[1] 200 /styles.css
[1] 200 /systemjs.config.js (gzip)
[1] 200 /node_modules/reflect-metadata/Reflect.js (gzip)
[1] 200 /node_modules/zone.js/dist/zone.js (gzip)
[1] 200 /node_modules/core-js/client/shim.min.js (gzip)
[1] 200 /node_modules/systemjs/dist/system.src.js (gzip)
[1] 200 /app/main.js
[1] 404 /favicon.ico
[1] 200 /node_modules/#angular/platform-browser-dynamic/bundles/platform-browser
-dynamic.umd.js (gzip)
[1] 200 /app/app.module.js (gzip)
[1] 200 /app/app.component.js (gzip)
[1] 200 /node_modules/#angular/core/bundles/core.umd.js (gzip)
[1] 200 /node_modules/#angular/platform-browser/bundles/platform-browser.umd.js
(gzip)
[1] 200 /node_modules/#angular/compiler/bundles/compiler.umd.js (gzip)
[1] 200 /node_modules/#angular/common/bundles/common.umd.js (gzip)
[1] 200 /node_modules/rxjs/Subject.js (gzip)
[1] 200 /node_modules/rxjs/Observable.js (gzip)
[1] 200 /node_modules/rxjs/Subscriber.js (gzip)
[1] 200 /node_modules/rxjs/util/ObjectUnsubscribedError.js
[1] 200 /node_modules/rxjs/Subscription.js (gzip)
[1] 200 /node_modules/rxjs/symbol/rxSubscriber.js
[1] 200 /node_modules/rxjs/SubjectSubscription.js (gzip)
[1] 200 /node_modules/rxjs/util/root.js
[1] 200 /node_modules/rxjs/util/toSubscriber.js
[1] 200 /node_modules/rxjs/symbol/observable.js
[1] 200 /node_modules/rxjs/util/isFunction.js
[1] 200 /node_modules/rxjs/Observer.js
[1] 200 /node_modules/rxjs/util/isArray.js
[1] 200 /node_modules/rxjs/util/isObject.js
[1] 200 /node_modules/rxjs/util/tryCatch.js
[1] 200 /node_modules/rxjs/util/errorObject.js
[1] 200 /node_modules/rxjs/util/UnsubscriptionError.js (gzip)
I noticed on the github for browsersync, it said to do: cordova run -- --live-reload but the first set of -- i thought meant to be whatever platform you were running, in my case browser
Test 3: Used: cordova run -- --live-reload instead of cordova run browser --live-reload, called npm start (printout below), and attempted to change HTML.
Result 3: No update.
Test 4: same as Test 3, but attempted to change www/app/app.component.ts and noticed that a change was watched, and the new JS was compiled. Still no update to application.
C:\Users\wfrancis\WebstormProjects\SampleCordovaAngular2Application\www\app>npm
start
> angular-quickstart#1.0.0 start C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\www
> tsc && concurrently "npm run tsc:w" "cordova run -- --live-reload"
[0]
[0] > angular-quickstart#1.0.0 tsc:w C:\Users\wfrancis\WebstormProjects\SampleCo
rdovaAngular2Application\www
[0] > tsc -w
[0]
[0] 9:56:33 AM - Compilation complete. Watching for file changes.
[1] Running command: cmd "/s /c "C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\platforms\browser\cordova\build.bat --live-reload""
[1]
[1] Cleaning Browser project
[1] [BS] Access URLs:
[1] -------------------------------------
[1] Local: http://localhost:3000
[1] External: http://10.224.60.17:3000
[1] -------------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://10.224.60.17:3001
[1] -------------------------------------
[1] [BS] Serving files from: platforms\android\assets\www
[1] [BS] Serving files from: platforms\ios\www
[1] [BS] Watching files...
[1] ANDROID_HOME=C:\Users\wfrancis\AppData\Local\Android\sdk
[1] JAVA_HOME=C:\Program Files\Java\jdk1.8.0_77
[1] Starting a new Gradle Daemon for this build (subsequent builds will be faste
r).
[1] Incremental java compilation is an incubating feature.
[1] :preBuild UP-TO-DATE
[1] :preDebugBuild UP-TO-DATE
[1] :checkDebugManifest
[1] :CordovaLib:preBuild UP-TO-DATE
[1] :CordovaLib:preDebugBuild UP-TO-DATE
[1] :CordovaLib:compileDebugNdk UP-TO-DATE
[1] :CordovaLib:compileLint
[1]
[1] :CordovaLib:copyDebugLint UP-TO-DATE
[1] :CordovaLib:mergeDebugProguardFiles
[1]
[1] :CordovaLib:packageDebugRenderscript
[1] UP-TO-DATE
[1] :CordovaLib:checkDebugManifest
[1] :CordovaLib:prepareDebugDependencies
[1] :CordovaLib:compileDebugRenderscript
[1]
[1] :CordovaLib:generateDebugResValues
[1]
[1] :CordovaLib:generateDebugResources
[1] :CordovaLib:packageDebugResources
[1]
[1] :CordovaLib:compileDebugAidl
[1]
[1] :CordovaLib:generateDebugBuildConfig
[1]
[1] :CordovaLib:mergeDebugShaders
[1]
[1] :CordovaLib:compileDebugShaders
[1]
[1] :CordovaLib:generateDebugAssets
[1]
[1] :CordovaLib:mergeDebugAssets
[1]
[1] :CordovaLib:processDebugManifest
[1]
[1] :CordovaLib:processDebugResources
[1]
[1] :CordovaLib:generateDebugSources
[1] :CordovaLib:incrementalDebugJavaCompilationSafeguard
[1]
[1] :CordovaLib:compileDebugJavaWithJavac
[1]
[1] :CordovaLib:compileDebugJavaWithJavac - is not incremental (e.g. outputs hav
e changed, no previous execution, etc.).
[1] Note: Some input files use or override a deprecated API.
[1] Note: Recompile with -Xlint:deprecation for details.
[1] :CordovaLib:processDebugJavaRes
[1] UP-TO-DATE
[1] :CordovaLib:transformResourcesWithMergeJavaResForDebug
[1]
[1] :CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
[1]
[1] :CordovaLib:mergeDebugJniLibFolders
[1]
[1] :CordovaLib:transformNative_libsWithMergeJniLibsForDebug
[1]
[1] :CordovaLib:transformNative_libsWithSyncJniLibsForDebug
[1]
[1] :CordovaLib:bundleDebug
[1]
[1] :prepareAndroidCordovaLibUnspecifiedDebugLibrary
[1]
[1] :prepareDebugDependencies
[1] :compileDebugAidl
[1]
[1] :compileDebugRenderscript
[1]
[1] :generateDebugBuildConfig
[1]
[1] :mergeDebugShaders
[1]
[1] :compileDebugShaders
[1]
[1] :generateDebugAssets
[1] :mergeDebugAssets
[1] Running command: cmd "/s /c "C:\Users\wfrancis\WebstormProjects\SampleCordov
aAngular2Application\platforms\browser\cordova\run.bat --nobuild --live-reload""
[1]
[1] Static file server running # http://localhost:8000/index.html
[1] CTRL + C to shut down
[1] 200 /index.html
[1] 200 /styles.css
[1] 200 /systemjs.config.js (gzip)
[1] 200 /node_modules/zone.js/dist/zone.js (gzip)
[1] 200 /node_modules/reflect-metadata/Reflect.js (gzip)
[1] 200 /node_modules/core-js/client/shim.min.js (gzip)
[1] 200 /node_modules/systemjs/dist/system.src.js (gzip)
[1] 200 /app/main.js
[1] 200 /node_modules/#angular/platform-browser-dynamic/bundles/platform-browser
-dynamic.umd.js (gzip)
[1] 200 /app/app.module.js (gzip)
[1] 200 /app/app.component.js (gzip)
[1] 200 /node_modules/#angular/platform-browser/bundles/platform-browser.umd.js
(gzip)
[1] 200 /node_modules/#angular/core/bundles/core.umd.js (gzip)
[1] 200 /node_modules/#angular/common/bundles/common.umd.js (gzip)
[1] 200 /node_modules/#angular/compiler/bundles/compiler.umd.js (gzip)
[1] 200 /node_modules/rxjs/Subject.js (gzip)
[1] 200 /node_modules/rxjs/Observable.js (gzip)
[1] 200 /node_modules/rxjs/util/ObjectUnsubscribedError.js
[1] 200 /node_modules/rxjs/util/root.js
[1] 200 /node_modules/rxjs/symbol/rxSubscriber.js
[1] 200 /node_modules/rxjs/Subscriber.js (gzip)
[1] 200 /node_modules/rxjs/Subscription.js (gzip)
[1] 200 /node_modules/rxjs/SubjectSubscription.js (gzip)
[1] 200 /node_modules/rxjs/util/toSubscriber.js
[1] 200 /node_modules/rxjs/symbol/observable.js
[1] 200 /node_modules/rxjs/util/isFunction.js
[1] 200 /node_modules/rxjs/Observer.js
[1] 200 /node_modules/rxjs/util/isArray.js
[1] 200 /node_modules/rxjs/util/isObject.js
[1] 200 /node_modules/rxjs/util/tryCatch.js
[1] 200 /node_modules/rxjs/util/errorObject.js
[1] 200 /node_modules/rxjs/util/UnsubscriptionError.js (gzip)
Does anyone have a way in which I could get a Live Update for the Browser? This is a critical piece for development, and waiting a few minutes for it to run through npm start is too much.
EDIT I noticed a update that was very much so delayed. Result 4 gave me this printout:
[0] 10:03:47 AM - File change detected. Starting incremental compilation...
[0] 10:03:49 AM - Compilation complete. Watching for file changes.
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1]
[1] FAILURE: Build failed with an exception.
[1]
[1] * What went wrong:
[1] Execution failed for task ':mergeDebugAssets'.
[1] > Error: java.io.FileNotFoundException: C:\Users\wfrancis\WebstormProjects\S
ampleCordovaAngular2Application\platforms\android\assets\www\node_modules\lite-s
erver\node_modules\browser-sync\node_modules\bs-recipes\recipes\grunt.html.injec
tion\app\browser-sync-start.html (The system cannot find the file specified)
[1]
[1] * Try:
[1] Run with --stacktrace option to get the stack trace. Run with --info or --de
bug option to get more log output.
[1]
[1] Error: java.io.FileNotFoundException: C:\Users\wfrancis\WebstormProjects\Sam
pleCordovaAngular2Application\platforms\android\assets\www\node_modules\lite-ser
ver\node_modules\browser-sync\node_modules\bs-recipes\recipes\grunt.html.injecti
on\app\browser-sync-start.html (The system cannot find the file specified)
[1] :mergeDebugAssets FAILED
[1]
[1] BUILD FAILED
[1]
[1] Total time: 3 mins 12.839 secs
[1]
[1] * What went wrong:
[1] Execution failed for task ':mergeDebugAssets'.
[1] > Error: java.io.FileNotFoundException: C:\Users\wfrancis\WebstormProjects\S
ampleCordovaAngular2Application\platforms\android\assets\www\node_modules\lite-s
erver\node_modules\browser-sync\node_modules\bs-recipes\recipes\grunt.html.injec
tion\app\browser-sync-start.html (The system cannot find the file specified)
[1]
[1] * Try:
[1] Run with --stacktrace option to get the stack trace. Run with --info or --de
bug option to get more log output.
[1]