Angular 4 : 부트 스트랩을 포함하는 방법?

저는 백엔드 개발자이고 Angular4를 사용하고 있습니다. 그래서이 설치 튜토리얼을했습니다 : https://www.youtube.com/watch?v=cdlbFEsAGXo .

이 점을 감안할 때 "container-fluid"또는 "col-md-6"클래스 등을 사용할 수 있도록 어떻게 부트 스트랩을 앱에 추가 할 수 있습니까?

npm install --save bootstrap

그런 다음 angular-cli.json (프로젝트의 루트 폴더 내)에서 다음 styles과 같이 부트 스트랩 CSS 파일을 찾아 추가합니다.

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

UPDATE :
각 6 +에서이 angular-cli.json 변경되었습니다 에 angular.json.

비디오 시청 또는 단계 따르기

각도 2 / 각도 4 / 각도 5 / 각도 6에 부트 스트랩 4 설치

프로젝트에 부트 스트랩을 포함하는 세 가지 방법이 있습니다.
1) index.html 파일에 CDN 링크 추가
2) npm을 사용하여 부트 스트랩을 설치하고 angular.json에 경로를 설정합니다. 권장
3) npm을 사용하여 부트 스트랩을 설치하고 index.html 파일에 경로를 설정합니다.

npm을 사용하여 부트 스트랩을 설치하는 두 가지 방법을 따르는 것이 좋습니다. 이는 프로젝트 디렉토리에 설치되고 쉽게 액세스 할 수 있기 때문입니다.

방법 1

각 프로젝트 index.html 파일에 Bootstrap, Jquery 및 popper.js CDN 경로 추가

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

방법 2

1) npm을 사용하여 부트 스트랩 설치

npm install bootstrap --save

부트 스트랩 4를 설치 한 후, 우리는 부트 스트랩 4가 Jquery와 popper.js 패키지를 사용하기 때문에 Jquery와 Popper.js라는 두 개의 자바 스크립트 패키지가 더 필요합니다.

2) JQUERY 설치

npm install jquery --save

3) Popper.js 설치

npm install popper.js --save

이제 부트 스트랩이 node_modules 폴더 내의 프로젝트 디렉토리에 설치됩니다.

열린 angular.json 이 파일이 각 디렉토리에 해당 파일을 열고 내부 부트 스트랩, JQuery와, 그리고 popper.js 파일의 경로를 추가하려면에서 사용할 수있는 스타일 [] 와 스크립트는 [] 경로는 예를 들어 아래를 참조

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

참고 : js 파일의 시퀀스를 변경하지 마십시오 .

방법 3

npm을 사용하여 부트 스트랩 설치 방법 3의 방법 2 를 따르십시오. angular.json 파일 대신 index.html 파일 내부에 경로를 설정했습니다.

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

이제 부트 스트랩이 잘 작동합니다.

각도로 부트 스트랩을 구성 / 통합 / 사용하려면 먼저 npm을 사용하여 부트 스트랩 패키지를 설치해야합니다.

패키지 설치

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

참고 : --save 명령은 package.json 파일 내의 각도 앱에 종속성을 저장합니다.

이제 위 단계에서 패키지를 설치 했으므로 이제 아래 옵션 중 하나 또는 둘 다를 사용하여 이러한 스타일을로드해야한다고 Angular CLI에 알릴 수 있습니다.

옵션 1) src / styles.css 파일에 추가

아래와 같이 종속성을 추가 할 수 있습니다.

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

옵션 2) angular-cli.json 또는 angular.json에 추가

아래와 같이 angular 앱의 루트 폴더에있는 angular-cli.json 또는 angular.json 파일에 스타일 css 파일을 추가 할 수 있습니다.

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

Angular 4-Bootstrap / @ ng-bootstrap 설정

먼저 아래 명령을 사용하여 프로젝트에 부트 스트랩 을 설치 합니다.

npm install --save bootstrap

그런 다음이 줄 "../node_modules/bootstrap/dist/css/bootstrap.min.css" 을 스타일의 angular-cli.json 파일 (루트 폴더)에 추가합니다.

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

위의 종속성을 설치 한 후 다음을 통해 ng-bootstrap 을 설치하십시오 .

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

일단 설치되면 메인 모듈을 가져와야합니다.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

그런 다음 모든 부트 스트랩 위젯 (예 : 캐 러셀, 모달, 팝 오버, 툴팁, 탭 등)과 몇 가지 추가 기능 (날짜 선택기, 등급 지정, 시간 선택기, 자동 검색)을 사용할 수 있습니다.

에서 Angular4 당신이 처리로 @types의 시스템, 당신은 일을 다음을 수행해야

