问题标签 [nativescript-codesharing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
699 浏览

configuration - NativeScript、代码共享和不同的环境

注意:这不是这个这个其他问题的欺骗。继续阅读:这个问题特定于代码共享模板。


我正在使用 NativeScript、Angular 和代码共享模板(参见:@nativescript/schematics)做一些非常基本的实验。

现在我正在对框架如何支持不同的“构建配置”进行一些探索/ poc 工作。需要明确的是,我正在寻找一种简单的(希望是官方的)方法,让应用程序根据当前平台(web/ios/android)和环境使用不同版本的特定文件(我们称之为 configuration.ts) (开发/生产/分期?)。

做第一部分显然是微不足道的——毕竟这是代码共享原理图的主要目的。因此,同一文件的不同版本由不同的扩展名标识。这个页面解释得很简单

我不太容易得到的是框架/模板是否支持任何类似的基于约定的规则,这些规则可用于在文件的调试/发布(甚至更好的开发/暂存/生产)版本之间切换。例如,考虑一个config.ts包含基于环境的不同参数的文件。

我已经对该主题进行了一些研究,但我无法找到一个确凿的答案:

  • appbuilder 平台的旧文档和现已退役的文档提到了文件的(.debug..release.)命名约定。我不认为这项工作了。
  • 其他来源提到在调用tns build/期间传递参数tns run,然后通过 webpack env 变量获取它们...参见此处。这可能有效,但似乎奇怪地令人费解
  • 提到的第三个选项是使用钩子来自定义构建(或使用应该做同样事情的插件
  • 最后,出于某种奇怪的原因,@nativescript/schematics 似乎生成了一个默认项目,其中包含两个名为environment.tsand的文件environment.prod.ts。我怀疑那些只适用于项目的网络版本(阅读ng serve:) - 我无法让移动编译器识别以 debug.ts、prod.ts 或 release.ts 结尾的文件

虽然我试图做的事情可能不仅仅得到支持(还没有?),但普遍的困惑和对此事的不同意见让我觉得我可能在某个地方遗漏了一些东西。

如果它以某种方式得到支持,我还想知道它如何与NativeScript Sidekick 应用程序集成,该应用程序通常被建议作为一种工具来简化 NativeScript 应用程序的构建/运行过程(无法为 tns 命令指定其他参数Sidekick 自动化,唯一可用的选项是在调试/发布模式之间切换),但这可能最好留给另一个问题。

0 投票
2 回答
2327 浏览

angular - NativeScript + Angular: Code Sharing Project

I followed the Nativescript steps for creating a new code sharing project here and I would like to use sass. I tried both for ones that have the NatievScript theme as well as the one that does not:

or

For this Post I chose No Theme. When it finishes creating a new project the folder is as shown:

enter image description here

Inside Desktop/TestProjects/sass-no-theme-project I install the node modules:

When running ng serve --o the application builds and loads up as expected in the browser. For NativeScript mobile however for Android (have not tested iOS yet) the application crashes with an error. I have tried both tns run android as well as using the NativeScript SideKick to build however they end up with the same results. I have also tried local and cloud builds.

Device Used:

Physical Samsung A5: Not emulator

Error On Mobile Device In Logs:

Logs In Command Line and NativeScript Client

With Nativescript and Angular creating a blank new project for me I would assume it is suppose to be a HelloWorld project that works in Web, iOS, and Android right out of the gate.

UPDATE

I tried following the troubleshoot guide here such as reinstalling JDK 8 and that however the problem persists. I got it to run once, it failed and after about 4-10 minutes it rebuilt and was working. Since then I can not get it to work a second time. This leads to me believe there maybe a configuration issues somewhere such as the tsconfig json files. Taken a look in them and they seem to be fine.

0 投票
0 回答
122 浏览

ionic-framework - 我们可以在 NativeScript Web 实现中使用 ionic 4 Web 组件吗?

Ionic 4 使用 web 组件。我们可以在 Nativescript Web 实现中使用那些 ionic4 Web 组件吗???我知道我必须为 android 和 ios 使用本机脚本组件。但是这里要求在我想使用 ionic 4 Web 组件的地方进行 Web 代码共享。这可能吗?

0 投票
0 回答
431 浏览

typescript - Nativescript 代码共享项目中忽略 tsconfig 文件?

我有一个 Nativescript 代码共享项目。typescript 无法解析具有 tns.ts 扩展名的文件中的模块。我收到以下消息。我认为这是因为 tsconfig.json 中排除了所有 tns.ts、android.ts 和 ios.ts 文件。

找不到模块

这来自https://github.com/NativeScript/web-mobile-project项目。我添加了第 5 行来显示错误。第 13 行也有一个错误。它说应该启用实验装饰器。它在两个配置文件中都启用了,但我仍然收到此错误,因为 tsconfig.tns.json 和 tsconfig.json 文件被忽略。

仅当文件扩展名为 tns.ts 时才会发生这种情况。找到没有 tns.ts 扩展名的文件中的所有模块,并且Atom 编辑器不显示错误。

我怎么解决这个问题?

这是我的 tsconfig.json 文件:

这是 tsconfig.tns.json:

0 投票
0 回答
421 浏览

nativescript - Nativescript-Angular 代码共享:如何创建特定于平台的模块?

想象一下,我有代表两个屏幕的 OrderComponent 和 CustomerComponent。

在网页版中,您可以在订单屏幕中通过在弹出窗口中启动客户组件来创建新客户。所以 OrderComponent 直接在模板中引用 CustomerComponent。因此,我必须将两者保存在同一个 FeaturesModule中才能正常工作。

另一方面,在 Nativescript 移动版中,没有这样的功能,因此两个组件/屏幕是完全独立的,所以我想将它们放在 2 个单独的模块中:OrderModuleCustomerModule。并延迟加载它们,以便应用程序更快地启动。

当然,在我的实际应用中,它不仅仅是两个组件,而是几十个,因此移动应用程序的性能是一个更紧迫的问题。

当我尝试添加具有 tns 扩展名的模块文件时:order.module.tns.ts,没有相应的 web 文件,似乎 NativeScript 捆绑程序没有拾取它,我收到以下错误:

但是根据文档,要制作一个 nativescript 特定组件,我所要做的就是将它与 tns 扩展名一起添加。是否有另一个步骤可以使模块文件工作?帮助表示赞赏

更新 这是我的 tsconfig.tns.json

更新 2 我的 webpack.config.js:

0 投票
1 回答
67 浏览

android - Angular + Nativescript 代码共享项目调试

我正在寻找一种在调试模式下运行应用程序的方法。nativescript 客户端文档说要使用--emulator'tns debug android作为tns debug android模拟器,但是我不能让它工作。该应用程序是一个带有 sass 的 Nativescript + Angular 代码共享项目。以下命令将创建一个全新的代码共享项目:

如果需要阅读更多关于代码共享项目创建的信息,你可以去这里

我尝试了一个常规的 nativescript 应用程序,该命令似乎可以工作,所以我不确定您是否需要采用稍微不同的方式来调试代码共享项目。

以下是我在物理和模拟设备上得到的以下错误日志:

在此处输入图像描述

0 投票
1 回答
249 浏览

angular - 如何将现有的 NativeScript Angular 项目转换为代码共享项目

所有可用的教程都讨论了将 Angular Web 应用程序转换为代码共享 Nativescript 项目。我想做相反的事情。

我几乎完成了使用 Nativescript 编写移动应用程序的代码,现在我想通过两者之间的代码共享来制作 Web 应用程序。

0 投票
2 回答
954 浏览

angular - Angular + Nativescript 代码共享项目移除操作栏

我的项目正在使用 Angular + Nativescript 代码共享项目来构建 Web 以及 Android 和 IOS 的移动设备。

问题是试图删除整个应用程序的操作栏。我已经阅读了一些关于这个问题的帖子,但是似乎没有一个解决方案有效,或者至少最终不是一个很好的解决方案。

我试图添加,<Page actionBarHidden="true"></page>但是这在包含路由的其他组件中或在其他组件中根本不起作用,app.component例如home.component带有路由的 a home。如:

我还尝试了一种专门针对 android 的方法,看看我是否可以通过AndroidManifest.xml文件修复这个问题,就像我通过更新 android 清单以移除操作栏来制作原生 Android 应用程序一样。对于健全性测试,我还尝试通过styles.xml以下方式使用它:

在这些失败的尝试之后,我尝试了其他人推荐的以下代码,Page例如:

这种方法的问题在于,为了使该解决方案能够正常工作,我需要tns为每个具有路由的组件创建一个文件,以便调用它以完全删除应用栏,因为每个页面似乎都处理自己的应用栏。现在这不是真正可大规模维护的,它迫使我tns为所有具有路由的组件创建一个文件。

最后,我看到了一个示例,其中我们有一个具有此逻辑的服务,this.page.actionBarHidden并且rootFrame.actionBarVisibility = 'never'您可以在文件中调用它component.ts而无需创建component.tns.ts文件但是问题是现在您需要创建一个具有要调用的空函数,tns为实际逻辑创建该服务的文件,并且必须在每个具有路由的组件中调用它。

正如您所看到的,有些解决方案根本不起作用,而其他解决方案则需要大量额外的代码和可维护性,尤其是随着应用程序的增长,它们并不是非常理想的解决方案。

我将继续研究这个问题,并且我相信必须有一个干净的解决方案。

0 投票
1 回答
171 浏览

android - NativeScript 和 Angular 代码共享 + 延迟加载的模块路径

我有一个使用代码共享的 NativeScript/Angular 应用程序。

为了使我的项目更有条理,我创建了一个核心文件夹,其中包含一个用于路由的子文件夹:

在此处输入图像描述

路线定义在app.common.ts

特别感兴趣的是以下属性中显示的模块路径:

在浏览器中使用它ng serve -o可以正常工作。

捆绑它以在 Android 上运行tns run android --bundle是行不通的,因为它找不到模块。

如果我将路径更改为~/app/products/products.module#ProductsModule,Android 应用程序就会运行,但 Web 应用程序找不到该模块。

如果我让文件观察程序为 Android 构建运行并将路径更改回../products/products.module#ProductsModule,那么 Android 和 Web 都可以正常工作。

我不想将我的路由文件移回该src文件夹。我也不愿意包含任何技巧,例如平台驱动的路径字符串修改。

如果您对为什么会发生这种情况有任何解释和/或没有“hacky”的强大修复,我很想听听。

0 投票
1 回答
104 浏览

angular2-nativescript - 如何解决以下本机脚本代码共享应用程序创建错误?

我是 nativescript 的初学者,我在使用 CLI 创建 nativescript 角度代码共享新应用程序时遇到错误

我正在尝试 ng new -c=@nativescript/schematics ns-oys --shared --style=scss 命令来创建新应用程序。

gyp动词检查python检查PATH中的Python可执行文件“python2” gyp动词which失败错误:未找到:python2 gyp动词which在getNotFoundError失败(F:\ Work\ns\ns-oys\node_modules\which\which.js:13: 12) gyp 动词which在 F (F:\Work\ns\ns-oys\node_modules\which\which.js:68:19) gyp 动词which在 E (F:\Work\ns\ns-oys\node_modules\ 失败) 失败which\which.js:80:29) gyp 动词which在 F:\Work\ns\ns-oys\node_modules\which\which.js:89:16 gyp 动词在 F:\Work\ns\ns-oyswhich失败\node_modules\isexe\index.js:42:5 gyp 动词which在 F:\Work\ns\ns-oys\node_modules\isexe\windows.js:36:5 gyp 动词which在 FSReqCallback.oncomplete 失败(fs.js: 149:21) gyp 动词which失败 python2 错误:未找到:python2 gyp 动词whichgetNotFoundError 失败 (F:\Work\ns\ns-oys\node_modules\which\which.js:13:12) gyp 动词which在 F (F:\Work\ns\ns-oys\node_modules\which\which. js:68:19) gyp 动词which在 E (F:\Work\ns\ns-oys\node_modules\which\which.js:80:29) gyp 动词which在 F:\Work\ns\ns-oys\ 失败node_modules\which\which.js:89:16 gyp 动词which在 F:\Work\ns\ns-oys\node_modules\isexe\index.js:42:5 gyp 动词which在 F:\Work\ns\ns- 失败oys\node_modules\isexe\windows.js:36:5 gyp verbwhich在 FSReqCallback.oncomplete (fs.js:149:21) { gyp verb whichfailed stack: 'Error: not found: python2\n at getNotFoundError' + gyp verbwhich失败 '(F:\Work\ns\ns-oys\node_modules\which\which.js:13:12)\n 在 F ' + gyp 动词which失败 '(F:\Work\ns\ns-oys\node_modules\which\which.js:68:19)\n 在 E ' + gyp 动词which失败 '(F:\Work\ns\ns-oys\node_modules\ which\which.js:80:29)\n at ' + gyp 动词which失败 'F:\Work\ns\ns-oys\node_modules\which\which.js:89:16\n at ' + gyp 动词which失败' F:\Work\ns\ns-oys\node_modules\isexe\index.js:42:5\n at ' + gyp 动词which失败'F:\Work\ns\ns-oys\node_modules\isexe\windows.js: 36:5\n at ' + gyp verb whichfailed 'FSReqCallback.oncomplete (fs.js:149:21)', gyp verb whichfailed code: 'ENOENT' gyp verb whichfailed } gyp verb check python 检查 Python 可执行文件“python” PATH gyp动词which失败错误:未找到:python gyp动词whichgetNotFoundError 失败 (F:\Work\ns\ns-oys\node_modules\which\which.js:13:12) gyp 动词which在 F (F:\Work\ns\ns-oys\node_modules\which\which. js:68:19) gyp 动词which在 E (F:\Work\ns\ns-oys\node_modules\which\which.js:80:29) gyp 动词which在 F:\Work\ns\ns-oys\ 失败node_modules\which\which.js:89:16 gyp 动词which在 F:\Work\ns\ns-oys\node_modules\isexe\index.js:42:5 gyp 动词which在 F:\Work\ns\ns- 失败oys\node_modules\isexe\windows.js:36:5 gyp 动词which在 FSReqCallback.oncomplete (fs.js:149:21) gyp 动词which失败 python 错误:未找到:python gyp 动词which在 getNotFoundError (F:\Work\ ns\ns-oys\node_modules\which\which.js:13:12) gyp动词which在 F (F:\Work\ns\ns-oys\node_modules\which\which.js:68:19)which失败,gyp 动词在 E (F:\Work\ns\ns-oys\node_modules\which\which. js:80:29) gyp 动词which在 F:\Work\ns\ns-oys\node_modules\which\which.js:89:16 gyp 动词which在 F:\Work\ns\ns-oys\node_modules\isexe 失败\index.js:42:5 gyp 动词which在 F:\Work\ns\ns-oys\node_modules\isexe\windows.js:36:5 gyp 动词which在 FSReqCallback.oncomplete 失败 (fs.js:149:21) { gyp 动词which失败堆栈:'错误:未找到:python\n at getNotFoundError' + gyp 动词which失败'(F:\Work\ns\ns-oys\node_modules\which\which.js:13:12)\n at F ' + gyp 动词which失败 '(F:\Work\ns\ns-oys\node_modules\which\which.js:68:19)\n at E ' + gyp 动词which失败 '(F:\Work\ns\ns-oys\node_modules\which\which.js:80:29)\n at ' + gyp 动词which失败 'F:\Work\ns\ns-oys\node_modules\which\ which.js:89:16\n at ' + gyp 动词which失败 'F:\Work\ns\ns-oys\node_modules\isexe\index.js:42:5\n at ' + gyp 动词which失败 'F:\工作\ns\ns-oys\node_modules\isexe\windows.js:36:5\n 在'+ gyp 动词which失败'FSReqCallback.oncomplete (fs.js:149:21)',gyp 动词which失败代码:'ENOENT'吉普语动词which失败 } gyp 动词找不到“python”。检查 python 启动器 gyp 动词找不到“python”。猜测位置 gyp 动词确保文件存在:C:\Python27\python.exe gyp ERR!配置错误gyp ERR!堆栈错误:找不到 Python 可执行文件“python”,您可以设置 PYTHON 环境变量。吉普错误!堆栈在 PythonFinder.failNoPython (F:\Work\ns\ns-oys\node_modules\node-gyp\lib\configure.js:484:19) gyp ERR!PythonFinder 的堆栈。(F:\Work\ns\ns-oys\node_modules\node-gyp\lib\configure.js:509:16) gyp 错误!堆栈在 F:\Work\ns\ns-oys\node_modules\graceful-fs\polyfills.js:282:31 gyp 错误!堆栈在 FSReqCallback.oncomplete (fs.js:149:21) gyp ERR!系统 Windows_NT 10.0.17134 gyp 错误!命令 "E:\anup\programFile\node\node.exe" "F:\Work\ns\ns-oys\node_modules\node-gyp\bin\node-gyp. 您必须自己安装对等依赖项。npm WARN codelyzer@4.2.1 需要 @angular/platform-b​​rowser@>=2.3.1 <7.0.0 || 的对等点 >6.0.0-beta <7.0.0 但没有安装。您必须自己安装对等依赖项。npm WARN codelyzer@4.2.1 需要 @angular/common@>=2.3.1 <7.0.0 || 的对等点 >6.0.0-beta <7.0.0 但没有安装。您必须自己安装对等依赖项。npm WARN ajv-keywords@3.4.0 需要一个对等的 ajv@^6.9.1 但没有安装。您必须自己安装对等依赖项。npm WARN 可选跳过可选依赖:fsevents@1.2.9 (node_modules\fsevents):npm WARN notsup 跳过可选依赖:fsevents@1.2.9 不支持的平台:想要 {"os":"darwin","arch":"any "} (当前: {"os":"win32","arch":"

npm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!node-sass@4.10.0 安装后:node scripts/build.js npm 错误!退出状态 1 npm ERR!npm 错误!在 node-sass@4.10.0 安装后脚本失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误!可以在以下位置找到此运行的完整日志: