아무도 아직 부트 스트랩을 포함시키는 방법에 대한 공식 (angular-cli 팀) 이야기를 언급하지 않았으므로 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

부트 스트랩 포함

부트 스트랩 은 Angular 프로젝트 내에서 사용할 수있는 널리 사용되는 CSS 프레임 워크입니다. 이 안내서는 Angular CLI 프로젝트에 부트 스트랩을 추가하고 부트 스트랩을 사용하도록 구성하는 과정을 안내합니다.

CSS 사용

시작하기

새 프로젝트를 만들고 프로젝트를 탐색하십시오.

ng new my-app
cd my-app

부트 스트랩 설치

새 프로젝트가 작성되고 준비되면 다음으로 프로젝트에 부트 스트랩을 종속성으로 설치해야합니다. --save옵션을 사용하면 의존성이 package.json에 저장됩니다

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

이제 프로젝트가 설정되었으므로 부트 스트랩 CSS를 포함하도록 구성해야합니다.

• .angular-cli.json프로젝트 루트 에서 파일 을여십시오.
• 속성 아래 apps에서 해당 배열의 첫 번째 항목이 기본 응용 프로그램입니다.
• styles외부 전역 스타일을 응용 프로그램에 적용 할 수 있는 속성 이 있습니다.
• 경로를 지정하십시오 bootstrap.min.css

완료되면 다음과 같아야합니다.

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

참고 : 변경하면 구성 변경을 .angular-cli.json시작 ng serve하기 위해 다시 시작해야합니다 .

테스트 프로젝트

app.component.html다음 마크 업을 열고 추가하십시오.

<button class="btn btn-primary">Test Button</button>

애플리케이션이 구성된 상태 ng serve에서 개발 모드에서 애플리케이션을 실행 하도록 실행하십시오. 브라우저에서 응용 프로그램으로 이동하십시오 localhost:4200. 부트 스트랩 스타일 버튼이 나타나는지 확인하십시오.

SASS 사용

시작하기

새 프로젝트를 만들고 프로젝트를 탐색하십시오.

ng new my-app --style=scss
cd my-app

부트 스트랩 설치

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

에 빈 파일 _variables.scss을 만듭니다 src/.

를 사용하는 경우 bootstrap-sass다음을 추가하십시오 _variables.scss.

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

다음을 styles.scss추가하십시오.

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

테스트 프로젝트

app.component.html다음 마크 업을 열고 추가하십시오.

<button class="btn btn-primary">Test Button</button>

애플리케이션이 구성된 상태 ng serve에서 개발 모드에서 애플리케이션을 실행 하도록 실행하십시오. 브라우저에서 응용 프로그램으로 이동하십시오 localhost:4200. 부트 스트랩 스타일 버튼이 나타나는지 확인하십시오. 변수가 열려 있는지 확인 _variables.scss하고 다음을 추가하십시오.

$brand-primary: red;

글꼴 색이 변경된 것을 보려면 브라우저를 반환하십시오.

답변

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

npm install ng2-bootstrap --save
npm install moment --save

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

ng build

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

npm install ng2-bootstrap bootstrap --save

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ...
})

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

<alert type="success">hello</alert>