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.
Related
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
I am new to Angular world. There is something which confuses me while learning it, why we need to import any module two times : once through Javascript 'import' statement and then putting it in 'import' array?
Why need to import the same thing two times? Same goes with other code parts : need to first import 'component' and then again need to put the same in 'declarations' array of #NgModule.
Why need to do that? I am not getting it.
I'm guessing you're talking about your module files ?
First, you have this line
import { MyComponent } from './my-component.component';
this line allows the typescript compiler to say
Okay, I need the resources from that file, in this file.
In this case, you're importing a class.
The next line is
declarations: [MyComponent]
(Or imports or modules or providers etc.)
In this case, this is related to Angular : as you can see, you put those "imports" into the decorator of your module, #NgModule. This is internal Angular stuff, but it allows him to do the correct things with your classes. For instance, when you put injectable classes into the providers, it tells Angular to create single instances of thoses classes.
The keyword "import" is actually tells to import a module into the current module(module has class in it).
But after #NgModule whatever we are importing using imports keyword those are only single instances of the modules/classes imported previously.
Please correct me if I am wrong.
I was using both require and import but got some different behaviors from both. Until now I was assuming that require and import are just ES5 vs ES6. I was doing the below:
abc.js
console.log("abc");
xyz.js
console.log("xyz");
hello.js
require("./abc");
import "./xyz";
and the second time when I changed the file and swapped the two lines.
hello.js
import "./xyz";
require("./abc");
Both the times it was giving the same output
xyz
abc
ie. output of require was always after the import. If I use only import, or only import, it was giving consoles as expected ie. one after the other.
Can anyone help in understanding this?
Modules declared in hello.js via import are imported before any code in hello.js is run. It doesn't matter if the import statement appears after another statement. The module is still loaded before the code is run. So that is why you are getting "xyz" first no matter where you put the import statement.
require() on the other hand is programmatic. The module code is run when the require() statement is encountered while your program is running.
Since ES6 modules yet to be implemented(not sure) in node.js, I'm assuming you're using babel for transpiling export, import statements.
When babel transpiling the code it always place the import statements at the top of the module, therefore this happens. You can test it in REPL.
DEMO
More in depth details on import and require
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?
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.