如何在角度6项目中添加引导程序？ [英] How to add bootstrap in angular 6 project?

问题描述

app.component.html

index.html

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

angular.json文件就像这样 angular.json文件

解决方案

v6不是2

Angular v6向前

角度6以后的CLI项目将使用 angular.json 而不是 .angular-cli.json 用于构建和项目配置。

每个CLI工作区都有项目，每个项目都有目标，每个目标都可以有配置。 Google文档

 。 {
projects：{
my-project-name：{
projectType：application，
architect：{
build ：{
配置：{
production：{}，
demo：{}，
staging：{}，
} 
}，
serve：{}，
extract-i18n：{}，
test：{}，
} 
 }，
my-project-name-e2e：{} 
}，
} 
  

选项-1

执行 npm install bootstrap @ 4 jquery --save >
Bootstrap 的JavaScript部分依赖于 jQuery 。因此，您还需要 jQuery JavaScript 库文件。



在您的angular.json中，将文件路径添加到构建目标

下的样式和脚本数组注意：
在v6之前，Angular CLI项目配置存储在< PATH_TO_PROJECT> /。angular-cli.json中。从v6开始，文件的位置变为 angular.json。由于不再有一个前导点，因此该文件不再默认隐藏并处于同一级别。

这也意味着angular.json中的文件路径不应该包含前导点和斜线。

lockquote

即，您可以提供绝对路径而不是相对路径

在 .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> 元素以包含Bootstrap CSS文件

a < script> < script> 元素在包含正文部分底部的jQuery中包含Popper.js的元素
a < script>正文部分

a < script> 元素将引导JavaScript文件包含在正文部分的底部


 <！ doctype html> 
< html> 
< head> 
< meta charset =utf-8> 
< title> Angular< / title> 
< base href =/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< link rel =icontype =image / x-iconhref =favicon.ico> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cssintegrity =sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXm crossorigin = 匿名 > 
< / head> 
< body> 
< app-root>正在加载...< / app-root> 
< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous >< /脚本> 
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.jsintegrity =sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin =anonymous>< / script> 
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.jsintegrity =sha384 -JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYlcrossorigin =anonymous >< /脚本> 
< / body> 
< / html> 
  

选项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 
  

安装后将其导入到根模块中，并将其注册到 @ NgModule 进口数组

 从'@ ng-bootstrap / ng-bootstrap'导入{NgbModule} ; 
 @NgModule（{
声明：[AppComponent，...]，
 imports：[NgbModule.forRoot（），...]，
 bootstrap：[AppComponent] 
 $）
  

注意

ng-bootstrap 要求在您的项目中添加Bootstrap的4 css。你需要明确地安装它：

npm install bootstrap @ 4 --save
在angular.json中添加文件路径在构建目标

 样式 ：[
src / styles.css，
node_modules / bootstrap / dist / css / bootstrap.min.css
]，
  

app.component.html

index.html

app.component.ts I have tried to add styles dependency in angular.json package but showing that the module not found. adding two of the bootstrap files. here is the screenshot of both the files

the angular.json file is like this angular.json file

解决方案

You are using Angular v6 not 2

Angular v6 Onwards

CLI projects in angular 6 onwards will be using angular.json instead of .angular-cli.json for build and project configuration.

Each CLI workspace has projects, each project has targets, and each target can have configurations.Docs

. {
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

OPTION-1
execute npm install bootstrap@4 jquery --save
The JavaScript parts of Bootstrap are dependent on jQuery. So you need the jQuery JavaScript library file too.

In your angular.json add the file paths to the styles and scripts array in under build target
NOTE: Before v6 the Angular CLI project configuration was stored in <PATH_TO_PROJECT>/.angular-cli.json. As of v6 the location of the file changed to angular.json. Since there is no longer a leading dot, the file is no longer hidden by default and is on the same level.
which also means that file paths in angular.json should not contain leading dots and slash

i.e you can provide an absolute path instead of a relative path

In .angular-cli.json file Path was "../node_modules/"
In angular.json it is "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"]
          },

OPTION 2
Add files from CDN (Content Delivery Network) to your project CDN LINK

Open file src/index.html and insert

the <link> element at the end of the head section to include the Bootstrap CSS file
a <script> element to include jQuery at the bottom of the body section
a <script> element to include Popper.js at the bottom of the body section
a <script> element to include the Bootstrap JavaScript file at the bottom of the body section

  <!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
Execute npm install bootstrap In src/styles.css and add the following line:

@import "~bootstrap/dist/css/bootstrap.css";

OPTION-4
ng-bootstrap It contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript

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

After Installation import it in your root module and register it in @NgModule imports` array

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

NOTE
ng-bootstrap requires Bootstrap's 4 css to be added in your project. you need to Install it explicitly via:
npm install bootstrap@4 --save In your angular.json add the file paths to the styles array in under build target

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

这篇关于如何在角度6项目中添加引导程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！