Angular Basics: Importing Multiple Classes with the Same Name

Import is static, and so The static import statement is used to import read-only live bindings which are exported by another module.

Imported modules are in strict mode whether you declare them as such or not. The import statement cannot be used in embedded scripts unless such script has a type="module". Bindings imported are called live bindings because they are updated by the module that exported the binding.

There is also a function-like dynamic import(), which does not require scripts of type="module" Backward compatibility can be ensured using the attribute nomodule on the <script> tag.

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

Explanation

• defaultExport
  Name that will refer to the default export from the module.
• module-name
  The module to import from. This is often a relative or absolute path name to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double-quoted Strings are allowed.
• name
  Name of the module object that will be used as a kind of namespace when referring to the imports.
• exportN
  Name of the exports to be imported.
• aliasN
  Names that will refer to the named imports.

1. Import a single export from a module

import {myExport} from '/modules/my-module.ts';

2. Import an entire module’s contents

import * as myModule from '/modules/my-module.d.ts';

3. Import multiple exports from module

import {foo, bar} from '/modules/my-module.ts';

4. Import an export with a more convenient alias

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

5. Rename multiple exports during import

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

6. Import a module for its side effects only

import '/modules/my-module.js';

Hope you find your answer with a good explanation and with some more knowledge about import. Please comment if it works for you or you find this article helpful.

References: 

Import statement details — Mozilla Developers

Cover Image by Author | BeingCoders - Learn angular basics for free.