For details, refer to third-party libraries in Angular-Cli and third-party libraries in angular-cli.

For details, refer to third-party libraries in Angular-Cli and third-party libraries in angular-cli.

Recently I have been studying angular (AngularJS 2) and used angular-cli to create a project based on the tutorial. However, I encountered a problem when adding JQuery and Bootstrap third-party libraries...

Preliminary Test

My initial idea is to directly write the relative token to index.html, as shown below:

 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" /><script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"/><script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"/> 

Rangoose... Not so good. the browser will capture the packet and the request will be displayed.

 http://localhost:4200/node_modules/juqery/dist/jquery.min.jsThe Error 404 is returned, and bootstrap is the same. The path is incorrect. The directory structure of my project is as follows:

 angular-form/ |- src/ | |- app/ | |- index.html | ... |- node_modules | |- jquery/ | |- bootstrap/ | ... 

The root directory of the website issrcDirectory,

Therefore, you cannot obtainnode_modulesThe files under the directory are also reasonable...

A different path

After a mess of searching... found that you can/.angular-cli.jsonConfigure Script Reference in the file,

Configure the script to be added under app. scripts, and configure the style file to be added under app. styles:

 "app": [ {  ...  "styles": [   "node_modules/bootstrap/dist/css/bootstrap.min.css"  ],  "scripts": [   "node_modules/bootstrap/dist/css/bootstrap.min.css",   "node_modules/bootstrap/dist/css/bootstrap.min.css"  ],  ... }] 

When you start the website again, the following problem occurs:

 ERROR in multi script-loader!./src/~/jquery/dist/jquery.min.js script-loader!./src/~/bootstrap/dist/js/bootstrap.min.jsModule not found: Error: Can't resolve 'E:\Code\JavaScript\angular2\angular-forms\src\node_modules\jquery\dist\jquery.min.js' in 'E:\Code\JavaScript\angular2\angular-forms' @ multi script-loader!./src/~/jquery/dist/jquery.min.js script-loader!./src/~/bootstrap/dist/js/bootstrap.min.js 

We can see that when loading js scripts, we are looking for the node_modules directory under the src/directory, so loading fails. This means that the path configured in the angular-cli.json file is relative to the path to the website root directory, and then make the following changes:

 "app": [ {  ...  "styles": [   "../node_modules/bootstrap/dist/css/bootstrap.min.css"  ],  "scripts": [   "../node_modules/bootstrap/dist/css/bootstrap.min.css",   "../node_modules/bootstrap/dist/css/bootstrap.min.css"  ],  ... }] 

Run the website again and load it successfully ~~~

Time travel

Later I learned that the angular-cli project uses webpack to package modules.scriptsAndstylesWill be packagedscripts.bundle.js Andstyles.bundle.jsLoad the file to the front-end page, and then you can use these third-party Libraries normally ~~~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.