Recently I was learning angular (AngularJS 2) and used angular-cli to create new projects according to the tutorial. However, I encountered problems when adding JQuery and Bootstrap third-party libraries...
First trial
My initial idea was to write the relative path directly, as follows:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/" rel="external nofollow" /> <script type="text/javascript" src="../node_modules/jquery/dist/"/> <script type="text/javascript" src="../node_modules/bootstrap/dist/js/"/>
Yes goose. . . Not working, the browser will display the request
http://localhost:4200/node_modules/juqery/dist/Returning a 404 error, bootstrap is the same problem. It is obviously the path here that is incorrect. My project directory structure is as follows:
angular-form/ |- src/ | |- app/ | |- | ... |- node_modules | |- jquery/ | |- bootstrap/ | ...
Among them, the root directory of the website runtime issrcTable of contents,
So I can't get the same directory asnode_modulesThe files in the directory are reasonable...
Find a different path
After a messy search... I found it and could/.Configure script references in the file,
Under it, configure the scripts to be added, and under it, configure the style files to be added:
"app": [
{
...
"styles": [
"node_modules/bootstrap/dist/css/"
],
"scripts": [
"node_modules/bootstrap/dist/css/",
"node_modules/bootstrap/dist/css/"
],
...
}
]
I started the website again, but couldn't even compile it... The following problem occurred:
ERROR in multi script-loader!./src/~/jquery/dist/ script-loader!./src/~/bootstrap/dist/js/ Module not found: Error: Can't resolve 'E:\Code\JavaScript\angular2\angular-forms\src\node_modules\jquery\dist\' in 'E:\Code\JavaScript\angular2\angular-forms' @ multi script-loader!./src/~/jquery/dist/ script-loader!./src/~/bootstrap/dist/js/
It can be seen that when loading the js script here, we are looking for the node_modules directory under the src/ directory, so the loading fails. This means that the path configured in the file is relative to the path of the website root directory, and then the following changes are made:
"app": [
{
...
"styles": [
"../node_modules/bootstrap/dist/css/"
],
"scripts": [
"../node_modules/bootstrap/dist/css/",
"../node_modules/bootstrap/dist/css/"
],
...
}
]
Run the website again and it loaded successfully~~~
Back to the road
Later I learned that the angular-cli project uses webpack to package the module, which we configured herescriptsandstylesWill be packaged into andThe file is loaded to the foreground page, and then these third-party libraries can be used normally~~~
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.