Açısal cli 1.0.0-beta.5 (w / node v6.1.0) ile oluşturulan uygulamamızda bootstrap 4 (4.0.0-alpha.2) kullanmak istiyoruz.

Bootstrap ve npm ile olan bağımlılıklarını aldıktan sonra, ilk yaklaşımımız bunları aşağıdakilere eklemekten ibaretti angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

ve bunları index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Bu iyi çalıştı ng serveama -prodbayraklı bir yapı ürettiğimiz anda tüm bu bağımlılıklar ortadan kalktı dist/vendor(sürpriz!).

Açısal klips ile oluşturulan bir projede böyle bir senaryoyu nasıl ele almayı amaçlıyoruz (örneğin, bootstrap komut dosyalarını yüklemek)?

Aşağıdaki düşüncelerimiz vardı ama hangi yoldan gideceğimizi gerçekten bilmiyoruz ...

• CDN mi kullanıyorsunuz? ancak kullanılabilir olmalarını garanti etmek için bu dosyaları sunmak istiyoruz

• dist/vendorsonra bağımlılıkları kopyalamak bizim ng build -prod? Ancak bu, yapı kısmına 'dikkat ettiği' için açısal-klibin sağlaması gereken bir şey gibi görünüyor mu?

• jquery, bootstrap ve tether ekleyerek src/system-config.tsve bir şekilde onları paketimize çekiyor main.tsmusunuz? Ancak, bunları uygulama kodumuzda (örneğin moment.js veya örneğin lodash gibi bir şey) açıkça kullanmayacağımız düşünüldüğünde, bu yanlış görünüyordu.

ÖNEMLİ GÜNCELLEME: NG2-önyükleme artık yerine NGX-bootstrap

ngx-bootstrap hem Açısal 3 hem de 4'ü destekler.

Güncelleme: 1.0.0-beta.11-webpack veya üstü sürümler

Her şeyden önce açısal cli sürümünüzü terminalde aşağıdaki komutla kontrol edin :

ng -v

Senin Eğer açısal-cli versiyonu daha büyüktür 1.0.0-beta.11-WebPack , o zaman şu adımları takip etmelidir:

1. Ngx-bootstrap ve bootstrap kurulumu :

   npm install ngx-bootstrap bootstrap --save

Bu hat, bugünlerde Bootstrap 3'ü yükler, ancak gelecekte Bootstrap 4'ü yükleyebilir. Unutmayın ngx-bootstrap her iki sürümü de destekler.

2. Açık src / app / app.module.ts ve ekleyin:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Açık açılı-cli.json (angular6 ve değiştirildi daha sonra dosya adı angular.json ) ve içine yeni bir girdi eklemek stylesdizisi:

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

4. Aç src / uygulama / app.component.html ve ekleyin:

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

1.0.0-beta.10 veya önceki sürümler:

Ve açısal-cli sürümünüz 1.0.0-beta.10 veya daha düşükse , aşağıdaki adımları kullanabilirsiniz.

İlk olarak proje dizinine gidin ve şunu yazın:

npm install ngx-bootstrap --save

Ardından, angular-cli-build.js dosyanızı açın ve şu satırı ekleyin:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Şimdi src / system-config.ts dosyanızı açın ve şunu yazın:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...ve:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Anahtar kelimeyi aramak> https://github.com/angular/angular-cli adresinde Global Kütüphane Kurulumu cevabı bulmanıza yardımcı olur.

Belgelerine göre, Bootstrap kitaplığı eklemek için aşağıdaki adımları atabilirsiniz.

İlk önce npm'den Bootstrap'i kurun:

npm install bootstrap@next

Ardından gerekli komut dosyalarını açısal-cli.json dosyasındaki apps [0] .scripts dosyasına ekleyin:

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

Son olarak Bootstrap CSS'yi apps [0] .styles dizisine ekleyin:

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

Sunumu çalıştırıyorsanız yeniden başlatın ve Bootstrap 4 uygulamanızda çalışıyor olmalıdır.

Bu en iyi çözümdür. Ama servis yeniden başlatmazsanız asla işe yaramaz. Bu son işlemi yapmanız önemle tavsiye edilir.

Aşağıdakileri yapın:

npm i bootstrap@next --save

Bu, projenize bootstrap 4 ekleyecektir.

Ardından dosyaya src/style.scssveya src/style.cssdosyanıza gidin (hangisini kullandığınızı seçin) ve bootstrap'i oraya aktarın:

Style.css için

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Style.scss için

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Komut dosyaları için yine şöyle açısal-cli.json dosyasında dosya eklemek zorunda kalacak ( Açısal sürüm 6, bu düzenleme dosyası içinde yapılması gereken angular.json ) :

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

