如何在我的Angular項目中使用第三方JS模塊？

我目前正在開發一個Angular（Angular 4.2.5）項目，並且已經能夠添加一些第三方模塊。但是，在大多數情況下，如果第三方模塊要求我包含腳本（如.js文件），則必須將其添加到我的index.html文件中。如何在我的Angular項目中使用第三方JS模塊？

例如，這是在我的index.html的引導：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

這也對我的CSS文件的情況下，但最近發現，我可以將它們導入到我的style.css。下面是該文件中對自舉什麼存在的例子還有：

@import '~bootstrap/dist/css/bootstrap.min.css';

現在，當我看網上，我看到，我應該能夠在路徑問題添加到腳本到我的角cli.json文件，但每次我這樣做，第三方組件都會失敗。只有當我將該組件的[script]標籤添加到index.html中時，它才能正常工作。

我已經嘗試了幾個在線指南，但似乎沒有工作。我敢肯定，我錯過了一些小設置的地方，以確保我使用angular-cli.json路徑列出，但我似乎無法找到它。

事件的一些細節你需要它：

@角/ CLI：1.2.0
節點：6.10.0
操作系統：Win32的64
@角/動畫： 4.2.5
@角/共同：4.2.5
@角/編譯器：4.2.5
@角/芯：4.2.5
@角/形式：4.2.5
@角/ HTTP：4.2.5
@角/材料：2.0.0-beta.7
@角/平臺的瀏覽器：4.2.5
@角/平臺的瀏覽器的動態：4.2.5
@角/路由器：4.2.5
@角/編譯-CLI：4.2.5

[編輯07/08/2017] 爲了清楚起見，我在我的angular-cli.json中有以下內容，但它仍然不起作用，除非將它包含在我的index.html中。

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "ang2-crm", 
     "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.css", 
     "../node_modules/font-awesome/css/font-awesome.css", 
     "styles.css" 
     ], 
     "scripts": [ 
     "../node_modules/bootstrap/dist/bootstrap.min.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ],

來源

2017-07-07 CSharpNewb

https://github.com/angular/angular-cli/wiki/stories-third-party-lib –

我沒有看到這個教程，但一直得到有關。方法（）語句錯誤。我明天再試一次，看看它是否有效。 – CSharpNewb

您可以使用鏈接通過styles.css或index.html導入它們。此外，您可以在scripts: []

來源

2017-07-07 19:37:31 Moshe

我不打擾它在index.html，但另一個問題是，我不能指向我的node_modules文件夾，我不得不從CDN（我不喜歡做，如果可能的話）得到它。 – CSharpNewb

好吧，你在錢上打了它..如果你喜歡使用鏈接標籤的html方式，你不能指向「node_modules」，因爲它是在你的開發環境中。如果你仍然想使用鏈接標籤但不使用cdn，你可以下載它並在本地指向它（在/ lib也許。）使用CDN是首選，因爲你總是可以快速連接它。您可以在腳本下的angular-cli.json中指向node_modules文件夾，該文件夾始終保持最新狀態，無需維護;假設你保持你的package.json是最新的。 – Moshe

謝謝Moshe，我現在要用CDN。我做了某種方式讓angular-cli.json中的指針能夠工作，但是現在當我將它與angular-cli.json腳本區域中的引用進行比較時，我開始出現奇怪的行爲。我不打算修復它，因爲你提出了CDN是首選的事實。 – CSharpNewb

導入您的角cli.json腳本可以添加所有的腳本在腳本陣列.angular-cli.jaon和CSS文件中的樣式排列。

例如，如果你想添加jquery.min.js。： -

安裝jquery的包通過npm install jquery --save
然後在腳本陣列添加條目： -

腳本：[../節點模塊/ jquery的/ DIST/jquery.min.js]

來源

2017-07-07 22:36:42

這是我正在嘗試做的，但在腳本數組下輸入angular-cli.json不起作用。我會修改我的帖子以顯示看起來像什麼。 – CSharpNewb

爲了引導js工作，我們應該在引導js之前添加jquery js。所以請在引導入口之前在腳本數組中添加jquery.min.js條目。 –

如何在我的Angular項目中使用第三方JS模塊？

回答

相關問題