在Cordova项目中创建Angular2 TS应用程序

时间：2016-09-27 14:10:28

标签： angularjs node.js cordova angular typescript

我心想，我应该利用最好的Angular，Angular 2 TS和cordova来启动和运行我的Web应用程序。想想并不是一个坏主意，但我遇到了一些小问题。我不确定是否有人拥有它们，或者知道如何实现它们。我注意到网上没有how-tos，你最终在搜索 angular 2 cordova 时，你实际上得到了不同移动网络框架的结果。

所以我做的第一件事就是执行这些脚本。

mkdir myApp
cd myApp
cordova create .
cordova platform add android browser
cordova plugin add cordova-plugin-browsersync

浏览器同步我认为有必要处理我不再在具有浏览器同步的angular2应用程序中使用server-lite的事实。以后会有更多。

cd www
rm /f /r *    #or equivalent.  I deleted the contents.

这是我通过https://angular.io/docs/ts/latest/quickstart.html

启动Angular 2 TS操作方法的地方 
#create 4 files:  package.json, systemjs.config.js, tsconfig.json, typings.json

现在这是我做一些修改的地方。由于我们使用Cordova而不是服务器灯，我进入了package.json并将npm启动脚本更新为："start": "tsc && concurrently \"npm run tsc:w\" \"cordova run browser --live-reload\" ",。我说的原因是server-lite，但我们使用的是cordova。由于cordova本身没有进行实时刷新，我安装了插件 cordova-plugin-browsersync ，你可以在这里阅读：https://github.com/nparashuram/cordova-plugin-browsersync 

npm install
npm typings install
mkdir app
#make ts files.
cd ..
#make html / css file.

现在，一切都已到位，我为[cordovaProj]/www中的Angular 2创建了所有内容，我想现在运行它。

npm start

它将编译所有内容并运行cordova服务器。真棒。它工作....或者我想。它没有刷新。

测试1：更改index.html文件..更改标题的内容。

结果1：没有实时更新。

测试2：将www/app/app.component.ts模板的结果更改为： Hello World 。

结果2：tsc-w触发，以角度为单位更新所有内容。浏览器没有刷新。

观察：当我运行npm start时，我注意到了一件事，即使它说要运行cordova run browser --live-reload，它最终会运行cordova run --nobuild

这是我刮掉的控制台输出：

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)

我注意到在github上使用browsersync，它说：cordova run -- --live-reload但第一组 - 我认为是你运行的任何平台，在我的情况下{ {1}}

测试3：使用：browser代替cordova run -- --live-reload，名为npm start（下面打印输出），并尝试更改HTML。

结果3：无更新。

测试4：与测试3相同，但尝试更改cordova run browser --live-reload并注意到已观察到更改，并且编译了新的JS。仍未对应用程序进行更新。

www/app/app.component.ts

有没有人能够获得浏览器的实时更新？这是开发的关键部分，等待几分钟才能完成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)的过程。

编辑我注意到一个非常延迟的更新。结果4给了我打印输出：

npm start

0 个答案:

没有答案
相关问题
最新问题