Add 3rd party library to angular2 cli - javascript

I'm trying to add a third party library to angular2, namely the Flickity slider.
Tried to install typings. When importing them I get en error that #typings/flickity is not a module.
Second attempt to add it in angular-cli.json. Added in apps[0].scripts as described in the docs.
In the component i've used it like this:
this.slider = new Flickity('.news-wrapper', {
cellAlign: 'left',
contain: true,
prevNextButtons: false,
pageDots: true
});
When compiling I get an error Cannot find name 'Flickity'., but when running the site it works like a charm.
The problem is I can't build the app because of that error.
How should it be added then?

follow below steps to use flickity in angular-cli based project
npm install flickity --save
declare module 'flickity'; in typings.d.ts
import * as Flickity from "flickity"; in app.component.ts (needs to import wherever required)
use it like as you mentioned
this.slider = new Flickity('.news-wrapper', { cellAlign: 'left', contain: true, prevNextButtons: false, pageDots: true });

I am not sure if this will work but you can try this in the file that needs flickity.
let Flickity = require('flickity');
Just make sure you installed let Flickity using NPM

Related

How to get JQuery Code Completion in Monaco Editor?

I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.
From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.
const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);
readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target:
monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
module: monaco.languages.typescript.ModuleKind.System,
noEmit: true,
typeRoots: ["/jslib/monaco/types"],
noLib: true
});
window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
value: $("#formula").val(),
language: 'javascript',
theme: "vs-dark",
autoIndent: true,
dragAndDrop: true,
tabCompletion: true,
fontFamily: "monospace",
scrollBeyondLastLine: false
});
If anyone could let me know what I'm doing wrong, that would be awesome!
So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files (JQueryStatic, JQuery, misc, legacy). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.

Quill JS Modules Not Working in Electron

I am making an app using Quill JS and Electron. I want to use Quill's syntax highlighting module and followed the instructions on the API page (https://quilljs.com/docs/modules/syntax/). For some reason, the function does not work (no highlighting is shown in code-block). I switched the <script src=...> tag to require and declared Quill as
quill = new Quill('#editor', {
modules: {
syntax: require('highlight.js'),
toolbar: false
},
theme: 'snow'
});
The result is whenever I type something into the code-block, an error saying " " is not a valid language. I made sure that I included the css file on the main page. What am I doing wrong here?
From the link that you provide. It clearly says
var quill = new Quill('#editor', {
modules: {
syntax: true, // Include syntax module
toolbar: [['code-block']] // Include button in toolbar
},
theme: 'snow'
});
So you only need to set true on that property.
What you have to be careful is to make sure window.hljs is present if you include the script tag before Quill is imported.
Or if you use webpack. You can use ProvidePlugin and set it like this
plugins : [
.
.
new ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js',
"window.hljs": "highlight.js"
})
]

how to integration materialize js in vue and laravel

I tried to require materialize in Vue and Laravel
in bootstrap.js I have
window.Materialize = require('materialize-css');
in App.vue component I have
mounted(){
Materialize.toast('I am a toast!', 4000)
}
and received
"Uncaught ReferenceError: Materialize is not defined"
message.
Either drop a script tag with materialize js or, make sure jquery is loaded before requiring materialize.
I suppose you have a browserify setup and if you do you can do something like that:
require('jquery')(window);
require('materialize-css')(window);
Or something like that:
global.jQuery = require('jquery')
global.Materialize = require('materialize-css')
Or import globally jQuery only then simply var Materialize=require('materialize-css') and use the variabile instead.
For webpack setups add a plugin for the stuff you have installed via npm and need globally:
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery:'jquery',
jquery:'jquery'
}),
],

Meteor/React : ReferenceError: require is not defined / Error: Cannot find module

I have to use Meteor with React for a school project.
I build a website in which I'd like to add a carousel.
To do so, I tried to use : https://github.com/vazco/meteor-universe-react-carousel/
With the example script :
var React = require('react');
var Slider = require('react-slick');
var SimpleSlider = React.createClass({
render: function () {
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
);
}
});
Using this code, I get : ReferenceError: require is not defined (l1)
After some research, I saw several solutions that didn't work for me, like using Meteor.require or Npm.require.
I followed links like 'require is not defined' in Meteor.js when including NPM package
or Meteor cannot find module "module"
Now I'm a bit lost in all this, how can I use a package imported with meteor add package ? Is meteorite deprecated, do I need to use npm ?
Thanks in advance for your help.
how can I use a package imported with meteor add package
Meteor packages are exported to the global namespace and are made available to the client and/or the server as declared in the package's package.js file. Module support is coming in Meteor 1.3. That example in the documentation is not possible without adding another package that supports the require syntax, such as meteorhacks:npm and/or cosmos:browserify.

Dojo build package configuration

In our Dojo system, we have something like the following specified in our dojoConfig:
packages: [{
name: "myWidgets",
location: "/js/libs/widgets"
}]
So that in our require statements, all we have to do is something like:
require(["myWidgets/myCalendarWidget"....
The problem is when I run the build, this dojoConfig is not available and I get numerous missing dependency errors because 'myWidgets' isn't defined according to the build profile.
Now, I've tried adding a package block to the build profile also, but the end result of that is to create an actual 'myWidgets' package, which I don't want.
So, is there any way to make the build see the definition of the 'myWidgets' alias, yet have the end result of the build output still mirror the regular file structure (i.e. /js/libs/widgets)? I tried to define these path aliases in the defaultConfig element in the build profile and that doesn't work either.
If you are using a profile, you can specify the packages in the profile
/util/buildscripts:./build.sh profile=../../../myProfile.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#profile-basics
You can also specify a javascript file that holds the dojoConfig
/util/buildscripts:./build.sh --dojoConfig ../build/examples/dojoConfig.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#using-a-package-configuration
Answer to your comment. The path is relative from where dojo.js is.
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
paths: {
"evf": "../../evf"
}
};
My directory structure looks like
js/dojo-1.8.0
dijit
dojo <-- contains dojo.js
dojox
util
js/evf
myCustomWidget.js

Categories