How to install Ionic media plugin? - ionic4

just install fresh Ionic4 framework, create tabs starter project and try install media plugin as described here
https://ionicframework.com/docs/native/media/#installation
But nothing worked and I received the following error:
[ng] ERROR in src/app/tab2/tab2.page.ts(14,22): error TS2304: Cannot find name 'Media'.**
my ionic info
$ ionic info
Ionic:
ionic (Ionic CLI) : 4.9.0 (C:\Users\RAMS\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.0.0
#angular-devkit/build-angular : 0.12.3
#angular-devkit/schematics : 7.2.3
#angular/cli : 7.2.3
#ionic/angular-toolkit : 1.2.3
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)
System:
Android SDK Tools : 25.2.5 (C:\Program Files (x86)\Android\android-sdk)
NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 7
here is my tab2.page.ts
import {Media, MediaObject} from '#ionic-native/media';
#Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
constructor(private media: Media) {
}
}

Perhaps there was an issue with your installation?
Maybe you could try reinstalling:
ionic cordova plugin add cordova-plugin-media
npm install #ionic-native/media

Related

ERROR #98123 WEBPACK: Generating development JavaScript bundle failed - unexpected token

I have cloned my repository an then install all packages via npm. When i try to start mu program with gatsby develop i get this error in all files in templates directory.
I've already cleared chache, deleted node_modules and public folders, re-install packages and so on, but nothing worked.
This is is info, which I get from gatsby info:
System:
OS: macOS 11.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU # 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
Yarn: 1.13.0 - ~/.npm-global/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.141
Firefox: 78.0.2
Safari: 14.0.2
npmPackages:
gatsby: ^2.30.1 => 2.31.1
gatsby-awesome-pagination: ^0.3.6 => 0.3.6
gatsby-image: ^2.5.0 => 2.10.0
gatsby-plugin-eslint: ^2.0.8 => 2.0.8
gatsby-plugin-fontawesome-css: ^1.0.0 => 1.0.0
gatsby-plugin-manifest: ^2.6.1 => 2.11.0
gatsby-plugin-netlify-cms: ^4.5.0 => 4.9.0
gatsby-plugin-offline: ^3.4.0 => 3.9.0
gatsby-plugin-react-helmet: ^3.4.0 => 3.9.0
gatsby-plugin-sharp: ^2.8.0 => 2.13.1
gatsby-plugin-styled-components: ^3.5.0 => 3.9.0
gatsby-plugin-typography: ^2.10.0 => 2.11.0
gatsby-source-filesystem: ^2.5.0 => 2.10.0
gatsby-transformer-remark: ^2.12.0 => 2.15.0
gatsby-transformer-sharp: ^2.6.0 => 2.11.0
Does anyone have similar problem, or know how to solve it?
It's not a matter of dependencies or configuration, you have a typo in your project. It seems that somewhere in your JavaScript files (maybe in the templates folder) you have a . (dot) that is breaking your code.
To enable optional chaining in any JavaScript project, since it's not a standard feature, you need to:
Install the dependency (#babel/plugin-proposal-optional-chaining):
npm install --save-dev #babel/plugin-proposal-optional-chaining
Or:
yarn add #babel/plugin-proposal-optional-chaining --dev
Enable it in your Babel configuration. In Gatsby, you can create a babel.config.js (or .babelrc) in the root of your project to customize Babel's configuration:
{
"plugins": [
["#babel/plugin-proposal-optional-chaining"]
],
"presets": [
[
"babel-preset-gatsby",
{
"targets": {
"browsers": [">0.25%", "not dead"]
}
}
]
]
}
Fixed by:
problem was my package-lock.json. After we fixed it, everything works
properly :) nevermind

Unable to receive data from external app after opening it though inAppBrowser cordova plugin

