Fatal编程技术网
  • javascript/
  • Javascript 如何在angular 6项目中添加引导？

Javascript 如何在angular 6项目中添加引导？

javascript html angular

Javascript 如何在angular 6项目中添加引导？,javascript,html,angular,angular-ui-bootstrap,Javascript,Html,Angular,Angular Ui Bootstrap,我尝试在angular.json包中添加样式依赖项，但显示未找到该模块。添加两个引导文件。 这是两个文件的截图 angular.json文件如下所示 之后，在项目根文件夹中的angular.json（之前的.angular cli.json）中，查找样式并添加如下引导css文件： 角度6 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],

我尝试在
angular.json
包中添加样式依赖项，但显示未找到该模块。添加两个引导文件。 这是两个文件的截图

angular.json文件如下所示

之后，在项目根文件夹中的
angular.json
（之前的
.angular cli.json
）中，查找样式并添加如下引导css文件：

角度6

"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
],
角度7

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
],
并将相关文件添加到css文件的
style
属性下的
angular.json
文件中，以及JS文件的
scripts
下

 "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   ....
]
使用命令

npm install bootstrap --save
打开.angular.json旧（.angular-cli.json）文件查找“样式”添加引导css文件

"styles": [
       "src/styles.scss",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
对于角度版本11+ 配置

angular.json配置中的样式和脚本选项现在允许直接引用包：

前面：
“样式”：[“./node_modules/bootstrap/dist/css/bootstrap.css”]

之后：
“样式”：[“bootstrap/dist/css/bootstrap.css”]

角度版本10及以下 您使用的是角度v6而不是2 角度v6以后的车辆

angular 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": {}
  },
}
选项1
执行
npm安装bootstrap@4jquery--保存

Bootstrap
的JavaScript部分依赖于
jQuery
。因此，您也需要
jQuery
JavaScript
库文件。

在angular.json中，将文件路径添加到
build
target
注意： 在v6之前，Angular CLI项目配置存储在
/.Angular CLI.json中。
从v6开始，文件位置更改为
Angular.json。
由于不再有前导点，默认情况下该文件不再隐藏，并且处于同一级别。
这也意味着angular.json中的文件路径不应包含前导点和斜杠

i、 e您可以提供绝对路径而不是相对路径

在
.angular cli.json中
文件路径为
“./node\u modules/”

在
angular.json
中，它是
“node\u modules/”

选项2
将CDN（内容交付网络）中的文件添加到项目中

. {
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}
打开文件src/index.html并插入

head部分末尾的
元素，用于包含引导CSS文件
在正文部分底部包含jQuery的
元素
在主体部分底部包含Popper.js的
元素
在正文部分底部包含引导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>
安装后，将其导入根模块并在
@NgModule
imports`array中注册

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
注意
ng bootstrap
要求在项目中添加bootstrap的4个css。您需要通过：
npm安装bootstrap@4--保存
在angular.json中，将文件路径添加到
build
target

   "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
请务必重新启动您的服务器'ng serve | | npm start'向我们展示您的尝试。@Phil我怀疑这不是重复的，OP不知道他正在使用的角度版本，他提到了angular.json中使用的
angular.json
文件6@phil不，我只在其中使用angular 2，之前的angular-cli.json文件被重命名为angular.json。@Phil在添加jquery库和编译的java脚本并在app.component.css中导入bootstrap.min.css后启动，但容器类为不工作，但工作版本（angular cli）显示为6.0.0简单引导可以工作，但容器类引导不应该是这样创建没有代码的stackblitz我帮不了你你已经在
angular.json
中添加了引导你的
index.html
中的链接和脚本是多余的，看看它是否工作不要忘记重新启动“ng”serve'@Vikas欢迎您提出异议，但没有任何涉及jQuery的angular2+解决方案是“社区范围”可接受的。jQuery极大地干扰了angular2+处理DOM的方式，并造成了更多的麻烦。是否仍然需要
--save
？我想我在某个地方读到过，如果您使用的是npm>v5，那么它不是必需的。不，您仍然需要添加
--save
，以便根据我的知识更新
.package.json
。如果
--save
所做的只是向
package.json
添加一个依赖项，那么如果使用npm v5.6.0，我可以确认它不是必需的。刚刚在测试项目中确认：：-）哦，那太好了，如果是的话，我还没试过！！是的，但是像
--save dev
这样的其他选项和可选依赖项的另一个选项仍然需要显式标志。这是否自动包括其他内容，如引导网格等？对于较旧的特定版本：npm安装bootstrap@3.3.7--保存 
  <!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>

npm install --save @ng-bootstrap/ng-bootstrap

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})

   "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],