import asynchronously in typescript - javascript

I need to import an AMD module written in javascript using System.js in a typescript class (Angular 2). I was able to load the library asynchronously using:
System.import('export_name').then(function(instance){
// deal with instance
};
But I need to solve this import synchronously instead of async since the object gets requests before the import is solved (for example, if I put it in the constructor).
I would like to do something like:
import * as [instanceName] from 'export_name';
But it tells me that it is not a module. Any idea how to resolve this?

Related

Import a JavaScript function without importing additional dependencies in NodeJS

If there's a zero-dependencies function zdfun, but in a module/file foo.js that imports further dependencies, and I'm solely interested in zdfun, is it possible to import it without Node trying to load all the other dependencies in foo.js?
Obviously one should normally just pull zdfun out, place it in its own module, and import that in foo.js. Sadly this is not feasible in this case for various reasons.
if zdfun is declared in its own file where no other depencies are imported you can do :
import { zdfun } from '<module_name>';
And this will not import useless depencies.
I hope this answer your question

Instantiate an object defined in module A and use its methods in module B javascript

I'm working in a web development project.
Right now i'm using a 3rd party library to instantiate an object of that library in a file called, let's say, fileA.js
so i do:
import libraryExport from "./librarymain.js"
var object = libraryExport( ... );
export default object;
Now, in fileB.js i want to use the methods that the instantiated object has, for example:
import object from "fileA.js"
object.methodOfTheLibrary();
However, when im running this in my browser console i always get "methodOfTheLibrary is not a function", which means, from my point of view, that the library is not being imported properly in fileB.js
Note: I'm using webpack to bundle all of my files and everything was compiling and bundling just fine until i came with issues. I usually know my way around C++ in an advanced way but for JS i just still don't fully understand how to solve these kind of import issues.
Thank you for any help
It's generally* recommended that you avoid using an imported module directly in the body of another module. (One of your own modules, that is... as you'll see in a moment, third-party modules are generally fine to use.)
The big issue is load order. If your fileA also imports some other module, which imports another module which then imports fileB, then fileB will attempt to run and, since fileA is still trying to load dependencies, object will not actually have been instantiated yet.
You'll either need to carefully review your dependencies to look for just such a loop and then eliminate it or, if possible, restructure fileA to wrap your code in a function that can be called once the entry point has finished loading (which will guarantee that all other modules have been resolved):
// fileB.js
import object from "fileA.js"
export function init() {
object.methodOfTheLibrary();
}
// main.js
import init from "fileB.js";
init();
* "generally" meaning that there are plenty of perfectly acceptable situations where it's fine. You just have to mindful of the pitfalls and mitigate against those situations.

Can i import a module without execute it in JavaScript?

Is there a way to import a module into another and run it only when called?
Actually i am importing like this.
import {getData, paginacao} from './restCountries.js'
No. Importing a module always causes its initialisation code to run - otherwise there wouldn't be any values that you can use.
If there's code in a module that you don't want to run immediately, put it into a function and export that.

Basic questions about Rxjs

Im developing a small app with angular2 and I installed Rxjs 5.
In every tutorial there is a diffrent way to import the Rxjs libary.
The code to import in angular2 web is not working; I mean that Websotrm doesn't recognize Observable or any of its functions (from,subscribe,...).
What do I need to do to fix that?
If I import everything from Rxjs, does the load of the website will be slower? (I won't have more then 2- classes)
(Webstorm question) How to I make webstorm to autocomplete the name of the functions with out pressing alt+space
The latest RXJS distributions offer broken up modules to mitigate the gigantic filesize, à la Lodash. Importing rxjs/Rx (as another answer suggests) will get you the entirety of the library and isn't suggested.
Instead, import methods and operators individually:
for core classes, import the class from its scoped module: import { Observable } from 'rxjs/Observable'
for instance methods, use the instance scope in the "add" scope: import 'rxjs/add/observable/fromEvent' (note there is no destructured object to import – the method is added automatically by the import)
for operators, import from the add/operator scope: import 'rxjs/add/operator/switchMap'
Importing an operator once makes it available to all instances, so it's recommended to gather all the parts you use in a single file and import that file wherever needed, I.E. by re-exporting the instances you use.
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/flatMap';
import 'rxjs/add/operator/switchMap';
export { Observable, BehaviorSubject };
This works in my projects: import {Observable, Subject} from "rxjs/Rx";
You only need to add Rx.umd.min.js from rxjs/bundles. It's about 170KB.
Try upgrading to WebStorm 2016.2. I am using that version and it works fine (provided you have the correct imports) Has better support for Angular 2 in general. See change notes.
I virtually never use Ctrl+Space. Tip: Set the Autopopup code completion value (Settings, Editor, Code Completion) to a very low delay.

How to use ES6 import with hyphen

I really don't know how to do this and not sure how to google either.
Right now I have this
let source = require('vinyl-source-stream');
I would like to change to be import but this doesn't work
import {'vinyl-source-stream' as source} from 'vinyl-source-stream';
If that module even supports the ES6 import/export system, then what you want is this:
import source from 'vinyl-source-stream';
Your version is attempting to import an exported value named vinyl-source-stream from the module; instead, you just want the module itself to be imported (into an object named source in this case).
If you want everything in the module imported, instead of just the default exports, use this instead:
import * as source from 'vinyl-source-stream';
But neither of those will work if the module isn't actually written to use the new system.
This library doesn't use the ES2015 module system. It doesn't export at all, so you can't import it or from it.
This library uses the CommonJS module pattern (as can be seen in the source) and is meant to be requireed.
You could import the library with:
import form 'vinyl-source-stream';
which will cause the code to be executed, but that will be useless in this case since nothing (useful) will happen - in fact, you'll probably get a runtime exception due to undefined module.

Categories