Good morning.
Could someone help me?
I have tried to make an app in NativeScript-Angular using mapbox following This video
In the [Mapbox docs] (https://market.nativescript.org/plugins/nativescript-mapbox/) say that I need this:
import { registerElement } from "nativescript-angular/element-registry";
registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView);
But when I run ns build android --force in the cmd It returns to me:
ERROR in ./app/home/home.component.ts
Module not found: Error: Can't resolve '@nativescript/angular/element-registry' in 'D:Documentos de CamiloAPP DESIGNNativeScriptentrenamientomaps1srcapphome'
I have tried downloading the element-registry.ts file and adding it to node modules but happen the same, for other way I added to the tsconfig.json like a file because it said me that I had to include that part o code.
"files": [
"node_modules/@nativescript/angular/element-registry"
]
But now I have that trouble:
Error: NGCC failed.
at NgccProcessor.process (D:maps1
ode_modules@ngtoolswebpacksrc
gcc_processor.js:129:19)
at compiler.hooks.environment.tap (D:maps1
ode_modules@ngtoolswebpacksrcangular_compiler_plugin.js:593:31)
at SyncHook.eval [as call] (eval at create (D:maps1
ode_modulesapablelibHookCodeFactory.js:19:10), :9:1)
at SyncHook.lazyCompileHook (D:maps1
ode_modulesapablelibHook.js:154:20)
at webpack (D:maps1
ode_moduleswebpacklibwebpack.js:55:30)
at processOptions (D:maps1
ode_moduleswebpack-cliincli.js:272:16)
at yargs.parse (D:maps1
ode_moduleswebpack-cliincli.js:364:3)
at Object.parse (D:maps1
ode_moduleswebpack-cli
ode_modulesyargsyargs.js:576:18)
at D:maps1
ode_moduleswebpack-cliincli.js:49:8
at Object. (D:maps1
ode_moduleswebpack-cliincli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (D:Documentos de CamiloAPP DESIGNNativeScriptentrenamientomaps1
ode_moduleswebpackinwebpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Executing webpack failed with exit code 1.
I saw in other posts that people who were asking they shared part of config files, so I'm going to do the same:
package.json
{
"name": "@nativescript/template-tab-navigation-ng",
"main": "main.js",
"displayName": "Tabs",
"templateType": "App template",
"version": "7.0.5",
"description": "NativeScript Application",
"author": "NativeScript Team <[email protected]>",
"license": "SEE LICENSE IN <your-license-filename>",
"publishConfig": {
"access": "public"
},
"keywords": [
"nstudio",
"nativescript",
"mobile",
"angular",
"{N}",
"tns",
"template",
"tab",
"navigation",
"category-general"
],
"repository": "<fill-your-repository-here>",
"homepage": "https://github.com/NativeScript/nativescript-app-templates",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"lint": "tslint "src/**/*.ts""
},
"dependencies": {
"@angular/animations": "~11.0.0",
"@angular/common": "~11.0.0",
"@angular/compiler": "~11.0.0",
"@angular/core": "~11.0.0",
"@angular/forms": "~11.0.0",
"@angular/platform-browser": "~11.0.0",
"@angular/platform-browser-dynamic": "~11.0.0",
"@angular/router": "~11.0.0",
"@nativescript/angular": "~11.0.0",
"@nativescript/core": "~7.0.0",
"@nativescript/theme": "~2.3.0",
"nativescript-geolocation": "^5.1.0",
"nativescript-mapbox": "^5.0.1",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"tns-core-modules": "^6.5.24",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~11.0.0",
"@nativescript/android": "7.0.1",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~11.0.0",
"codelyzer": "~6.0.0",
"node-sass": "^4.14.1",
"tslint": "~6.1.3",
"typescript": "~4.0.0"
},
"gitHead": "41a7254d3bc134fd3c258761f3c6e1c3d54e6d41",
"private": "true",
"readme": "NativeScript Application"
}
tsconfig.json
{
"compilerOptions": {
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"skipLibCheck": true,
"lib": [
"es2017",
"dom"
],
"baseUrl": ".",
"paths": {
"~/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"platforms"
],
"files": [
"node_modules/@nativescript/angular/element-registry"
]
}
I'm a beginner in NativeScript and in app design. I appreciate any help because I actually don't know what more to do and... Sorry for my english.
Thanks.
