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

Question

提问by nikhil sugandh

app.component.html

应用程序组件.html

index.html

app.component.ts

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

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

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

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

Answer 1

回答by Vikas

You are using Angular v6 not 2

您使用的是 Angular v6 而不是 2

Angular v6 Onwards

Angular v6 以后

CLI projects in angular 6 onwards will be using angular.jsoninstead of .angular-cli.jsonfor build and project configuration.

angular 6 及更高版本的 CLI 项目将使用 angular.json而不是.angular-cli.json用于构建和项目配置。

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

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

. {
  "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 Bootstrapare dependent on jQuery. So you need the jQueryJavaScriptlibrary file too.

In your angular.json add the file paths to the styles and scripts array in under buildtarget
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

OPTION-1
执行npm install bootstrap@4 jquery --save
的 JavaScript 部分Bootstrap依赖于jQuery. 所以你也需要jQueryJavaScript库文件。

在您的 angular.json 中，将文件路径添加到build目标下的样式和脚本数组
注意：在 v6 之前，Angular CLI 项目配置存储在<PATH_TO_PROJECT>/.angular-cli.json.v6 中，文件的位置更改为angular.json.由于不再有前导点，文件不再默认隐藏并且处于同一级别。
这也意味着 angular.json 中的文件路径不应包含前导点和斜线

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

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

In .angular-cli.jsonfile Path was "../node_modules/"
In angular.jsonit is "node_modules/"

在.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"]
          },

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

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

Open file src/index.html and insert

打开文件 src/index.html 并插入

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

的<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
Execute npm install bootstrap
In src/styles.cssadd the following line:

选项 3
执行npm install bootstrap
在src/styles.css添加以下行：

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

OPTION-4
ng-bootstrapIt 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

OPTION-4
ng-bootstrap它包含一组基于 Bootstrap 标记和 CSS 的原生 Angular 指令。因此，它不依赖于 jQuery 或 Bootstrap 的 JavaScript

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

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

安装后将其导入根模块并在@NgModule导入数组中注册

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

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

NOTE
ng-bootstrap需要在你的项目中添加 Bootstrap 的 4 css。您需要通过以下方式显式安装它：
npm install bootstrap@4 --save在您的 angular.json 中，将文件路径添加到build目标下的样式数组

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

Answer 2

回答by jayant mishra

npm install --save bootstrap

afterwards, inside angular.json(previously .angular-cli.json) inside the project's root folder, find styles and add the bootstrap css file like this:

之后，在项目的根文件夹内angular.json（以前.angular-cli.json），找到样式并添加引导 css 文件，如下所示：

for angular 6

对于角 6

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

for angular 7

角 7

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

Answer 3

回答by Pardeep Jain

npm install bootstrap --save

and add relevent files into angular.jsonfile under the styleproperty for css files and under scriptsfor JS files.

并增加培训相关文件到angular.json文件的下style财产的CSS文件，并根据scripts对JS文件。

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

Answer 4

回答by lpd

using command

使用命令

npm install bootstrap --save

open .angular.jsonold (.angular-cli.json )file find the "styles" add the bootstrap css file

打开.angular.json旧(.angular-cli.json)文件找到“样式”添加引导 css 文件

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

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

提问by nikhil sugandh

回答by Vikas

回答by jayant mishra

回答by Pardeep Jain

回答by lpd

相关推荐

最近更新

标签

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

提问by nikhil sugandh

回答by Vikas

回答by jayant mishra

回答by Pardeep Jain

回答by lpd

相关推荐

Javascript 如何在javascript中获取开关切换状态（真/假）

在 JavaScript 中将数组解包为单独的变量

Javascript 未找到命令：jest

Javascript Javascript递归数组展平

相关推荐

最近更新

标签