Angular2.x / Typescript introduced parsing module

First, when the modules are introduced in two ways:
1, relative introduced:

import Entry from "./components/Entry";
import { DefaultHeaders } from "../constants/http";
import "/mod";

When parsing relative imports relative to import its files, and can not be resolved to an external module statement, you should use relative imports to write your own modules, so that they can ensure the relative position at runtime.

2, the non-opposing introduced:

import * as $ from "jQuery";
import { Component } from "@angular/core";

Introducing the non-opposing block with respect to the baseUrl (arranged in the tsconfig.json, see https://www.tslang.cn/docs/handbook/module-resolution.html) or by following the path map will be mentioned resolution. They can also be resolved to an external sound module, use a non-relative path to import your public libraries or external dependencies of your project (project to create a default project is more than a collection of workspace after Angular8, between projects can be more friendly visit).

When we import, Angualr2.x / Typescript find is how to resolve our module it?

Introducing a relatively example, there is a statement import {b} from introducing "./moduleB" in /root/src/moduleA.ts, the following process will be located "./moduleB":

/root/src/moduleB.ts
/root/src/moduleB.tsx
/root/src/moduleB.d.ts
/root/src/moduleB/package.json (如果指定了"types"属性)
/root/src/moduleB/index.ts
/root/src/moduleB/index.tsx
/root/src/moduleB/index.d.ts

We can see that the first will find moduleB- "moduleB statement file (.d.ts) at the same level directory, assuming no one has found it will find moduleB directory under the same level directory, under the packages.json- "index -" index manifest file, of course, these files have a statement on export module b

Also introduced into a non-opposing, import {b} from "moduleB" in /root/src/moduleA.ts, the following process will be located "./moduleB":

/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 (如果指定了"types"属性)
/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 (如果指定了"types"属性)
/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 (如果指定了"types"属性)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts

Note here that will progressively find online, and are in node_modules inside, this directory is the directory node npm package management.

Now I look at the public library into a concrete example to achieve different ways:
We have a project Hello, following a src, following a services, then following a Hello.ts;
then there is a public library and Common Hello peer directory, here a Services, and then following a Common.ts (Common Common, and the export of two modules Common1)
we need to import Common library there are several ways Hello.ts

The most primitive way:
import { Common, Common1 } from '../../../Common/services/Common';
If there is defined a index.ts export * from './services/Common' in the Common; you can use the following statement
import { Common, Common1 } from '../../../Common';

But the way this relatively imported libraries have a problem, if the Common folder position, then import through it need to be changed accordingly, because the relative reference is to the current location based on the referenced file, so we have to consider introducing non-opposing follows:
Import the Common {,} Common1 from 'common / Services / the Common';
Import the Common {,} Common1 from 'common';
this way tsconfig.ts configure directory paths, so that the program knows common where to find

compilerOptions: {
        ...
    "baseUrl": "./", //配置baseUrl为tsconfig.ts的位置
        "paths": {     
      "common": [
        "../common"
      ],
      "common/*": [
        "../common/*" // 此处映射是相对于"baseUrl"
      ]
    }
}