With ES2015 (ES6), with get built-in support for modules in JavaScript. Like with CommonJS, each file is its own module. To make objects, functions, classes or variables available to the outside world it’s as simple as exporting them and then importing them where needed in other files. Angular 2 makes heavy use of ES6 modules, so the syntax will be very familiar to those who’ve worked in Angular. The syntax is pretty straightforward:
You can export members one by one. What’s not exported won’t be available directly outside the module:
Or you can export desired members in a single statement at the end of the module:
You can also give an aliases to exported members with the as keyword:
You can define a default export with the default keyword:
Importing is also very straightforward, with the import keyword, members to be imported in curly brackets and then the location of the module relative to the current file:
You can also alias members at import time:
You can import everything that’s imported by a module like this:
This allows you access to members with the dot notation:
You import the default member by giving it a name of your choice. In the following example Logger is the name given to the imported default member:
And here’s how you would import non-default members on top of the default one:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Appreciate the really concise article. One thing that would be helpful though is a little help on when to use default or not when exporting. I.e. why not just make everything default export?
This comment has been deleted
Please do kindly explain also how to integrate that in
index.html
file