NativeScript + Angular:代码共享项目

时间:2018-11-07 19:44:10

标签: angular typescript nativescript nativescript-codesharing nativescript-schematics

我按照Nativescript步骤创建了一个新的代码共享项目here,我想使用sass。我既尝试了具有NatievScript主题的主题,也尝试了不具有主题的主题:

ng new -c=@nativescript/schematics no-theme-project --shared --no-theme

ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme

对于此帖子,我选择了 无主题 。完成创建新项目后,文件夹如下所示:

enter image description here

Desktop/TestProjects/sass-no-theme-project内部安装节点模块:

npm install

运行ng serve --o时,应用程序将按预期在浏览器中构建和加载。对于NativeScript mobile,但是对于Android(尚未测试iOS),应用程序崩溃并显示错误。我已经尝试了tns run android以及使用NativeScript SideKick进行构建,但是最终得到了相同的结果。我也尝试过本地和云构建。

使用的设备:

物理三星A5:不是模拟器

日志中移动设备上的错误:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6065)
    at android.app.ActivityThread.-wrap1(Unknown Source:0)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1764)
    at android.os.Handler.dispatchMessage(Handler.java:105)
    at android.os.Looper.loop(Looper.java:164)
    at android.app.ActivityThread.main(ActivityThread.java:6944)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
    at com.tns.Module.bootstrapApp(Module.java:311)
    at com.tns.Runtime.run(Runtime.java:544)
    at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
    at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1125)
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6062)
    ... 8 more
Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
    at com.tns.Module.resolvePathHelper(Module.java:146)
    at com.tns.Module.bootstrapApp(Module.java:309)
    ... 12 more

登录命令行和NativeScript客户端

[18-11-10 17:43:53.724] (CLI) [./main.ns.ts] 1.22 KiB {bundle} [built]
[18-11-10 17:43:53.724] (CLI) [./package.json] 123 bytes {bundle} [optional] [built]
[18-11-10 17:43:53.724] (CLI)     + 403 hidden modules
[18-11-10 17:43:53.724] (CLI) ERROR in Patterns must be a string or an array of strings
[18-11-10 17:43:53.724] (CLI)  Webpack compilation complete.
[18-11-10 17:43:53.724] (CLI)  Executing webpack failed with exit code 2.
[18-11-10 17:43:53.724] (CLI)  # tns build android
[18-11-10 17:43:53.724] (CLI) ### Description
[18-11-10 17:43:53.724] (CLI) clean-webpack-plugin: /mnt/storage/builds/_/1bfec9e7b462a1843535f909d892c70d2010e1cf/5.0.0/5.0.0/no-sass-project/platforms/android/app/src/main/assets/app/**/* has been removed.
[18-11-10 17:43:53.724] (CLI) Executing webpack failed with exit code 2.
[18-11-10 17:43:53.724] (CLI) bc_GgX4lpDXQFHYT4ydmJ
[18-11-10 17:43:56.917] (CLI) Unable to apply changes on device: 5210ffc964ca44f3. Error is: Build failed..
[18-11-10 17:43:56.920] Error detected during LiveSync on 5210ffc964ca44f3 for C:\Users\userName\Desktop\no-sass-project. Error: Build failed.
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-sass.js
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-typescript.js
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-webpack.js
[18-11-10 17:43:56.925] (CLI) Stopping webpack watch

通过Nativescript和Angular为我创建一个空白的新项目,我认为这应该是一个可以立即在Web,iOS和Android上运行的HelloWorld项目。

更新

我尝试遵循故障排除指南here,例如重新安装JDK 8,但是问题仍然存在。我让它运行一次,它失败了,大约4-10分钟后,它重建并开始工作。从那时起,我无法再次使用它。这使我相信,某些地方可能存在配置问题,例如tsconfig json文件。看看它们,看起来还不错。

2 个答案:

答案 0 :(得分:0)

对于Nativescript团队来说,似乎困难重重,因为它依赖的软件包会不断变化。这是我使用的package.json设置,感谢nativescript团队的@ NickIliev,@ skopekreep和良好的旧调试功能。如果使用此设置,则应该没问题。

请谨慎,以后再更新软件包,并在提交package.json之前进行测试。

与主要软件包一样,我建议您谨慎更新并确保进行测试:

typescript   @types/jasmine   nativescript-dev-webpack   tns-core-modules

{
  "name": "myproject",
  "nativescript": {
  "id": "org.nativescript.myproject",
    "tns-android": {
    "version": "5.0.0"
   }
},
"version": "0.0.0",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "android": "tns run android --bundle",
  "ios": "tns run ios --bundle"
},
"private": true,
"dependencies": {
  "@angular/animations": "~6.1.0",
  "@angular/common": "~6.1.0",
  "@angular/compiler": "~6.1.0",
  "@angular/core": "~6.1.0",
  "@angular/forms": "~6.1.0",
  "@angular/http": "~6.1.0",
  "@angular/platform-browser": "~6.1.0",
  "@angular/platform-browser-dynamic": "~6.1.0",
  "@angular/router": "~6.1.0",
  "core-js": "^2.5.4",
  "nativescript-angular": "~6.1.0",
  "nativescript-theme-core": "~1.0.4",
  "reflect-metadata": "~0.1.8",
  "rxjs": "^6.0.0",
  "tns-core-modules": "~5.0.2",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^0.8.0",
  "@angular/cli": "^6.2.0",
  "@angular/compiler-cli": "^7.0.3",
  "@nativescript/schematics": "~0.4.0",
  "@types/jasmine": "2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.0",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "nativescript-dev-sass": "~1.6.0",
  "nativescript-dev-typescript": "~0.7.0",
  "nativescript-dev-webpack": "^0.17.0",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1",
  "typescript": "^3.1.6"
}

}

步骤: 1.安装最新版本的Node JS

  1. 安装最新版本的NPM

  2. npm i -g @ angular / cli

  3. npm i -g @ nativescript / schematics

  4. 进入文件夹并替换package.json,确保将名称和ID更改为您的项目名称

  5. npm install

  6. tns运行android --bundle

答案 1 :(得分:0)

构建代码共享项目时,应使用--bundle标志。 所以您的命令应该是:

tns run android --bundletns run ios --bundle

如果您忘记了--bundle标志,则可以使用 package.json 中提供的脚本并运行: npm run androidnpm run ios

此外,如果您的项目使用TypeScript 2.7,则可能需要将其更新为2.8

请注意:代码共享项目中不需要moduleId,因为webpack会为您解决这个问题。