First, modules are introduced in two ways:
1. Relative import:
import Entry from "./components/Entry"; import { DefaultHeaders } from "../constants/http"; import "/mod";
Relative import resolves relative to the file it was imported into and cannot be resolved to an external module declaration. You should use relative import for your own modules to ensure their relative location at runtime.
2. Non-relative import:
import * as $ from "jQuery"; import { Component } from "@angular/core";
Imports of non-relative modules can be resolved relative to baseUrl (configured in tsconfig.json, see https://www.tslang.cn/docs/handbook/module-resolution.html) or through the path mappings described below.They can also be interpreted as external module sounds, using non-relative paths to import your external dependencies or your project's public libraries (a project created after Angular8 defaults to a workspace with a collection of multiple projects, which is more accessible between projects).
When we import, how does Angualr2.x/Typescript resolve to find our module?
For example, with a relative import, an import statement import {B} from'. /module B'in / root/src/module A.ts locates'. /module B' as follows:
/root/src/moduleB.ts /root/src/moduleB.tsx /root/src/moduleB.d.ts /root/src/moduleB/package.json (If specified"types"attribute) /root/src/moduleB/index.ts /root/src/moduleB/index.tsx /root/src/moduleB/index.d.ts
We can see that the declaration file (.d.ts) of moduleB-"moduleB is first found in the same level directory, and if none is found then the moduleB directory under the same level directory, the packages.json-" index-"index declaration file under it, of course, has an export statement about the b module in these files.
Another non-relative import, import {B} from'moduleB', locates'. /moduleB'in/root/src/moduleA.ts using the following procedure:
/root/src/node_modules/moduleB.ts /root/src/node_modules/moduleB.tsx /root/src/node_modules/moduleB.d.ts /root/src/node_modules/moduleB/package.json (If specified"types"attribute) /root/src/node_modules/moduleB/index.ts /root/src/node_modules/moduleB/index.tsx /root/src/node_modules/moduleB/index.d.ts /root/node_modules/moduleB.ts /root/node_modules/moduleB.tsx /root/node_modules/moduleB.d.ts /root/node_modules/moduleB/package.json (If specified"types"attribute) /root/node_modules/moduleB/index.ts /root/node_modules/moduleB/index.tsx /root/node_modules/moduleB/index.d.ts /node_modules/moduleB.ts /node_modules/moduleB.tsx /node_modules/moduleB.d.ts /node_modules/moduleB/package.json (If specified"types"attribute) /node_modules/moduleB/index.ts /node_modules/moduleB/index.tsx /node_modules/moduleB/index.d.ts
Note here that they are searched step by step on the web and are all located in node_modules, which is the package management directory of node npm.
Let me take a look at a specific example to implement different ways of importing public libraries:
We have a Hello project with an src below, a service below, and a Hello.ts below.
Then there is a common library, Common and Hello directory siblings, a service below, and a Common.ts below (Common has two modules, Common and Common1 export ed in Common)
There are several ways we need to import the Common Library in Hello.ts
The original way:
import { Common, Common1 } from '../../../Common/services/Common';
If you define an index.ts under Common with export * from'. /services/Common'; you can use the following statement
import { Common, Common1 } from '../../../Common';
However, there is a problem with this relative import of Library files. If this Common folder location is moved, then imported libraries will need to be changed because relative references are based on the location of the currently referenced file, so let's consider non-relative imports, as follows:
import {Common, Common1} from 'common/services/Common';
import {Common, Common1} from 'common';
In this way, you need to configure the paths directory in tsconfig.ts to let the program know where common is going to look for it
compilerOptions: { ... "baseUrl": "./", //Configure baseUrl to be the location of tsconfig.ts "paths": { "common": [ "../common" ], "common/*": [ "../common/*" // The mapping here is relative to "baseUrl" ] } }