For many developers learning Angular, this is the first time they’ve worked with the import & export statements in ECMAScript 6. Let’s look at those statements to understand them better.
Figure 1 – an example import & export statement
In the above code example, we have two import statements and one export statement. Let’s start with the import statements. In typical import statements, we see the import keyword followed by curly braces. Inside those braces is a list of items being imported.
The first one is importing something from the Angular library. That library will be found in our node_modules directory. We can tell this because the string ‘@angular/core’ does not start with a period.
The next import statement, on the other hand, DOES start with a period. That means it’s a path. If we follow that path, we will arrive at the location of the file we’re trying to import from. Here, the file will be named hero.ts (the implicit ts extension is configured elsewhere), and that file will be exporting a Hero class.
That brings us to our export statement down on line 7. This line tells our file the HeroFormComponent is being exported, which allows it to be imported by other files. An identical line will be in the Hero.ts file exporting a class named “Hero”.
This is how we can export classes to be consumed by other files with import statements.
That’s it. If you can put together your imports and exports by following the above pattern, you’re set.
Do you want to be ahead of the curve on topics like ECMAScript 6?
“Hit it out of the ballpark!” – Ed Gorski
“It was a valuable experience.” – Project Engineer, ExxonMobil
“I’m recommending this to my colleagues.” – Paul Kavanagh
“I highly recommend this course to everyone” – Yoan Pumar