nik*_*ndh 34 html javascript angular-ui-bootstrap angular
app.component.ts 我试图在angular.json包中添加样式依赖项,但显示找不到该模块.添加两个引导程序文件.这是两个文件的屏幕截图
angular.json文件就像这个angular.json文件
Vik*_*kas 130
您使用的是Angular v6而不是2
Angular v6向前
将使用角度为6以上的CLI项目 angular.json而不是.angular-cli.json用于构建和项目配置.
每个CLI工作空间都有项目,每个项目都有目标,每个目标都可以有配置.文件
. {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
OPTION-1
执行依赖npm install bootstrap@4 jquery --save
的JavaScript部分.所以你也需要库文件.
在您的angular.json添加文件路径的样式和脚本数组下目标注:
之前V6的角度CLI项目配置存储在作为V6文件的位置变为由于不再有前导点时,默认情况下,文件不再隐藏,并且处于同一级别.
这也意味着angular.json中的文件路径不应包含前导点和斜杠 BootstrapjQueryjQuery JavaScript
build
<PATH_TO_PROJECT>/.angular-cli.json.angular.json.
即你可以提供绝对路径而不是相对路径
在.angular-cli.json文件路径中它是"../node_modules/"
在angular.json它"node_modules/"
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"]
},
选项2
将文件从CDN(内容分发网络)添加到项目CDN LINK
打开文件src/index.html并插入
的<link>在头部部分以包含引导CSS的端部元件文件
一个<script>元件包括jQuery的在主体部分的底部
一个<script>包括Popper.js在主体部分的底部元件
一个<script>元件以包括引导JavaScript文件在身体部分的底部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
OPTION 3
,可执行npm install bootstrap
在src/styles.css 添加以下行:
@import "~bootstrap/dist/css/bootstrap.css";
OPTION-4
ng-bootstrap它包含一组基于Bootstrap标记和CSS的原生Angular指令.因此,它不依赖于jQuery或Bootstrap的JavaScript
npm install --save @ng-bootstrap/ng-bootstrap
安装后将其导入根模块并将其注册到@NgModuleimports`数组中
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
注意
ng-bootstrap要求在项目中添加Bootstrap的4 css.您需要通过以下方式显式安装它:
npm install bootstrap@4 --save
在angular.json中,将文件路径添加到build目标下的styles数组中
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
小智 9
npm install --save bootstrap
之后,在项目的根文件夹内部angular.json(之前.angular-cli.json),找到样式并添加bootstrap css文件,如下所示:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
npm install bootstrap --save
并增加培训相关文件到angular.json文件的下style财产的CSS文件，并根据scripts对JS文件。
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
....
]
| 归档时间： |
|
| 查看次数： |
101200 次 |
| 最近记录： |