Where is the right place to configure the APP name? - ionic-framework

Each Ionic project has a project configuration file ionic.config.json where you can configure the human-readable name of the app:
{
// The human-readable name of the app.
"name": "My App",
// The project type of the app. The CLI uses this value to determine which
// commands and command options are available, what to output for help
// documentation, and what to use for web asset builds and the dev server.
"type": "angular",
// The App ID for Ionic Appflow.
"id": "abc123",
// Configuration object for integrations such as Cordova and Capacitor.
"integrations": {
"cordova": {
...
}
},
// Hook configuration--see the Hooks section below for details.
"hooks": {
...
}
}
Using capacitor gives us another opportunity to place an app name:
{
// The package name for Android and the bundle identifier for iOS.
"appId": "com.company.appname",
// Your app's name.
"appName": "Capacitor Kitchen Sink",
// Sets the directory of your built web assets. This is the directory that will be
// used to run your app in a native environment.
"webDir": "www",
// The JavaScript package manager to use, either npm or yarn.
"npmClient": "npm",
...
}
Where is the right place for the app name?
Thanks in advance

Capacitor works with any framework, not just with Ionic, so the app name should be in the capacitor.config.json.
But as you said, Capacitor embraces the idea of "Code once, configure everywhere", so that appName is used only when you add the ios or android platforms, once you have added them you have to change the name from Xcode for iOS apps or from Android Studio for Android apps.

Use Cordova's config.xml. There you have the tag <name>MyAppName</name> for this purpose. This is the name that will finally appear under the icon.
<widget id="com.mycompany.myapppackage" version="0.0.1" versionCode="1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My App's name</name>
<description>A nice description of my app.</description>
<author email="mymail#myserver.com" href="https://www.myserver.com">Author's name</author>
...
</widget>
More info: https://cordova.apache.org/docs/en/latest/config_ref/

Related

How do I change the appname of a Vue PWA app?

I'm using vue-cli version 3.11.0 to build my web app along with the pwa plugin. I'd like to change the appname (the one that shows up when adding to homescreen). How do I do so? I don't see any manifest.json file anywhere in the project.
If you using #vue/cli-plugin-pwa, check this.
// vue.config.js in your project (IF NOT EXIST, create new one)
module.exports = {
// ...other vue-cli plugin options...
pwa: {
name: 'My App', // <---- this is PWA name
}
}

Is there a clean way to get android build specific information in flutter code?

I'm in the process of migrating my App built on Android using Java to using Flutter + Dart.
Like my current app, I am adding 2 build types - release and debug in the build.gradle file. I am specifying different Server API URLs to be used in these build Types.
Sample buildType information -
buildTypes {
release {
manifestPlaceholders = [hostName: "PROD SERVER", "version": "v1"]
}
debug {
manifestPlaceholders = [hostName: "STAGE SERVER", "version": "v1"]
}
}
In native android, I was able to use android.content.pm.ApplicationInfo and android.os.Bundle to get the information in the code to dynamically use the base URLs.
Sample code from my native app is as follows :
ApplicationInfo app = this.getPackageManager()
.getApplicationInfo(this.getPackageName(), PackageManager.GET_META_DATA);
Bundle bundle = app.metaData;
API_HOST = bundle.getString("api.host");
API_VERSION = bundle.getString("api.version");
Is there a flutter + dart alternative to this?
I have been reading up and the way out seems to be by creating multiple Main files and then building the production/dev app by using the appropriate file.

making sure the polymer build process doesn't mess with a dependency of my element