Good day to all,
I am currently using Ionic 4. The specifications are at the bottom of the post.
For the app that I was tasked to do, I have to open another app(Let’s call it ABC) on my iPad, allow some functions to run on it, and then for ABC to return some results from the function into my app for it to process.
I have tried to open the external app via inappbrowser cordova plugin and have some success. I was able to pass params into the app and the native app was able to receive the params. The issue occurs when ABC sends the info back to me. I was able to console log the information received in the AppDelegate.m file but I was unable to make the connection between that and my cordova plugin for me to properly receive the information.
Here is the code in my AppDelegate.m that allowed me to log out my params received.
(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
NSLog(#“Open from other app !!”);
NSLog(#“Full URL: %#”, url);
NSURLComponents *urlComponent = [[NSURLComponents alloc] initWithURL:url resolvingAgainstBaseURL:true];
NSString *host = urlComponent.host;
NSLog(#“Host: %#”, host);
NSString *stringValue = urlComponent.queryItems.firstObject.value;
NSLog(#“string value: %#”, stringValue);
return true;
}
Is there a way I can retrieve this information for my cordova plugin? I am rather lost in this. Any help would be greatly appreciated.
My ionic Info:
Ionic:
ionic (Ionic CLI) : 4.10.0 (/Users/XXX/node_modules/ionic)
Ionic Framework : #ionic/angular 4.11.7
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.1.1
Cordova:
cordova (Cordova CLI) : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : browser 6.0.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v10.16.3 (/Users/XXX/.nvm/versions/node/v10.16.3/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 11.3 Build version 11C29

Unable to resolve module `stream`

This error starting showing up all of a sudden.
Node : v10.16.3
React native : 0.60.5
react-native-cli: 2.0.1
bundling failed: Error: Unable to resolve module stream from /Users/username/React Native/SampleApp/node_modules/browser-stdout/index.js: Module stream does not exist in the Haste module map
It's giving error for this line :
var WritableStream = require('stream').Writable
I tried installing 'stream' via npm
npm install stream
Then other similar errors started showing up.
One option is to use the client package readable-stream. If dependencies are requiring stream, then i would suggest adding the following to your babel config as well.
yarn add readable-stream
yarn add -D babel-plugin-rewrite-require
babel.config.js
module.exports = {
// rest of config
plugins: [
// other plugins
[
'babel-plugin-rewrite-require',
{
aliases: {
stream: 'readable-stream',
},
},
],
],
};
just install stream using npm install stream and run the project again.

When the ionic picker is opened the individual column items all stack on top of each other

The issue is explain here. https://github.com/ionic-team/ionic/issues/19222
The ionic picker stack items on top of each other, when you click on it the second time on wards.
Ionic:
Ionic CLI : 5.2.7 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.8.1
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.4.0 (/usr/local/Cellar/node/12.4.0/bin/node)
npm : 6.11.2
OS : macOS Mojave
This is the code https://github.com/NomiJ/ionic-picker-styling-issue
The answer is here https://github.com/ionic-team/ionic/issues/17664
await picker.present();
picker.onDidDismiss().then(async data => {
picker.columns.forEach(col => {
col.options.forEach(el => {
delete el.selected;
delete el.duration;
delete el.transform;
});
});
});

Angular 5 build with --aot Module not found - #angular/platform-browser

I am trying to build the Angular 5 project using --aot option and the build fails with the following error,
ERROR in ../node_modules/#angular/forms/esm5/forms.js Module not
found: Error: Can't resolve '#angular/platform-browser' in '...PROJECT
LOCATION.../node_modules/#angular/forms/esm5'
Angular version
Angular CLI: 1.7.4
Node: 8.11.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler-cli, core, http
... language-service, router
#angular/cdk: 5.2.4
#angular/cli: 1.7.4
#angular/compiler: 5.2.11
#angular/forms: 5.2.0
#angular/material-moment-adapter: 8.0.1
#angular/material: 5.2.4
#angular/platform-browser-dynamic: 5.2.0
#angular/platform-browser: 5.2.0
#angular/platform-server: 8.1.2
#angular-devkit/build-optimizer: 0.3.2
#angular-devkit/core: 0.3.2
#angular-devkit/schematics: 0.3.2
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.10.2
#schematics/angular: 0.3.2
#schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
And the main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
When I change it to bootstrapModule of platform-browser instead of platform-browser-dynamic build is successful but the app fails to render.
What needs to be done to compile using AOT?
Upgrade to typescript#2.6.2 will solve the issue