需求是，需要在本地创建一个 angular 的 library，作为公共模块， 然后在其他application中引用它

• 创建angular公共library

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib

• 在common library 的项目里的package.json里需要在dependencies引用第三方包的情况下必须在， ng-package.json里加白名单，要不然编译会报错,然后在做npm link的时候 该common-libraries下会生产node_modules,  或者直接在devDependencies下加，在npm link的时候 不会报错， 但是要在tsconfig.json里加上 对应的paths.

1. package.json

   {"name": "ng-libraries","version": "0.0.1","peerDependencies": {"@angular/animations": "~9.1.12","@angular/common": "~9.1.12","@angular/compiler": "~9.1.12","@angular/core": "~9.1.12","@angular/forms": "~9.1.12","@angular/platform-browser": "~9.1.12","@angular/platform-browser-dynamic": "~9.1.12","@angular/router": "~9.1.12"},"dependencies": {"ag-grid-angular": "^23.2.1","ag-grid-community": "^23.2.1","ag-grid-enterprise": "^23.2.1","bignumber.js": "^9.0.0","date-fns": "^2.0.1","primeng": "^9.0.0"},"devDependencies": {"@angular-devkit/build-angular": "~0.901.12","@angular/cli": "~9.1.12","@angular/compiler-cli": "~9.1.12","@angular/language-service": "~9.1.12","@babel/compat-data": "7.8.0","@types/jasmine": "~2.8.8","@types/jasminewd2": "~2.0.3","@types/node": "^12.11.1","codelyzer": "^5.1.2","jasmine-core": "~2.99.1","jasmine-spec-reporter": "~4.2.1","karma": "~4.0.0","karma-chrome-launcher": "~2.2.0","karma-coverage": "^1.1.2","karma-coverage-istanbul-reporter": "~2.0.1","karma-jasmine": "^2.0.0","karma-jasmine-html-reporter": "^1.3.1","karma-teamcity-reporter": "^1.1.0","protractor": "~5.4.0","ts-node": "~7.0.0","tslint": "~5.11.0","typescript": "~3.8.3"}
   }
   

   2. ng-package.json

   {"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../dist/ng-libraries","lib": {"entryFile": "src/public-api.ts"},"whitelistedNonPeerDependencies": ["ag-grid-angular","ag-grid-community","ag-grid-enterprise","bignumber.js","date-fns","primeng"]
   }

    

• 编译该项目, 进入该项目的目录，后build

ng build --prod

• 进入编译后的dist目录, 后 link

npm link

• 去公共目录(AppData)查看， 会看到如图
• 去实际项目所在的目录,

npm link ng-libraries

• 去到angular.json 将添加节点："preserveSymlinks": true,

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"axe-viewer": {"projectType": "application","schematics": {"@schematics/angular:component": {"style": "scss"}},"root": "","sourceRoot": "src","prefix": "app","architect": {"build": {"preserveSymlinks": true,

• 去到tsconfig.json里 添加 "paths": {
        "@angular/*": [
           "./node_modules/@angular/*"
        ],
     }, 要不然运行的时候会报一个奇怪的错
• 如果运行时继续有报错，则把相对应的 module继续加到这个paths里

{"compileOnSave": false,"compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"downlevelIteration": true,"experimentalDecorators": true,"module": "esnext","moduleResolution": "node","importHelpers": true,"target": "es2015","typeRoots": ["node_modules/@types"],"lib": ["es2018","dom"],"resolveJsonModule": true,"paths": {"@angular/*": ["./node_modules/@angular/*"],}},"angularCompilerOptions": {"fullTemplateTypeCheck": true,"strictInjectionParameters": true}

• debug

ng serve with parameter –vendorSourceMap  

ng serve --vendorSourceMap

Then, in Chrome, find the source path, you can debug the code