How to add any external JavaScript file in my Ember CLI component? - ember-cli

I am new to Ember CLI and I don't know how to add my own util file in my app.
I want to add this summernote.js file to my project.
How do I add this file to the components using Ember CLI?

You need to use import keyword in your component file. Example app/components/my-component:
import Ember from 'ember';
import MyUtil from '../utils/my-util';
// ... you can use MyUtil here
// ... rest of file

Related

Import Leaflet.awesome-marker in angular/cli component

I want to use the Leaflet.awesome-marker plugin in my angular project.
I installed the package throught yarn and imported in my component using
import * as awesome from 'leaflet.awesome-marker';
But I receive the following error:
Cannot find module 'leaflet.awesome-marker'
Doing the same thing with the geojson module works fine, why not with this one?
Try importing leaflet.awesome-markers, not leaflet.awesome-marker

how do you import mapbox-gl-draw using webpack?

I am using create-react-app and trying to install mapbox-gl-draw.
npm install #mapbox/mapbox-gl-draw
This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:
import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)
I just get an empty object.
I am using create-react-app. Do I need to use a different webpack .config file.
What is the best way to import mapbox modules like this?
If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
alias: {
// mapbox-gl related packages in webpack should use dist instead of the default src
'#mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
},
},
Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.
The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.
To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:
"mapbox-gl": ">=0.27.0 <=0.38.0 when using "#mapbox/mapbox-gl-draw": "^1.0.1".
This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.

How to import new library in Angular2?

I want to use RxJS-DOM library to parse json data from file. I have some difficulties with including this library to Angular2 application. First, i installed RxJS-DOM with NPM. And i need to import this library to my service file with import expression.
import {name} from 'path/to'
How can i know which name and which path to use to import this library by analogy with, for example, import {Injectable} from 'angular2/core' ?
Do i need to include this library in index.html like this and why ?
Thank you.
Usually it's SystemJS, which is loading up modules for you. You're configuring it with a systemjs.config.js file or inline in your index.html. There you tell it to load packages from your node_modules folder and with which name you want to register it and so on.
If you're using the Angular 2 Quickstart project, and the Beta version of Angular 2, then the configuration is probably done in your index.html and rather minimal at that. You will find, that every extra NodeJS module you want to use, you have to import with a <script> tag. (That's not the case if you go the SystemJS config route)
So your base path it usually the node_modules folder, when you're importing in your TypeScript file. If you want to import "local" files that are not modules from your node_modules folder, you do that with
import {class} from './path/file';
Regarding your JSON problem - I would leverage Angular's Http class to read in JSON files like this:
interface IConfig {
thingEnabled: boolean;
otherStuff: string;
}
[...]
this.http.get('./config.json')
.map((res: Response) => res.json())
.subscribe((res: IConfig) => {
// do something with the already deserialized JSON here
console.log(res.otherStuff);
});

Import declarations in a namespace from external module

I would like use TypeScript.NET in my angular application. I am newbie in typescript and maybe root of problem is simple.
For example I would like to use StringBuilder.
First I install TypeScript via nuget
Add ref to index.html
<script src="source/System/Text/StringBuilder.js"></script>
<script src="source/System/Text/Utility.js"></script>
Here I am confuse, I don’t use any module system (e.g commonJs, amd, etc).
TypeScript.NET nuget add to my project folder dist which constains probably dist version for amd, commonjs etc hence I reference files from source folder.
Now I want to use StringBuilder in my internal module.
module App.Company{
//in internal module
import IVersion = App.IVersion;
import IError = App.IError;
//TypeScript.NET
import StringBuilder from "../../../../source/system/text/stringbuilder";
}
Here I get compilation errror
Import declarations in a namespace cannot reference a module
What is solution?
Second how can simple reference all types from TypeScript.NET?

Import Famo.us Ember-Cli project

I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25