하다,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

찾다 유형 배열을 jquery 및 부트 스트랩 항목을 추가 합니다.

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

헤드 섹션에 다음 항목을 추가하십시오.

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

그리고 jquery 와 부트 스트랩 사용 시작 모두 사용하십시오.

Sass / Scss를 사용하는 경우 다음을 따르십시오.

npm 설치

npm install bootstrap --save

importsass / scss 파일 에 문을 추가 하십시오.

@import '~bootstrap/dist/css/bootstrap.css'

아래 세부 단계 및 작업 예를 보려면 다음을 방문하십시오. https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ 하십시오.

적절한 설명과 함께 매우 자세한 단계.

단계 : NPM에서 부트 스트랩 설치

다음으로 부트 스트랩을 설치해야합니다. 디렉토리를 우리가 만든 프로젝트 (cd angular-bootstrap-example)로 변경하고 다음 명령을 실행합니다.

부트 스트랩 3 :

npm install bootstrap --save

Bootstrap 4 (현재 베타 버전) :

npm install bootstrap@next --save

또는 대안 : 로컬 부트 스트랩 CSS 대안으로 부트 스트랩 CSS를 다운로드하여 프로젝트에 로컬로 추가 할 수도 있습니다. 웹 사이트에서 Bootstrap을 다운로드하고 폴더 스타일 (styles.css와 동일한 수준)을 만들었습니다.

노트 : 자산 폴더 아래에 로컬 CSS 파일을 배치하지 마십시오. Angular CLI로 프로덕션 빌드를 수행하면 .angular-cli.json에 선언 된 CSS 파일이 축소되고 모든 스타일이 단일 styles.css로 번들됩니다. 자산 폴더는 빌드 프로세스 중에 dist 폴더에 복사됩니다 (CSS 코드가 복제 됨). index.html에서 직접 가져 오는 경우에만 로컬 CSS 파일을 자산 아래에 배치하십시오.

CSS 가져 오기 1. NPM에서 설치된 Bootstrap에서 CSS를 가져 오는 두 가지 옵션이 있습니다.

강력한 텍스트 1 : .angular-cli.json 구성 :

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

2 : src / style.css 또는 src / style.scss에서 직접 가져 오기 :

@import '~bootstrap/dist/css/bootstrap.min.css';

저는 개인적으로 src / style.css의 모든 스타일을 .angular-cli.json에 이미 선언되어 있기 때문에 가져 오는 것을 선호합니다.

3.1 대안 : 로컬 부트 스트랩 CSS 부트 스트랩 CSS 파일을 로컬에 추가했다면 .angular-cli.json으로 가져 오기만하면됩니다.

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

또는 src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4 : ngx-bootstrap으로 JavaScript 구성 요소를 부트 스트랩 (옵션 1) Bootstrap JavaScript 구성 요소 (JQuery가 필요함)를 사용할 필요가없는 경우, 이것이 필요한 설정입니다. 그러나 모달, 아코디언, 날짜 선택기, 도구 설명 또는 기타 구성 요소를 사용해야하는 경우 jQuery를 설치하지 않고 이러한 구성 요소를 어떻게 사용할 수 있습니까?

NPM에서도 설치할 수있는 ngx-bootstrap이라는 Bootstrap 용 Angular 래퍼 라이브러리가 있습니다.

npm install ngx-bootstrap --save

참고 NG2 - 부트 스트랩과 NGX-부트 스트랩은 같은 패키지입니다. ng2-bootstrap은 #itsJustAngular 이후에 ngx-bootstrap으로 이름이 변경되었습니다.

Angular CLI 프로젝트를 만들 때 Bootstrap과 ngx-bootstrap을 동시에 설치하려는 경우 :

npm install bootstrap ngx-bootstrap --save

4.1 : app.module.ts에 필수 부트 스트랩 모듈 추가

ngx-bootstrap을 살펴보고 app.module.ts에 필요한 모듈을 추가합니다. 예를 들어 Dropdown, Tooltip 및 Modal 구성 요소를 사용한다고 가정합니다.

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

ngx-bootstrap 모듈 공급자로 인해 각 모듈에 대해 .forRoot () 메서드를 호출하기 때문에 프로젝트의 모든 구성 요소와 모듈 (전역 범위)에서 기능을 사용할 수 있습니다.

또는 다른 모듈에서 ngx-bootstrap을 구성하려는 경우 (많은 bs 모듈을 가져와야하고 app.module을 복잡하게 만들고 싶지 않은 경우 구성 목적으로 만) 모듈을 만들 수 있습니다. app-bootstrap.module.ts, Bootstrap 모듈을 가져오고 (forRoot () 사용) 내보내기 섹션에서 선언합니다 (다른 모듈에서도 사용할 수있게 됨).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

