如何在使用angular-cli時添加第三方庫？

我想嘗試使用angular-cli創建Angular 2應用程序（https://github.com/angular/angular-cli），然後使用ng2素材（https://github.com/justindujardin/ng2-material）獲取UI組件。但我只是不明白如何/在哪裏必須包含ng2素材庫才能使用它。如何在使用angular-cli時添加第三方庫？

我創建了一個項目ng new myproject，然後我啓動了服務器ng serve，並打開了正常工作的網頁。下一步，我用npm install ng2-material --save安裝了ng2素材。然後我將MATERIAL_PROVIDERS添加到角度的引導程序中，如https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts所示。

這會導致網絡瀏覽器中出現錯誤消息GET http://localhost:4200/ng2-material/all 404 (Not Found)，我無法弄清楚如何擺脫它。

angular-cli似乎正在做一些事情來創建一個dist-文件夾，其中index.html中使用的一些節點模塊最終進入，但我看不到在哪裏或如何配置。

來源

2016-02-29 zabbarob

轉到'your_project/src/index.html'，那裏有SystemJS配置。 –

[EDIT 29/09/2016]現在角-CLI使用的WebPack異system.js，此答案不再有很多意義。在angular-cli wiki上檢查頁面'3d party lib installation'和'global lib installation'。

[編輯10/05/2016]這現在詳細描述在angular cli wiki。

這爲我工作：

在餘燼-CLI-build.js，您可以添加依賴於vendorNpmFiles，例如

module.exports = function (defaults) { 
    var app = new Angular2App(defaults, { 
     vendorNpmFiles: [ 
      'a2-in-memory-web-api/web-api.js' 
     ] 
    }); 
    return app.toTree(); 
}

（其中A2，內存，網絡API/WEB-api.js是我node_modules文件夾）

在的index.html你加入以下行：

<script src="vendor/a2-in-memory-web-api/web-api.js"></script>

最後重新啓動服務器。

沒有用角度材料測試過，但你明白了。

來源

2016-03-09 19:27:00

Angular CLI wiki中的新描述爲我工作。感謝您添加鏈接。 – zabbarob

你怎麼知道什麼文件包含在vendorNpmFiles中？某些軟件包在其模塊中有許多js文件 –

可以使用通配符將它們全部包括在內 –

嘗試在index.html這樣配置SystemJS：

System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     }, 
     'node_modules/ng2-material': { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    paths: { 
     'ng2-material/all': 'node_modules/ng2-material/all' 
    } 
});

來源

2016-02-29 11:27:03

謝謝，但它不起作用：'angular2-polyfills.js：1243錯誤：XHR錯誤（404未找到）加載http：// localhost：4200/node_modules/ng2-material/all.js（...）區域。運行@ angular2-polyfills.js：1243'問題是，當使用'ng serve'啓動dev服務器時，文件不是從項目的根目錄，而是從生成的'dist'文件夾中提供。但是，數據以某種方式被緩存。從'dist'添加或刪除文件不會改變任何內容，我不知道如何告訴angular-cli複製ng2素材文件。 – zabbarob

PS：解決方法是將node_module-files複製到src文件夾「cp -r node_modules/ng2-material src/node_modules/ng2-material」，這使angular-cli將文件複製爲項目源文件的一部分。然而，當SystemJS加載ng2-material模塊時會出現錯誤消息「Uncaught ReferenceError：require is not defined」。 – zabbarob

PPS：通過在'System.config'的''node_module/ng2-material''中將'format：'寄存器''更改爲'format：'cjs''，可以防止「未捕獲的ReferenceError：require未被定義」部分。但是然後'angular2-polyfills.js'在停止服務器並重新啓動它（'ng serve'）之後開始吐出錯誤'Can not read property'getOptional'undefined' – zabbarob

如何在使用angular-cli時添加第三方庫？

回答

相關問題