I'm trying to integrate Monaco Editor into my angular lib in an Angular-6 app, I'm new at this and the official docs doesn't have any setup guide for the implementation. Any advice or guidance would be greatly appreciated.
Use the ngx-monaco-editor NPM module
It provides support for various angular versions
In your case for Angular 6 you need to do
npm install ngx-monaco-editor#6.0.0 --save
then reference the module in your app.module
import { MonacoEditorModule } from 'ngx-monaco-editor';
...
imports: [
...
MonacoEditorModule.forRoot(),
...
and then in your html component you can use it like such:
<ngx-monaco-editor ... ></ngx-monaco-editor>
Read the readme here:
https://www.npmjs.com/package/ngx-monaco-editor
Related
I tried creating a contact form with SMTP js in react but it did not work tried checking stack over flow but no good answer for using only react not typescript
I was expecting the stmp is to be installed like normal swiper
Because I'm still a junior frontend dev 🤧
You can also find more information and documentation on using smtp.js in React app on the following resources:
Official smtp.js documentation: https://github.com/kimmobrunfeldt/smtp.js
SMTP in Node.js: https://nodemailer.com/smtp/
this also explains better:
https://victorbruce82.medium.com/how-to-send-emails-using-react-through-emailjs-no-server-code-needed-8e1453ef8796
Yes, you can install smtp.js in a similar way to installing other packages in your React app. You can use npm or yarn to install it:
CODE :
npm install smtpjs
or
yarn add smtpjs
After installation, you can import and use smtp.js in your React component.
I have a react-app webapp wrapped by an ionic-capacitor framework.
I already used a lot of cordova-plugins inside my code, like the phonegap-plugin-barcodescanner or the cordova-plugin-inappbrowser.
I understood that i can use them if I make:
npm install --save cordova-plugin-pluginName #ionic-native/plugin-name
then i could import them into my React environment with:
import {PluginName} from #ionic-native/plugin-name
and it's works like a magic!
The problem is:
when i need to use a cordova-plugin which requires configuration, it used to be cordova add plugin plugin-name --variable var=""
but in the react-capacitor environment i can't install the plugin with it's configuration! i should add it later somehow, via the androidManifest.xml or via the cordova:config.xml.
can someone help me please?
thanks a lot...
Ionic provides a tool for changing the ios/android configs using a separate file. It's called Trapeze. It does require a bit of extra configuration and an aditional build step but it will allow for the adding of these variables to the ios/android config.
Config from ionic info:
Cordova CLI: 8.0.0
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 3.2.0
Node Version: v6.14.4
Working on some update on an Ionic 2 project previously running on an Android 4.4 device.
I ran in an error similar to this one: Ionic2 White screen error on deploy Android 4.2.2: Use of const in strict mode
After research I found that under my project in [project]/android/app/src/main/www/assets/build/vendor.js I have some const used to define variables in the file.
Variables marked with const seem to be all linked to directory node_module/gsap (this library).
My understanding is that gsap generate in ES6 format instead of ES5 format in the vendor.js file.
The GSAP version is 1.20.6.
Internet reading made me understood that through webpack or babel I could control that it generates in ES5 format.
But I don't understand how to do that in [project]/tsconfig.json file where it is stated:
{
"compilerOptions": {
...
"target": "es5",
...
}
"exclude": ["node_modules"],
...
}
Do you have an idea how to force ES5 in a defined sub node_modules directory like node_modules/gsap
Downgrading to gsap~1.19.1 helped to do a workaround to this problem.
I want to import cytoscape.js library in my angular project, but I don't know how to do it. As far as I know, there is no official cytoscape module for angular, is there any way to import cytoscape manually?
Philipp's answer actually works but it looks like an improper inclusion of a library using both npm install AND an actual JS file. You can skip the npm install step from the instruction and it will work the same.
To actually use npm installed package I advise the following:
Run npm install cytoscape
Run npm install --save #types/cytoscape for proper IDE tips.
In your component add import * as cytoscape from 'cytoscape';
Use it like expected e.g. let cy = cytoscape({...})
UPDATE: Please see the answer of D.C. Joo, this should be the accepted answer.
Actually, it's no problem to import JS libraries in Angular, thats how I do it using npm and Angular6:
Run npm install cytoscape
Download Cytoscape from https://github.com/cytoscape/cytoscape.js/blob/master/dist/cytoscape.min.js
Create a directory scripts in your Angular root directory and place the downloaded file there
Include your downloaded script in your angular.json:
"projects": {
"myproject": {
...
"architect": {
"build": {
...
"scripts": [
"src/scripts/cytoscape.min.js"
]
...
(NOTE: Sorry about the formatting, I tried but it does not want to work)
In the Angular component where you want to use Cytoscape, add declare var cytoscape: any; to the imports
Now you can use Cytoscape like you would normally, have fun :)
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube