THE SITUATION
I have setup a blank app. Installed #ionic/cloud-angular and imported provideCloud.
But I am getting the following error:
cloud-angular has no exported member 'provideCloud'
(I have a similar error for ionicBootstrap)
THE STEPS:
ionic start whateva blank --v2
npm install #ionic/cloud-angular --save
ionic io init
Import provideCloud
THE CODE:
import { provideCloud, CloudSettings } from '#ionic/cloud-angular';
import { ionicBootstrap, Platform } from 'ionic-angular';
Ionic info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.44
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: OS X El Capitan
Node Version: v4.6.0
Xcode version: Xcode 7.3.1 Build version 7D1014
Package.json dependencies:
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/cloud-angular": "^0.7.0",
"#ionic/storage": "1.1.6",
"ionic-angular": "2.0.0-rc.2",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.44",
"typescript": "2.0.6"
},
THE QUESTION:
Why I am getting the error?
I have just setup a new blank app.. There is something wrong in the setup?
Thanks!
When version 0.7.0 was released, provideCloud was replaced with CloudModule as you can see in their code.
The new way to set up your cloud setting is as follows
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
#NgModule({
declarations: [ ... ],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [ ... ],
providers: [ ... ]
})
export class AppModule {}
Related
I'm having an issue in my application with ngx-bootstrap whereby it now can't detect the module unless you specify the path
For example:
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
produces "Cannot find module 'ngx-bootstrap'".
Removing the reference and checking quickfixes just replaces the reference with:
import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';
Obviously this isn't ideal as they should be available through ngx-bootstrap without specifying the folder, and i would have to go through dozens of components and change these references which shouldn't be necessary. Has anyone had this problem before?
I've already tried:
npm install
npm update in case there were updates in recent commits
Deleting node_modules folder and doing npm install again
Re-installing ngx-bootstrap on its own - npm install ngx-bootstrap --save
npm cache clean
I've even started afresh and cloned my app into another location, run npm install, and the same thing happens
This was working fine yesterday. I'm not sure what I'm missing.
More info:
Angular CLI: 9.0.2
Node: 12.16.1
OS: win32 x64
Angular: 9.0.1
package.json:
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular-devkit/build-angular": "^0.900.7",
"#angular/animations": "9.0.1",
"#angular/cdk": "^9.2.0",
"#angular/common": "9.0.1",
"#angular/compiler": "9.0.1",
"#angular/core": "9.0.1",
"#angular/forms": "9.0.1",
"#angular/platform-browser": "9.0.1",
"#angular/platform-browser-dynamic": "9.0.1",
"#angular/router": "9.0.1",
"#auth0/angular-jwt": "^4.0.0",
"#microsoft/signalr": "^3.1.3",
"#ng-select/ng-select": "^3.7.3",
"#ngx-progressbar/core": "^5.3.2",
"#ngx-pwa/local-storage": "^9.0.3",
"#types/date-fns": "^2.6.0",
"angular-9-datatable": "^0.1.1",
"angular-calendar": "^0.28.2",
"angular-gauge": "^3.1.2",
"angular-gridster2": "^9.0.1",
"angular-resize-event": "^1.2.1",
"bootstrap": "^4.4.1",
"chartjs-plugin-annotation": "^0.5.7",
"ckeditor4-angular": "^1.1.0",
"core-js": "^3.6.4",
"crypto-js": "^4.0.0",
"echarts": "^4.7.0",
"file-saver": "^2.0.2",
"html2canvas": "^1.0.0-rc.5",
"jspdf": "^1.5.3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"ng-dynamic-component": "^6.1.0",
"ng2-dragula": "^2.1.1",
"ng4-charts": "^1.0.2",
"ngx-bootstrap": "^5.3.2",
"ngx-color": "^4.1.1",
"ngx-echarts": "^4.2.2",
"ngx-image-compress": "^8.0.4",
"ngx-image-cropper": "^3.1.5",
"ngx-infinite-scroll": "^8.0.1",
"ngx-material-timepicker": "^5.5.1",
"ngx-pagination": "^5.0.0",
"ngx-swiper-wrapper": "^9.0.1",
"ngx-toastr": "^12.0.1",
"pluralize": "^8.0.0",
"rxjs": "6.5.4",
"rxjs-compat": "6.5.4",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"valid-url": "^1.0.9",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular/cli": "9.0.2",
"#angular/compiler-cli": "9.0.1",
"#angular/language-service": "9.0.1",
"#types/echarts": "^4.4.4",
"#types/file-saver": "^2.0.1",
"#types/googlemaps": "^3.39.2",
"#types/jasmine": "3.5.3",
"#types/jasminewd2": "2.0.8",
"#types/jspdf": "^1.3.3",
"#types/node": "^13.9.8",
"#types/pluralize": "0.0.29",
"#types/valid-url": "^1.0.3",
"codelyzer": "^5.2.2",
"ie-shim": "^0.1.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"node-sass": "^4.13.1",
"protractor": "~5.4.3",
"ts-node": "~8.6.2",
"tslint": "~6.0.0",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "^3.6.1"
},
If anyone has any ideas let me know
Thanks!
Based on ngx-bootstrap documentation, angular 9 doesn't support this kind of import . If you want to use BsModalService , ButtonsModule and so on you have to import them as below :
// RECOMMENDED
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
instead of :
// NOT RECOMMENDED
import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';
As per https://github.com/valor-software/ngx-bootstrap/issues/5753
Updated documentation: https://valor-software.com/ngx-bootstrap/#/modals
// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { ModalModule } from 'ngx-bootstrap';
#NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
This is the ideal solution as it is the one that is documented by the maintainer of the repo.
I had the same problem today, trying to update from Angular 9.0.2 to Angular 9.1.0.
I guess it's because you have in your package.json: "ngx-bootstrap": "^5.3.2", so npm is taking the latest version available on ngx-bootrap tag: 5.6.0. (At least that's the version I have today)
I've solved just replacing the imports on my code, from 'ngx-bootstrap' to 'ngx-bootstrap/someBootstrapComponent'.
For example, my previous import was:
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
And my new import looks like:
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
I know this is not an ideal solution, but meanwhile at least you can have your app compiling properly.
I hope it helps.
Best regards,
Jesús.
So it seems like it might be a problem with later versions of ngx-bootstrap. In my package.json, I replaced "ngx-bootstrap": "^5.3.2" with "ngx-bootstrap": "5.3.2", ran npm install and it built without any problems.
import { ModalModule } from 'ngx-bootstrap/modal';
This must be working .. simple solution
For some reason, the same package.json that's ran before, now doesn't works. The advice above work like a charm.
Solution: remove the ^.
"ngx-bootstrap": "^5.3.2" to "ngx-bootstrap": "5.3.2"
I am currently using Angular 9 with the latest version of ngx-bootstrap.
I believe the latest implementation is to import the BsDatepickerModule in the app.module.ts file like this
Import statement in app.module.ts code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
in app.module.ts imports:
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot()
]
Component Code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
#Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
bsConfig: Partial<BsDatepickerConfig>;
constructor() {}
ngOnInit() {
this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });
}
}
package.json
"#angular/core": "~9.1.7",
"bootstrap": "^4.5.0",
"ngx-bootstrap": "^5.6.1",
"#angular/cli": "~9.1.6"
From the official site:
Usage
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// RECOMMENDED
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { BsDatepickerModule } from 'ngx-bootstrap';
#NgModule({
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot(),
...
]
})
export class AppModule(){}
https://valor-software.com/ngx-bootstrap/#/datepicker
techjunkieblog.com
I am trying to follow the documentation found here however it is going well. All of the packages that gets created with the application are out of date such as the #angular/compiler which really the version at the time of this post is 6.0.2 not 4.2.5 as listed below in the generated packages.json.
Things to note.
Angular core 2.1 is installed
Latest version of NPM and Node are installed
Visual Studio 2017 Community is installed
Operating System: Windows 10
With the packages being this out of date there are many angular things I can take advantage of. I have been looking around however I have not found any solutions that work.
Things I have tried:
npm update
npm update -D && npm update -S
npm cache clean
npm install -g #angular/cli#latest
My dependencies:
{
"name": "TestingApp",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "4.2.5",
"#angular/common": "4.2.5",
"#angular/compiler": "4.2.5",
"#angular/compiler-cli": "4.2.5",
"#angular/core": "4.2.5",
"#angular/forms": "4.2.5",
"#angular/http": "4.2.5",
"#angular/platform-browser": "4.2.5",
"#angular/platform-browser-dynamic": "4.2.5",
"#angular/platform-server": "4.2.5",
"#angular/router": "4.2.5",
"#ngtools/webpack": "1.5.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.3",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}
}
Update dotnet --info
Product Information:
Version: 2.1.201
Commit SHA-1 hash: 7932dc6179
Runtime Environment:
OS Name: Windows
OS Version: 10.0.17134
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\2.1.201\
Microsoft .NET Core Shared Framework Host
Version : 2.0.7
Build : 2d61d0b043915bc948ebf98836fefe9ba942be11
This is my package.json I got from my client:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "^4.1.3",
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#angular/platform-server": "4.1.3",
"#ionic-native/core": "3.12.1",
"#ionic-native/device": "^3.12.1",
"#ionic-native/file-opener": "^3.12.1",
"#ionic-native/geolocation": "^3.12.1",
"#ionic-native/status-bar": "^3.12.1",
"#ionic/storage": "2.0.1",
"#ng-idle/core": "^2.0.0-beta.8",
"#ng-idle/keepalive": "^2.0.0-beta.8",
"#types/ibm-mobilefirst": "0.0.28",
"#types/jquery": "^3.2.6",
"ajv": "^5.2.2",
"ionic-angular": "^3.5.0",
"ionicons": "3.0.0",
"ng2-translate": "^4.2.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"typings": "^2.1.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "^2.0.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^0.4.6",
"grunt-file-exists": "^0.1.4",
"grunt-include-replace": "^4.0.1",
"grunt-string-replace": "^1.2.1",
"grunt-template": "^0.2.3",
"typescript": "2.3.4"
},
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "online_registration: An Ionic project"
}
And when I tried npm install, I got this warning:
npm WARN #angular/animations#4.3.6 requires a peer of
#angular/core#4.3.6 but none was installed. npm WARN
#angular/platform-server#4.1.3 requires a peer of
#angular/animations#4.1.3 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of
#ionic-native/core#3.1.0 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of
#angular/core#2.4.8 but none was installed. npm WARN
#ionic-native/splash-screen#3.1.0 requires a peer of rxjs#5.0.1 but
none was installed. npm WARN grunt-template#0.2.3 requires a peer of
grunt#~0.4.0 but none was installed. npm WARN ng2-translate#4.2.0
requires a peer of #angular/core#^2.0.0 but none was installed. npm
WARN ng2-translate#4.2.0 requires a peer of #angular/http#^2.0.0 but
none was installed.
How critical is this?
Then I check the ionic info:
cli packages: (/Users/xxx/.nvm/versions/node/v6.9.1/lib/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.1.2 ios 4.1.1
Ionic Framework : ionic-angular 3.6.0
It seems like it did not follow package.json, which ionic-angular is ^3.5.0. Is this correct?
You just need to delete node_modules folder and after that run npm i.Hope everything will be fine then.
I'm trying to connect ionic 2 app to backand and getting this run time error:
Cannot find module "ionic-native".
I have tried running npm install #ionic-native/core --save – but does not help. Many thanks
Set Up Details Are Here: Ionic Framework: 3.0.1 Ionic App Scripts:
1.3.0 Angular Core: 4.0.0 Angular Compiler CLI: 4.0.0 Node: 6.10.1 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0
(Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/57.0.2987.133 Safari/537.36
Error: Cannot find module "ionic-native" at g
(localhost:8100/build/polyfills.js:3:7133) at Object.module.exports
(localhost:8100/build/main.js:114616:7) at webpack_require
(localhost:8100/build/main.js:20:30) at Object.
(localhost:8100/build/main.js:86362:73) at webpack_require
(localhost:8100/build/main.js:20:30) at Object.
(localhost:8100/build/main.js:140153:70) at webpack_require
(localhost:8100/build/main.js:20:30) at
localhost:8100/build/main.js:66:18
Package.Json as follows:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.0.0",
"#angular/compiler": "4.0.0",
"#angular/compiler-cli": "4.0.0",
"#angular/core": "4.0.0",
"#angular/forms": "4.0.0",
"#angular/http": "4.0.0",
"#angular/platform-browser": "4.0.0",
"#angular/platform-browser-dynamic": "4.0.0",
"#ionic-native/core": "3.4.2",
"#ionic-native/splash-screen": "3.4.2",
"#ionic-native/status-bar": "3.4.2",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"socket.io-client": "^1.7.3",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.0",
"#types/node": "7.0.13",
"#types/socket.io-client": "1.4.29",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
"cordova-plugin-inappbrowser"
],
"cordovaPlatforms": [],
"description": "myApp: An Ionic project"
}
This issue is associated with the old import 'ionic-native'
in my case :
import { StatusBar, Splashscreen } from 'ionic-native';
I removed and added the new :
https://ionicframework.com/docs/native/status-bar
https://ionicframework.com/docs/native/splash-screen
If this is also your case, do not forget to add also in the module provider
With Ionic 3, the ionic-native modules are now loaded as providers. See below links:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
http://blog.ionic.io/ionic-native-3-x/
https://github.com/driftyco/ionic-conference-app/commit/62088
So, you have to upgrade your code if you want to use any of the native features.
I have setup my angular2 application on .NET 4.5 and included all the libraries that are required for angular2 in my application. The initial app component is running fine. Now I have included all the required #progress/kendo-angular -* libs in my package.json and restored the packages. I just added one pie chart in my app module. when I run this application I am getting the errors in console stating unable to get the kendo libraries. Like
GET failed for http://localhost:59086/#progress/kendo-angular-buttons
My package.json
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#progress/kendo-angular-buttons": "^0.20.1",
"angular-in-memory-web-api": "~0.2.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.7.4"
},
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonsModule } from '#progress/kendo-angular-buttons';
#NgModule({
imports: [BrowserModule, ButtonsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Did you check to be sure you can get the private NPM Packages?
npm view #progress/kendo-angular-grid versions
From http://www.telerik.com/kendo-angular-ui/getting-started/
Also, did you npm install all the packages? e.g. npm install --save #progress/kendo-angular-buttons #progress/kendo-angular-l10n #angular/animations? When you do this, you may also see dependencies in the console. The above statement from the above link wasn't adequate, from what I recall. I ended up having to install most of the Kendo packages, including internationalization.
Note above this is install #angular/animations.