İlk olarak, bu komutlarla tether, jquery ve bootstrap yüklemeniz gerekir

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Bu satırları angular-cli.json (sürüm 6'dan itibaren angular.json) dosyanıza ekledikten sonra

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Henüz kimse Bootstrap'ın nasıl dahil edileceğine dair resmi (açısal-cli ekibi) hikayesine atıfta bulunmadığından: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Bootstrap'i dahil et

Bootstrap , Açısal bir projede kullanılabilen popüler bir CSS çerçevesidir. Bu kılavuz, Angular CLI projenize bootstrap ekleyerek ve bootstrap kullanacak şekilde yapılandırırken size yol gösterecektir.

CSS Kullanımı

Başlangıç

Yeni bir proje oluşturun ve projeye gidin

ng new my-app
cd my-app

Bootstrap'i Yükleme

Oluşturulan ve hazır olan yeni proje ile projenize bir bağımlılık olarak bootstrap yüklemeniz gerekecektir. --saveSeçeneği kullanarak bağımlılık package.json dosyasına kaydedilir.

# version 3.x
npm install bootstrap --save

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

Projeyi Yapılandırma

Proje kurulduğuna göre, artık önyükleme CSS'sini içerecek şekilde yapılandırılmalıdır.

• Dosyayı .angular-cli.jsonprojenizin kök dizininden açın .
• Özelliğin altında, appsbu dizideki ilk öğe varsayılan uygulamadır.
• stylesDış global stillerin uygulamanıza uygulanmasına izin veren bir özellik vardır.
• İçin yolu belirtin bootstrap.min.css

İşiniz bittiğinde aşağıdaki gibi görünmelidir:

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

Not: Değişiklik .angular-cli.jsonyaptığınızda, ng serveyapılandırma değişikliklerini almak için yeniden başlatmanız gerekir .

Test Projesi

app.component.htmlAşağıdaki işaretlemeyi açın ve ekleyin:

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

Uygulama yapılandırıldığında, ng serveuygulamanızı geliştirme modunda çalıştırmak için çalıştırın. Tarayıcınızda uygulamaya gidin localhost:4200. Önyükleme stil düğmesinin göründüğünü doğrulayın.

SASS Kullanımı

Başlangıç

Yeni bir proje oluşturun ve projeye gidin

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

Bootstrap'i Yükleme

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

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

Projeyi Yapılandırma

Boş bir dosya oluşturun _variables.scssiçinde src/.

Kullanıyorsanız bootstrap-sassaşağıdakileri ekleyin _variables.scss:

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

Ayrıca styles.scssaşağıdakileri ekleyin:

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

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

Test Projesi

app.component.htmlAşağıdaki işaretlemeyi açın ve ekleyin:

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

Uygulama yapılandırıldığında, ng serveuygulamanızı geliştirme modunda çalıştırmak için çalıştırın. Tarayıcınızda uygulamaya gidin localhost:4200. Önyükleme stil düğmesinin göründüğünü doğrulayın. Değişkenlerinizin açık olduğundan emin olmak için _variables.scssaşağıdakileri ekleyin:

$brand-primary: red;

Yazı tipi renginin değiştiğini görmek için tarayıcıyı döndürün.

Sürüm 1.0.0-beta.26'yı güncelle

Bootstrap'i içe aktarmanın yeni yolu için dokümanı burada görebilirsiniz

Hala çalışmıyorsa, sun komutu ile yeniden başlayın

1.0.0 veya önceki sürümler:

İndex.html dosyanızda sadece bootstrap css bağlantısına ihtiyacınız var (js komut dosyalarına gerek yok)

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

Ve

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

Yüklemenin ardından NG2-ön yükleme içinde my_project / src / sistem config.ts:

/** 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'
  }
};

Ve my_project / angular-cli-build.js dosyasında:

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

Modülünüzü satıcıya koymak için bu komutu unutmayın:

ng build

aynı prensip olan başka bir modülden ithal etmek.

Sanırım yukarıdaki yöntemler sürümden sonra değişti, bu bağlantıyı kontrol edin

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

projeyi başlat

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

ng-bootstrap ve bootstrap yükle

npm install ng2-bootstrap bootstrap --save

src / app / app.module.ts dosyasını açın ve ekleyin

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

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

angular-cli.json dosyasını açın ve styles dizisine yeni bir girdi ekleyin

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

src / app / app.component.html dosyasını açın ve tüm işleri ekleyerek test edin

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

Açısal 5'te Bootstrap 4 Adımları

1. Açısal 5 Projesi Yarat

   yeni AngularBootstrapTest

2. Proje dizinine git

   cd AngularBootstrapTest

3. Bootstrap indir

   npm bootstrap yükle

4. Projeye Önyükleme Ekle

   4.1 açık .angular-cli.json

   4.2 json'da "stiller" bölümünü bulun

   4.3 bootstrap css yolunu aşağıdaki gibi ekleyin

   .

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

Şimdi açısal 5 projesine bootstrap css'i başarıyla eklediniz

Bootstrap'i test et

5. açık src/app/app.component.html
6. bootstrap düğmesi bileşeni ekle

.

<button type="button" class="btn btn-primary">Primary</button>

düğme stillerini buradan başvurabilirsiniz ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. Dosya 'yı kaydet

8. projeyi yürüt

   ng hizmet - açık

Şimdi sayfada bootstrap stili düğmesini göreceksiniz

Not: sonra önyükleme yolunu eklenen eğer ng hizmet , durdurmak ve ng değişiklikleri yansıtacak şekilde hizmet yeniden çalıştırmanız gerekir

Bu çok kafa karıştırıcı hale geldiğinden ve buradaki yanıtlar tamamen karışık olduğundan , BS4 repo için resmi ui ekibiyle gitmeyi önereceğim (evet, NG-Bootstrap için bu depoların birçoğu var.

BS4'ü edinmek için https://github.com/ng-bootstrap/ng-bootstrap buradaki talimatları uygulayın.

Lib'den alıntı:

Bu kütüphane, ui-bootstrap ekibi tarafından sıfırdan inşa ediliyor. TypeScript kullanıyoruz ve Bootstrap 4 CSS çerçevesini hedefliyoruz.

Bootstrap 4'te olduğu gibi, bu kütüphane devam eden bir çalışmadır. Uyguladığımız her şeyi görmek için lütfen sorunlar listemize göz atın. Orada yorum yapmaktan çekinmeyin.

Sadece uğruna yapıştırmayı kopyalayın:

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

Kurulduktan sonra ana modülümüzü içe aktarmanız gerekir:

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

Geriye kalan tek kısım, içe aktarılan modülü uygulama modülünüzde listelemektir. Kesin yöntem, koduna benzer şekilde sonlandırmanız gereken kök (üst düzey) modül için biraz farklı olacaktır (dikkat NgbModule.forRoot ()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Uygulamanızdaki diğer modüller NgbModule'u içe aktarabilir:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Bu şimdiye kadarki en tutarlı davranış gibi görünüyor

1. Bootstrap'i yükle

   npm install bootstrap@next

2. .Angular-cli.json dosyasına kod ekleyin:

   "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"
   ],

3. Son olarak bootstrap.css dosyasını kod stilinize ekleyin.

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

4. Yerel sunucunuzu yeniden başlatın

Aşağıdaki adımları uygulayın:

1. npm install --save bootstrap

2. Ve .angular-cli.json'unuzda stiller bölümüne ekleyin:

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

Bundan sonra, ng servisinizi yeniden başlatmanız gerekir

Zevk almak

1. Npm kullanarak Bootstrap kurulumu

   npm install bootstrap

2. Popper.js'yi yükleyin

npm install --save popper.js

3.Goto angular.json Açısal 6 proje / içinde .angular-cli.json açısal 5'de ve listelenen ekleyin:

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

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

Bunu dene

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Bu videoyu ayrıca Angular-Cli tarafından oluşturulan projenize nasıl bootstrap ekleyebileceğiniz konusunda yararlı bilgilere sahip olan Mike Brocchi tarafından izleyebilirsiniz. https://www.youtube.com/watch?v=obbdFFbjLIU (yaklaşık 13:00)

1. Bash içinde koş npm install ng2-bootstrap bootstrap --save
2. Aşağıdakileri ekle / değiştir angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

İlgili proje dizininde Terminal / komut istemini açın ve aşağıdaki komutu yazın.

npm install --save bootstrap

Sonra .angular-cli.json dosyasını açın, Ara

"styles": [ "styles.css" ],

bunu olarak değiştir

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

Hepsi tamam.

Şimdi yeni ng-bootstrap 1.0.0-beta.5 sürümü ile Bootstrap işaretlemesi ve CSS dayalı yerel Açısal yönergelerin çoğunu destekler.

Bununla çalışmak için gereken tek bağımlılık bootstrap. No jquery ve popper.js bağımlılıklarını kullanmaya gerek yok .

ng-bootstrap, bileşenler için JavaScript uygulamasının tamamen değiştirilmesidir. Bu nedenle bootstrap.min.js, .angular-cli.json dosyanızın komut dosyaları bölümüne eklemenize gerek yoktur.

bootstrap'ı oluşturulan projeyle angular-cli son sürümü ile entegre ederken bu adımları izleyin.

• .Angular bootstrap.min.css-cli.json, stiller bölümüne ekleyin.

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

• Ng-bootstrap bağımlılığını kurun .

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

• Bunu ana modül sınıfınıza ekleyin.

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

• Aşağıdakileri ana modül içe aktarmalar bölümüne ekleyin.

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

• Bu modül sınıflarının içinde ng-bootstrap bileşenleri kullanacaksanız, alt modül (ler) inizde de aşağıdakileri yapın.

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

• Artık projeniz mevcut ng-bootstrap bileşenlerini kullanmaya hazır.

1. Bootstrap, popper.js dosyasını yükleyin

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

3. In src / styles.css , ithalat Bootstrap tarzı

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

Adım 1:
npm install bootstrap@latest --save-dev Bu, önyüklemenin en son sürümünü yükleyecektir, Ancak, belirtilen sürüm sürüm numarası eklenerek yüklenebilir

Adım 2: styles.css dosyasını açın ve aşağıdakileri ekleyin @import "~bootstrap/dist/css/bootstrap.css"

Bootstrap ve Jquery eklemek için

npm install bootstrap@3 jquery --save

Bu komutu çalıştırdıktan sonra, lütfen devam edin ve node_modules klasörünüzü kontrol edin, içine bootstrap ve jquery eklendiğini görebilmelisiniz.

angular-cliartık ihtiyacınız olan her şeyi bulabileceğiniz özel bir wiki sayfası var . TLDR, bootstrapüzerinden yükleyin npmve .angular-cli.jsondosyanızdaki "stiller" bölümüne stiller bağlantısını ekleyin

Açısal cli ve css kullanılması durumunda çalışma örneği:

1. bootstrap yükleyin

npm bootstrap tether jquery yükleyin - kaydet

2. .angular-cli.json'a ekleyin

  "styles": [
    "../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"
  ],

npm kullanarak boostrap yükle

npm install boostrap@next --save

sonra node_modules klasörünüzde boostrap.css dosyasını (dist içinde) kontrol edin, normalde yol

"../node_modules/bootstrap/dist/css/bootstrap.css",

bu yolu ekle | style.css veya style.scss içindeki içe aktarma

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

bu kadar.

Aşağıdaki komutu proje içinde çalıştırın

npm install --save @bootsrap@4

ve böyle bir onay alırsanız

+ bootstrap@4.1.3
updated 1 package in 8.245s

Bu, boostrap 4'ün başarıyla kurulduğu anlamına gelir. Ancak, bunu kullanmak için, angular.json dosyasının altındaki "stiller" dizisini güncellemeniz gerekir.

Bootstrap'in mevcut stilleri geçersiz kılabilmesi için aşağıdaki şekilde güncelleyin

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

Her şeyin doğru bir şekilde ayarlandığından emin olmak için çalıştırın ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, sonra boostrap'yi kullanmanız iyi olur.

Bunu burada görmedim:

@import 'bootstrap/scss/bootstrap.scss';

Ben sadece style.scss bu satırı ekledi Benim durumumda da bootstrap değişkenleri geçersiz kılmak istedim.

Açısal ve bootstrap ile yeni başlamışsanız, basit yanıt adımların altında olacaktır: 1. Bootstrap düğüm paketini dev bağımlılığı olarak ekleyin

npm install --save bootstrap

2. bootstrap stil sayfasını angular.json dosyasına aktar.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. ve stil, ızgara vb. için bootstrap kullanmaya hazırsınız.

   <div class="container">My first bootstrap div</div>

Bulduğum en iyi yanı, herhangi bir üçüncü taraf modül bağımlılığı olmadan bootstrap kullanarak yönetmemiz oldu. Sadece komutu güncelleyerek bootstrap'i her zaman yükseltebiliriz npm install --save bootstrap@4.4.

Açısal projenize Bootstrap 4 eklemenin birçok yolu var :

• Önyükleme projenizin index.html dosyasının bir ve etiketli bölümüne Bootstrap CSS ve JavaScript dosyalarını dahil etmek,

• Önyükleme projenizin global styles.css dosyasına Bootstrap CSS dosyasını bir @import anahtar sözcüğü ile aktarın.

• Projenizin angular.json dosyasının stil ve komut dizilerine Bootstrap CSS ve JavaScript dosyalarını ekleme

Bu Komutu Çalıştır

npm install bootstrap@3

Angular.json'unuz

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

npm install bootstrapkomutu kullanarak açılışta bootstrap kurabilirsiniz .

ve angular.jsondosya ve style.cssdosyadaki sonraki kurulum önyükleme yolu .

bootstrap'i açısal olarak nasıl kuracağınız ve ayarlayacağınız hakkında tam bir blog okuyabilirsiniz , bununla ilgili tüm blog'u okumak için buraya tıklayın

Açısal-cli kullanılması durumunda çalışan bir örnek:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Css ve scss için çalışır. Bootstrap v3 ve v4 kullanılabilir.

Bootstrap-şemaları hakkında daha fazla bilgiyi burada bulabilirsiniz .