I have built a custom element/web component to load and display Unity generated WebGL content. The web component imports the UnityLoader.js module - and works fine when used within an app served with 'polymer serve'.
However, when I build an app that uses my web component via the Polymer-CLI build process, no errors are given, but when I access a page using my component I always end up with an error from within UnityLoader.js:
"ReferenceError: BabelHelpers is not defined"
If I create the element directly within my app (in other words it is no longer managed by bower) then I can exclude the minification and compilation steps within the build section of my application's polymer.json file and the built version of the app works fine.
"builds": [
{
"preset": "es5-bundled",
"js": {
"compile": {"exclude": ["content/**/*","UnityLoader.js"]},
"minify": {"exclude": ["content/**/*","UnityLoader.js"]}
},
"html": {
"minify": {"exclude": ["content/**/*"]}
}
}
]
I've looked at my application's polymer.json file and I can see that the extraDependecies node contains some dependencies that other web components have placed there:
"extraDependencies": [
"bower_components/webcomponentsjs/*.js",
"!bower_components/webcomponentsjs/gulpfile.js",
"manifest.json",
"bower_components/plastic-image/intersection-observer.js",
"bower_components/ua-parser-js/dist/ua-parser.min.js"
],
I have UnityLoader.js within the extraDependencies of the element's polymer.json but that isn't getting cascaded up to an application that imports/consumes the element - which I guess must be possible as plastic-image and ua-parser-js have done it (I've looked at their bower_components folders and nothing seems obvious - other than the latter is installed as a dependency of the former).
Any ideas on how I can make sure that the UnityLoader.js that my web component uses is not compiled or minified during the build process of an application that consumes it?
I was having a similar issue with firebase-auth.js when making an ES5 build using polymer-cli 1.7.0. There might be a problem when compiling/minifying specific files. I had to roll back to 1.6.0 using npm install -g polymer-cli#1.6.0 to fix the problem.

Ionic native device plugin #ionic-native/device returns all nulls

I need to do a device detection in my Ionic project so I've installed #ionic-native/device plugin per instructions here: https://ionicframework.com/docs/native/device/
However when I wire it in inside of a component, then run ionic serve to preview changes, console.log returns Device object with all values set to null, same happens when I try to use individual property e.g. this.device.model:
Here is how I use it inside of a component:
import {Device} from "#ionic-native/device";
// ...
#Component({
// ...
})
export class MyComponent {
constructor(private device: Device) {
}
ngOnInit() {
console.log(this.device);
}
}
And I've added it to AppModule as well:
import {Device} from "#ionic-native/device";
// ...
#NgModule({
// ...
providers: [
Device
]
})
export class AppModule() {
}
Cordova device plugin was auto injected into config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget <!-- ... --> >
<!-- ... -->
<plugin name="cordova-plugin-device" spec="2.0.0" />
</widget>
Here is my Ionic stack (at least packages that should be relevant to the issue):
"#angular/*": "^5.2.4", // all packages
"#ionic-native/*": "4.5.2", // all packages
"#ionic-native/device": "4.5.2"
"ionic-angular": "3.9.2",
"cordova-plugin-device": "2.0.0",
"typescript": "2.6.2"
Thanks!
UPDATE:
I was able to get device details in the browser by running:
cordova run browser
This assumes you have added browser as a platform, if not run:
ionic cordova platform add browser
(From the link in the answer posted by #AndrewLively: https://stackoverflow.com/a/49034015/448816)
If you are running in the browser using ionic serve then most of the ionic-native plugins won't work since it is not treated by ionic as a valid browser platform.
This is not well documented, but is discussed in an issue in the ionic-native repo.
Should see the packages installed and see they are in the same version in "package.json"
Core and Native packages must be in the same version or the native package should not be larger.
The folder "platforms" must be delete
Use these commands
ionic build
ionic cordova platform add browser
cordova run browser
code for .ts
console.log('Device Model is: ' + this.device.model);
And works !

Ionic livereload: how to ignore some files?

I have an Ionic project and I use external tool for processing Coffee and SCSS. By default livereload in Ionic project watches everything. Where I can change this?
This setting is named watchPatterns (source) and can be changed in ionic.project file:
{
...
"watchPatterns": ["www/**/*", "!www/lib/**/*", "!www/config.codekit", "!www/**/*.scss", "!www/**/*.coffee"]
}
Default value: ["www/**/*", "!www/lib/**/*"]
I just wanted to give an update as the accepted answer does not work for the newer version of Ionic CLI.
For Ionic CLI v3.1.2 & Ionic Framework v1.3.3:
Versions:
Ionic CLI : 3.1.2
Ionic Framework : ionic1 1.3.3
#ionic/cli-utils : 1.1.2
#ionic/cli-plugin-ionic1 : 1.1.2
The "watch pattern" for livereload is not configurable from your project files. You have to change WATCH_PATTERNS in the source code itself.
If you've built your Ionic v1 app using the tabs starter app (doc):
Example:ionic start myApp tabs --type ionic1
The file you will need to change is in the directory ./myApp/node_modules/#ionic/cli-plugin-ionic1/dist/serve/config.js
Below is what the file will look like:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
exports.WATCH_PATTERNS = [
'scss/**/*',
'www/**/*',
'!www/lib/**/*',
'!www/**/*.map'
];
exports.LOGGER_DIR = '__ion-dev-server';
exports.IONIC_LAB_URL = '/ionic-lab';
exports.DEFAULT_ADDRESS = '0.0.0.0';
exports.DEFAULT_LIVERELOAD_PORT = 35729;
exports.DEFAULT_SERVER_PORT = 8100;
exports.IOS_PLATFORM_PATH = path.join('platforms', 'ios', 'www');
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
From there you can modify the WATCH_PATTERNS array to watch or '!' not watch a particular directory or file.
This isn't an ideal solution since the starter app uses the Node Package Manager (NPM) to manage the #ionic/cli-plugin-ionic1 dependency. If you decide to run this project on another computer or update your node modules, then you would have to re-do the steps above to customize the watch patterns. However, you can fork the source code and tell NPM to use your version instead.