NativeScript + Angular：代码共享项目
NativeScript + Angular: Code Sharing Project
我按照 Nativescript 的步骤创建了一个新的代码共享项目 here，我想使用 sass。我尝试了有 NatievScript 主题的和没有 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
为此Post我选择了无主题。完成创建新项目后，文件夹如下所示：
在Desktop/TestProjects/sass-no-theme-project里面我安装了节点模块：
npm install
当 运行ning ng serve --o 时，应用程序会按预期在浏览器中构建和加载。然而，对于 NativeScript 移动版 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 文件。看了一下，好像还不错。
对于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
安装最新版本的 NPM
npm i -g @angular/cli
npm i -g @nativescript/schematics
进入文件夹并替换 package.json，确保将名称和 ID 更改为您的项目名称
npm 安装
tns 运行 android --bundle
当您构建代码共享项目时，您应该使用 --bundle 标志。
所以你的命令应该是：
tns run android --bundle 或 tns run ios --bundle
如果您总是忘记 --bundle 标志，那么您可以使用 package.json 和 运行 中提供的脚本：
npm run android 或 npm run ios
此外，如果您的项目使用 TypeScript 2.7，那么您可能需要将其更新到 2.8
附带说明：在代码共享项目中您不需要 moduleId，因为 webpack 会为您处理这件事。
我按照 Nativescript 的步骤创建了一个新的代码共享项目 here，我想使用 sass。我尝试了有 NatievScript 主题的和没有 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
为此Post我选择了无主题。完成创建新项目后，文件夹如下所示：
在Desktop/TestProjects/sass-no-theme-project里面我安装了节点模块：
npm install
当 运行ning ng serve --o 时，应用程序会按预期在浏览器中构建和加载。然而，对于 NativeScript 移动版 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 文件。看了一下，好像还不错。
对于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
安装最新版本的 NPM
npm i -g @angular/cli
npm i -g @nativescript/schematics
进入文件夹并替换 package.json，确保将名称和 ID 更改为您的项目名称
npm 安装
tns 运行 android --bundle
当您构建代码共享项目时，您应该使用 --bundle 标志。
所以你的命令应该是：
tns run android --bundle 或 tns run ios --bundle
如果您总是忘记 --bundle 标志，那么您可以使用 package.json 和 运行 中提供的脚本：
npm run android 或 npm run ios
此外，如果您的项目使用 TypeScript 2.7，那么您可能需要将其更新到 2.8
附带说明：在代码共享项目中您不需要 moduleId，因为 webpack 会为您处理这件事。