마지막으로 app.module.ts에서 부트 스트랩 모듈을 가져 오는 것을 잊지 마십시오.

import {AppBootstrapModule} from './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap은 Bootstrap 3 및 4에서 작동합니다. 또한 몇 가지 테스트를 수행했으며 대부분의 기능은 Bootstrap 2.x에서도 작동합니다 (예, 여전히 유지 관리 할 레거시 코드가 있습니다).

이것이 누군가를 돕기를 바랍니다!

Angular 7.0.0에서 테스트 됨

1 단계-필요한 종속성 설치

npm 설치 부트 스트랩 (특정 버전을 원하면 버전 번호를 지정하십시오.)

npm install popper.js (특정 버전을 원할 경우 버전 번호를 지정하십시오.)

npm 설치 jquery

내가 시도한 버전 :

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

2 단계 : angular.json에서 아래 순서대로 라이브러리를 지정합니다. 최신 angular에서 구성 파일 이름은 angular-cli.json이 아닌 angular.json입니다.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

대한 부트 스트랩 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

그런 다음이 작업이 완료되면 다음을 실행하십시오.

npm install

지금. .angular-cli.json 파일을 열고 부트 스트랩, jquery 및 테더를 가져옵니다.

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

그리고 지금. 갈 준비가되었습니다.

내가 볼 수 있듯이 이미 많은 답변을 얻었지만이 방법을 시도해 볼 수 있습니다.

각도에서 jquery를 사용하지 않는 것이 가장 좋습니다. 부트 스트랩을 사용하지 않고 부트 스트랩을 설치하려면 https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md 방법을 선호합니다. jquery에 의존하는 Node.js 구성 요소.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

코드 jquery를 각도에서 자유롭게 유지하십시오.

프로젝트에서 다음 명령을 실행합니다. 즉 npm install bootstrap@4.0.0-alpha.5 --save

위의 종속성을 설치 한 후 부트 스트랩 모듈을 설치하는 다음 npm 명령을 실행하십시오. npm install --save @ ng-bootstrap / ng-bootstrap

참조를 위해 이것을 확인하십시오-https: //github.com/ng-bootstrap/ng-bootstrap

다음 가져 오기를 app.module에 추가합니다. import {NgbModule} from '@ ng-bootstrap / ng-bootstrap'; 가져 오기에 NgbModule을 추가하십시오.

stye.css에서 @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

1 단계 : npm install bootstrap --save

2 단계 : angular.json node_modules / bootstrap / dist / css / bootstrap.min.css에 코드 아래 붙여 넣기

3 단계 : ng 서브

angular-cli.json에 추가

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

작동 할 것입니다. 확인했습니다.

온라인으로 부트 스트랩을 사용하고 응용 프로그램이 인터넷에 액세스 할 수있는 경우 다음을 추가 할 수 있습니다.

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

기본 style.css 파일로. 가장 간단한 방법입니다.

참조 : angular.io

노트. 이 솔루션은 unpkg 웹 사이트에서 부트 스트랩을로드하며 인터넷에 액세스 할 수 있어야합니다.

Angular 6 CLI는 다음을 수행하십시오.

ng @ ng-bootstrap / schematics 추가 

최신 버전을 설치하려면 $ npm i --save bootstrap @ next

먼저 프로젝트에서 npm i bootstrap ur style.css 파일을 연 후 npm 을 사용하여 프로젝트에 부트 스트랩을 설치 하고이 줄을 추가합니다.

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

프로젝트에 추가 된 부트 스트랩입니다.

| * | Angular 2, 4, 5, 6 + 용 부트 스트랩 4 설치 :

| +> npm으로 부트 스트랩 설치

npm install bootstrap --save

npm install popper.js --save

| +> angular.json에 스타일 및 스크립트 추가

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

당신은에있는 경우 각도 6+ 사용은 다음을 추가 angular.json를 :

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

Angular에 부 트랩 현재 ​​버전 4 추가 :

1 / 먼저 설치해야합니다.

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / 그런 다음 필요한 스크립트 파일을 angular.json의 스크립트에 추가합니다.

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / 마지막으로 angular.json의 스타일 배열에 Bootstrap CSS를 추가합니다.

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

이 링크 확인

부트 스트랩 및 jquery를 위해 cdn으로 작업하거나 다음을 사용하여 앱에 직접 bootstarp를 설치하십시오.

npm install ngx-bootstrap --save

https://ng-bootstrap.github.io/#/home 도 사용 하지만 적절하지는 않습니다.

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a