Getting Started with Ionic 3, Angular 4
Trying to use the latest of everything here, so maybe that's the problem - and, I'm no Angular or npm expert! Maybe someone here can advise?
1) Make a new Ionic application:
$ ionic start CloudinaryTest
? What starter would you like to use: blank
✔ Creating directory ./CloudinaryTest - done!
...(etc. etc.)...
♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫
? Link this app to your Ionic Dashboard to use tools like Ionic View? No
Go to your newly created project: cd ./CloudinaryTest
2) Build (and install Cordova support)
$ cd CloudinaryTest/
$ ionic cordova build
? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? Yes
> npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
✔ Running command - done!
? What platform would you like to build: ios, android: browser
> cordova platform add --save browser
✔ Running command - done!
Running app-scripts build: --iscordovaserve --externalIpRequired --nobrowser
[10:07:32] build dev started ...
...(etc. etc.)...
[10:07:41] build dev finished in 8.61 s
> cordova build browser
⠋ Running command [10:07:43] lint finished in 2.11 s
✔ Running command - done!
Running command: /Users/my-username/dev/CloudinaryTest/platforms/browser/cordova/build
Cleaning Browser project
So far so good!
3) Install Cloudinary
$ npm install @cloudinary/angular-4.x --save
CloudinaryTest@0.0.1 /Users/my-username/dev/CloudinaryTest
├── UNMET PEER DEPENDENCY @angular/common@4.1.3
├── UNMET PEER DEPENDENCY @angular/core@4.1.3
└─┬ @cloudinary/angular-4.x@1.0.0
├── UNMET PEER DEPENDENCY @angular/animations@4.3.0
├── UNMET PEER DEPENDENCY @angular/compiler@4.3.0
├── UNMET PEER DEPENDENCY @angular/platform-browser@4.3.0
└─┬ @angular/platform-server@4.3.0
├─┬ parse5@3.0.2
│ └── @types/node@6.0.83
└── xhr2@0.1.4
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN @angular/platform-server@4.3.0 requires a peer of @angular/animations@4.3.0 but none was installed.
npm WARN @angular/platform-server@4.3.0 requires a peer of @angular/core@4.3.0 but none was installed.
npm WARN @angular/platform-server@4.3.0 requires a peer of @angular/common@4.3.0 but none was installed.
npm WARN @angular/platform-server@4.3.0 requires a peer of @angular/compiler@4.3.0 but none was installed.
npm WARN @angular/platform-server@4.3.0 requires a peer of @angular/platform-browser@4.3.0 but none was installed.
And... that feels like it's failing already, but stuff is still installed. I installed ajv, and that too complained about @angular/common and @angular/core. But, let's move ahead and see how far I can get. (Or should I be stopping here? I don't know.) I will refer to the cloudinary_angular sample project on GitHub now. From the sample project app.module.ts:
import * as cloudinary from 'cloudinary-core'; |
|
This doesn't work in my app.module.ts. I get: Cannot find module 'cloudinary-core'. However, the following does work: import { CloudinaryModule, CloudinaryConfiguration, Cloudinary } from '@cloudinary/angular-4.x';
And, I can add "CloudinaryModule" to the list of imports in app.module.ts - that feels like the right thing to do, I think.CloudinaryModule.forRoot({ Cloudinary }, { cloud_name: 'my-cloud-name' } as CloudinaryConfiguration),
And, it builds now! Let's try running ionic serve Error: Uncaught (in promise): TypeError: cloudinaryJsLib.Cloudinary is not a constructor |
And, that's about as far as I've gotten on my own, thrashing about, trying to follow the examples and take random stabs at getting things to work. Any suggestions appreciated!
-
I was able to get further (albeit with npm warnings) by doing the following:
npm install cloudinary-core @cloudinary/angular-4.x --save
and in my *app.module.ts*
import * as Cloudinary from 'cloudinary-core'
I can now run a sample!
0 -
Hi Nimai,
Thanks for the update, glad to hear it's working :)
If you need anything please don't hesitate to contact the support at:
0 -
hello i have the same probleme
0 -
Hi cgiApp,
Please try and import as follows:
import { CloudinaryModule, CloudinaryConfiguration, Cloudinary } from '@cloudinary/angular-4.x';Let me know if this helps?
0
Post is closed for comments.
Comments
4 comments