角庫作爲與webpack的依賴關係

我有一個Angular組件，我希望可以通過其他項目將其導入爲依賴項。由於某些原因，我不能使用npm，我使用git作爲私有存儲庫。角庫作爲與webpack的依賴關係

目前我正在用一個真正的虛擬組件進行一些測試，因此在開發組件的項目中，我使用webpack生成js文件，因此我的/ dist文件夾具有類似這樣的內容：

dummy-component.js 
package.json

內部虛擬 - component.js我有捆綁的文件，它們基本上

dummy.module.ts 
/dummy 
    dummy.component.ts 
    dummy.component.scss 
    dummy.component.html

所以這個內容/ DIST文件由不同的項目作爲推進到一個dummy-dist倉庫和進口依賴使用

"my-dummy-component": "git+https://.../_git/dummy-dist"

而且這很好地導入到我的/ node_modules文件夾（即，js文件和package.json）中。

然後我嘗試在我的app.module.ts使用它，如

... 
import { DummyModule } from 'my-dummy-component'; 
... 
@NgModule({ 
    imports: [ 
    ... 
    DummyModule 
    ], 
...

但是，當我嘗試啓動這個項目，我從存在的WebPack

ERROR in ./src/app/app.module.ts 
(13,37): error TS2307: Cannot find module 'my-dummy-component'.

得到一個錯誤在我的node_modules文件夾中，所以我猜我缺少一些其他的東西。它是什麼？我試圖在導出模塊的/ node_modules裏面使用index.js，但沒有運氣。

任何想法？謝謝。

編輯：在閱讀由@Pavlo提供的第一個鏈接後，我設法生成了現在的定義類型。現在我的/ DIST文件夾的內容是

dist/ 
    dist/ 
    dummy/ 
     dummy.component.d.ts 
    dummy.module.d.ts 
    dummy.bundle.js 
    dummy.bundle.js.map 
    package.json

而且在我的package.json

"name": "dummy", 
    "version": "0.0.0", 
    "main": "dummy.bundle.js", 
    "module": "dummy.bundle.js", 
    "types": "dummy.module.d.ts", 
    "peerDependencies": { 
     .. 
    }, 
    "private": true 
    }

現在的WebPack工作正常，但是當我加載頁面我在控制檯得到一個錯誤

Unexpected value 'undefined' imported by the module 'AppModule' 
    at Error.ZoneAwareError

來源

2017-10-17 David

可以上傳你的''我的虛擬組件''的地方？什麼是打包它的webpack配置？ –

創建可重用的Angular庫並不像使用Webpack構建Angular應用程序那麼簡單。您需要以特殊方式構建它以保留ES2015模塊（導入/導出語句），創建TypeScript定義文件並對組件進行AOT編譯。

請參閱有關詳情以下指南對如何做到這一點正是：http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/

此外，您還可以用它來開始使用的基本設置的模板，像這樣的：https://github.com/jvandemo/generator-angular2-library

來源

2017-10-17 13:32:51

謝謝@Pavlo，我知道這是不一樣的。我知道所有這些都與ngs一起工作，只是意識到我需要某種捆綁器來處理外部html模板和scss文件，所以我使用了webpack，但是這種類型的東西只會產生一個捆綁器，沒有metadata.json或什麼 – David

角庫作爲與webpack的依賴關係

回答

相關問題