Angular 2，角度4，爲多個項目製作自己的組件庫

Question

我用angular-cli（4）製作了組件（帶有關聯的模塊），並且希望在其他angular-cli項目中使用它。

例如：儀表板組件，併網...

問題1.誰能告訴我一個簡單的方法，我怎麼可以準備/重用我的組件/模塊（與角CLI製造）？

之後我可以用NPM發佈它。

Answer 1

重新使用成套組件和模塊的最好方法是簡單地製作鍋爐板模板。一旦添加了「儀表板」和「帳戶」和「導航」結構，就像複製粘貼項目以供日後使用一樣簡單。隨意刪除node_modules文件夾（和dist文件夾，如果存在）來節省一些空間。

需要注意的事項，當你複製/粘貼作爲樣板用於新項目：

• 您將要運行npm install第一件事情讓你node_modules內置
• 在你package.json文件您將要重命名該項目（非常頂部的文件）
• 您可以初始化任何git回購w/o任何額外的努力。

如果要將模塊和/或組件集添加到其他項目中，您必須手動將它們複製/粘貼到新項目中，然後將它們導入到正確的位置。假設您具有Angular應用程序結構的基本知識，這是一個簡單的過程。

Answer 2

我剛剛推了一個起動器Angular Library。你可以在這裏找到它：https://github.com/arunredhu/Angular-library-starter

Answer 3

我想在我自己的項目中重複使用它。

我的指令：

混帳克隆https://github.com/arunredhu/Angular-library-starter.git

1. NPM安裝
2. NPM運行建立

3. 複製DIST夾在我的項目文件夾（稍後將通過NPM安裝）

4. in .angular-cli以.json我添加了 「腳本」：在我shared.module.ts [ 「./external_libraries/angular-library-starter/src/core-ui.module.js」]

5. 添加一行：

   從 './../../../external_libraries/angular-library-starter/dist/src/core-ui.module'導入{CoreUIModule};

將CoreUIModule添加到導入。

將CoreUIModule添加到shared.module的導出。TS

在x.component.html 我添加

：<應用報頭> < /應用報頭>

納克服務

我得到這個錯誤：

WARNING in ./src/external_libraries/angular-library-starter/dist/src/core-ui.module.js 
(Emitted value instead of an instance of Error) Cannot find source file '../../src/core-ui.module.ts': Error: Can't resolve '../../src/core-ui.module.ts' in 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\sr 
c\external_libraries\angular-library-starter\dist\src' 
@ ./src/app/modules/shared/shared.module.ts 84:0-109 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts 

WARNING in ./src/external_libraries/angular-library-starter/dist/src/header/header.component.js 
(Emitted value instead of an instance of Error) Cannot find source file '../../../src/header/header.component.ts': Error: Can't resolve '../../../src/header/header.component.ts' in 'C:\Users\x\Documents\Visual Studio 2015\P 
/header/header.component.ts': Error: Can't resolve '../../../src/header/header.compon 
ent.ts' in 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\src\ex 
ternal_libraries\angular-library-starter\dist\src\header' 
@ ./src/external_libraries/angular-library-starter/dist/src/core-ui.module.js 2:0-63 

我做錯了什麼？

如果我只有用戶指令1，2，3，4，我得到這個錯誤：

Module not found: Error: Can't resolve 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\src\external_libraries\angular-library-starter\src\core-ui.module.js' in 'C:\Users\x\Documents\Visual Studio 2015\Pr 
ojects\web\node_modules\@angular\cli\models\webpack-configs'