我目前正在开发一个Angular(Angular 4.2.5)项目,并且能够添加一些第三方模块 . 但是,在大多数情况下,如果第三方模块要求我包含脚本(如.js文件),我必须将其添加到我的index.html文件中 .
例如,这是我的index.html for Bootstrap中的内容:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
这也是我的CSS文件的情况,但最近发现我可以将它们导入我的style.css . 以下是该文件中存在的bootstrap内容的示例:
@import '~bootstrap/dist/css/bootstrap.min.css';
现在,当我查看在线时,我发现我应该能够将相关脚本的路径添加到我的angular-cli.json文件中,但每次我这样做时,第三方组件都会失败 . 只有当我将该组件的[script]标签添加到index.html中时,它才有效 .
我已经尝试了几个在线指南,但似乎没有工作 . 我确定我在某个地方缺少一些小设置,以确保我使用的是angular-cli.json路径,但我似乎无法找到它 .
您需要的一些细节:
-
@ angular / cli:1.2.0
-
node:6.10.0
-
os:win32 x64
-
@ angular / animations:4.2.5
-
@ angular / common:4.2.5
-
@ angular / compiler:4.2.5
-
@ angular / core:4.2.5
-
@ angular / forms:4.2.5
-
@ angular / http:4.2.5
-
@ angular / material:2.0.0-beta.7
-
@ angular / platform-browser:4.2.5
-
@ angular / platform-browser-dynamic:4.2.5
-
@ angular / router:4.2.5
-
@ angular / compiler-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"
}
}
],
2 回答
您可以使用链接通过styles.css或index.html导入它们 . 此外,您可以在
scripts: []
下的angular-cli.json中导入脚本您可以在.angular-cli.jaon中的脚本数组中添加所有脚本,在样式数组中添加css文件 .
例如,如果要添加jquery.min.js.:-
按
npm install jquery --save
安装jquery包然后在脚本数组中添加条目: -
脚本:[../节点模块/ jquery的/ DIST / jquery.min.js]