Trying to migrate my app from 2 to 3 on android.
I downloaded all the new requirements. Tested environment on a newly template created project and works fine.
In my project, I updated the tsconfig.js file and fixed a few error messages.
These are what I'm left with mainly - errors like:
Property 'NSObject' does not exist on type 'Global'
All have to do with Global.
In code I have it like global.NSObject
but "global" seems to be defined in NS 3.0 - in tns-core-modules/modules.d.ts.
but there's no field for NSobject - ergo the error.
Am I supposed to use global.__native.NSObject???
Also, I've got a worker thread and seems like the signature changed.
Getting errors for onmessage and also the signature of postMessage() seems to have changed - no updates in docs.
global.onmessage = function(msg) {}
Help appreciated as always.
My package.json file
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "dev.myapp.test",
"tns-android": {
"version": "3.2.0"
}
},
"dependencies": {
"nativescript-dev-typescript": "^0.3.7",
"tns-core-modules": "^3.2.0"
},
"devDependencies": {
"babel-traverse": "6.19.0",
"babel-types": "6.19.0",
"babylon": "6.14.1",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.3.7",
"typescript": "~2.2.1"
}
}
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"lib": [
"es6",
"dom"
],
"baseUrl": ".",
"paths": {
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
},
"exclude": [
"node_modules",
"platforms",
"**/*.aot.ts"
]
}
Related
Building the .dmg works and running the .dmg installer works. When I open the installed app, the app's icon appears in the Mac tool bar for a second and then disappears. An error window then appears that says "App quit unexpectedly."
The app installs and functions perfectly on Windows machines with .exe that Electron-builder had built. I am confused as to how the .dmg is not functioning and working the same way. Is my package.json missing something or incorrect?
I have also attempted to build a .pkg, but the same error occurs.
How I build the file:
Run react-scripts build
Run electron-builder
My pacakge.json:
{
"name": "data-entry",
"packageName": "Data Entry App",
"version": "1.0.1",
"license": "MIT",
"description": "An app to quickly enter survey data.",
"private": true,
"author": "xxx",
"homepage": "./",
"main": "src/start.js",
"productName": "Data Entry App",
"nsis": {
"createDesktopShortcut": "always",
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true
},
"repository": {
"type": "git",
"url": "xxx"
},
"build": {
"files": [
"app/**/*",
"node_modules/**/*",
"package.json"
],
"appId": "com.myapp.DataEntry",
"publish": {
"provider": "github",
"repo": "xxx",
"owner": "xxx"
},
"npmRebuild": false,
"directories": {
"buildResources": "assets"
},
"mac": {
"target": "dmg"
},
"win": {
"target": "nsis"
}
},
"dependencies": {
"#material-ui/core": "^4.9.1",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.41",
"electron-is-dev": "^1.1.0",
"electron-json-storage": "^4.1.8",
"electron-log": "^4.0.6",
"electron-store": "^5.1.0",
"electron-updater": "^4.2.0",
"firebase": "^7.8.1",
"grpc": "^1.23.3",
"http2": "^3.3.7",
"node": "^10.9.0",
"node-pre-gyp": "^0.12.0",
"notistack": "^0.9.7",
"react": "^16.11.0",
"react-csv": "^1.1.2",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0",
"react-with-firebase-auth": "^1.3.0"
},
"scripts": {
"start": "react-scripts start",
"electron": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"react-build": "react-scripts build",
"dist-all": "electron-builder"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"electron": "^7.1.8",
"electron-builder": "^20.44.4"
}
}
I just recently migrated my app to NS 6 and I noticed that the environment specific files are not processed properly.
E.g. I have settings.debug.json and settings.release.json. In code, I reference them as import * as settings from '/settings.json' . In NS < 6, this used to work, but now I get an error that that settings.json does not exist.
I have very limited experience with Webpack. Is there a setting I need to configure there for this to work?
Here is my package.json
{
"name": "<app>",
"nativescript": {
"id": "<id>",
"tns-ios": {
"version": "6.0.1"
},
"tns-android": {
"version": "6.0.1"
}
},
"description": "",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"moment": "^2.24.0",
"nativescript-appversion": "^1.4.2",
"nativescript-geolocation": "5.1.0",
"nativescript-iqkeyboardmanager": "1.3.0",
"nativescript-loading-indicator": "2.4.0",
"nativescript-local-notifications": "3.1.0",
"nativescript-plugin-firebase": "9.0.2",
"nativescript-theme-core": "~1.0.4",
"tns-core-modules": "6.0.1"
},
"devDependencies": {
"nativescript-dev-webpack": "1.0.2",
"typescript": "3.4.5"
},
"readme": "",
"author": ""
}
Thank you.
You can conditionally load the files using the TNS_ENV variable.
const settings = TNS_ENV !== 'production' ? require('./settings.debug.json') : require('./settings.release.json')
I want to migrate an Angular app to a {N} code-sharing structure. I used this article to get started. Would you help me solve the below issue? It seems like a mis-configuration.
When I execute:
ng add #nativescript/schematics
I get the following error:
success Saved 1 new dependency.
info Direct dependencies
└─ #nativescript/schematics#0.5.0
info All dependencies
└─ #nativescript/schematics#0.5.0
✨ Done in 3.25s.
Installed packages for tooling via yarn.
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
Reading Project Settings
Project settings:
{
"root": "",
"sourceRoot": "src",
"mainName": "main",
"mainPath": "src/main.ts",
"tsConfig": "src/tsconfig.json",
"entryModuleClassName": "RootModule",
"entryModuleImportPath": "./root.module",
"entryModuleName": "Root",
"entryModulePath": "/src/root.module.ts",
"entryComponentClassName": "RootComponent",
"entryComponentImportPath": "./root.component",
"entryComponentName": "Root",
"entryComponentPath": "/src/root.component.ts",
"indexAppRootTag": "app-root"
}
Adding #nativescript/schematics to angular.json
Adding {N} files
Adding App_Resources
Adding NativeScript specific exclusions to .gitignore
Adding NativeScript run scripts to package.json
Adding NativeScript Project ID to package.json
Excluding NativeScript files from web tsconfig
Adding Sample Shared Component
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
Specified module does not exist
My #angular packages are 7.1.1
I use yarn as a package manager.
This is my angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-ns-project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.json",
"polyfills": "src/polyfills.ts",
"assets": [
// assets
],
"styles": [
// styles
],
"scripts": [
// scripts
]
},
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-ns-project:build"
},
"configurations": {
"hmr": {
"browserTarget": "my-ns-project:build:hmr"
},
"production": {
"browserTarget": "my-ns-project:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-ns-project:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"tsConfig": "src/tsconfig.json",
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"styles": [
// styles
],
"scripts": [
// scripts
],
"assets": [
// assets
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.json"
],
"exclude": []
}
}
}
},
"my-ns-project-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "my-ns-project:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "my-ns-project",
"cli": { "defaultCollection": "#nativescript/schematics" },
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
}
Any help is highly appreciated!
Need to follow the following steps
Create a new angular app using - ng new my-app
Navigate to my-app folder
Execute command - ng add #nativescript/schematics
Finally execute tns run android --bundle - this will generate an auto generated page in emulator.
I see some differences in the project settings.
i had upgrade my angular 2 project from angular2 =>
Angular 5.2
I m using visual studio 2015 and asp.net project.
After upgrade launch F5 is very slow 90 seconds under 30 second before update.
Is anyone have the same issue?
I have purge a lot off dependencies to have less noise.
so package.json is like this :
{
"name": "",
"version": "2.0.0",
"author": "",
"description": "",
"dependencies": {
"#angular/animations": "5.2.0",
"#angular/common": "5.2.0",
"#angular/compiler": "5.2.0",
"#angular/core": "5.2.0",
"#angular/forms": "5.2.0",
"#angular/http": "5.2.0",
"#angular/platform-browser": "5.2.0",
"#angular/platform-browser-dynamic": "5.2.0",
"#angular/router": "5.2.0",
"#types/node": "^10.12.12",
"bootstrap": "3.3.7",
"core-js": "2.4.1",
"ngx-toastr": "6.5.0",
"reflect-metadata": "0.1.12",
"rxjs": "5.5.2",
"systemjs": "0.19.47",
"zone.js": "0.8.26"
},
"devDependencies": {
"typescript": "2.6.2"
}
}
main.ts like this
// main entry point
//import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
//enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Systemjs.config like this
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/animations': 'npm:#angular/animations/bundles/animations.umd.min.js',
'#angular/animations/browser': 'npm:#angular/animations/bundles/animations-browser.umd.min.js',
'#angular/core': 'npm:#angular/core/bundles/core.umd.min.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.min.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.min.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.min.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.min.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.min.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.min.js',
'#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.min.js',
// other libraries
'rxjs': 'npm:rxjs',
'ngx-toastr': 'node_modules/ngx-toastr/toastr.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"skipDefaultLibCheck": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/#types"
],
"lib": [ "es5", "es6", "dom" ]
//"outFile": "dist/app.js"
},
"exclude": ["node_modules/#angular/platform-server/src/transfer_state.d.ts", "bin", "node_modules" ]
}
Thanks for your help
F
I upgrade my ide to vs 2017 and all become like before.
Thanks.
I close the subject
Hi i have built an app using angular-cli and I am trying to debug it using vs code and Debugger for chrome extension. After a while I was able to make it work, well kind of. What happens is that i can set a break-point in my typescript class but it gets placed on a wrong line number like source map is incorrect.
Debug process - open terminal ng serve than go to debug tab and click F5 in vscode
I have the following:
I use LaunchChrome configuration
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
},
{
"name": "AttachChrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "./dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../semantic/dist/packaged/semantic.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../semantic/dist/packaged/semantic.js",
"../node_modules/chart.js/dist/Chart.bundle.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/#types"
]
}
}
I have updated to angular-cli-beta19-3 and typescript 2.0.6 and cleared cache in chrome now it works.
UPDATE: using angular 2.4.1 now
Whats funny is that it doesnt work with
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*"
}
defined here https://github.com/Microsoft/vscode-chrome-debug
but it works with
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
and for linux as #carpinchosaurio said
"webpack:///*": "/*"
UPDATE 2/21/2017:
With new versions of angular and typescript there is no need for source map path overrides anymore.
"#angular/compiler-cli": "2.4.8",
"#angular/cli": "1.0.0-beta.32.3",
"typescript": "2.1.6"
angular version 2.4.8
Working setup:
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
}
]
}
for anyone still interested this worked for me -
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceRoot}/node_modules/*",
"webpack:///./src/*": "${workspaceRoot}/src/*"
}
// Uncomment this to get diagnostic logs in the console
// "diagnosticLogging": true
}
Just to emphasize more the updated answer: Currently it's not needed to have the sourceMapPathOverrides property in your launch.json. In case you are updating project from an old Angular, just remove the property and debugging will start working.