angular-cli i bootstrap 4

Question

Poruszam moje pierwsze kroki z użyciem kątowego 2, w szczególności używam oficjalnego narzędzia kątowego-cli do tworzenia nowego projektu.

stworzyłem nowy projekt w ten sposób

ng new [my-project-name] 

Projekt został prawidłowo utworzony.

Po tym chciałbym zainstalować bootstrap 4, a ja postępuję zgodnie z oficjalnym przewodnikiem na stronie kątowej-cli.

zainstalować bootstrap z KMP:

npm install bootstrap@next 

i dodać linię w moim kątowej-cli.json:

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

w aplikacji obiektu.

Kiedy zbudować aplikację i uruchomić go na serwerze z: ng serve

nie znajdę w index.html odniesienie dla bootstrap CSS i JavaScript.

Nie rozumiem, czy import tego pliku jest automatycznie dodawany do pliku index.html, czy też muszę go dodać ręcznie.

Answer 1

Nie będę undesteand, jeśli import tego pliku zostanie automatycznie dodany do pliku index.html lub muszę go dodać ręcznie.

Musisz dodać to sam.

Answer 2

Po dodaniu wpisów skryptów i stylów do pliku angular.cli.json są one dodawane do zakresu globalnego. W szczególności są one dodawane do scripts.bundle.js i styles.bundle.js. Nie ma potrzeby dodawania ich do pliku index.html. Powinieneś być dobry, aby przejść po zatrzymaniu i ponownym uruchomieniu serwera. Na dobrą sprawę uruchamiam przebudowę npm po wprowadzeniu zmian w pliku angular.cli.json.

Answer 3

Nie musisz do niczego dodać ręcznie w pliku HTML. Wykonuje się automatycznie dla ciebie.

Oto dlaczego:

Twoje style CSS zostaną dodane do pliku styles.bundle.css. Dzięki temu po uruchomieniu aplikacji zobaczysz następujący link do arkusza stylów w źródle HTML: <link href="styles.bundle.css" rel="stylesheet">. Po kliknięciu przycisku styles.bundle.css w przeglądarce zostaną wyświetlone wszystkie style, które zostały skompilowane razem.

Jeszcze jedna rzecz ważna pod numerem. Proponuję także zamienić kolejność stylów w pliku kątowe-cli.json na następujące kwestie:

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

Powodem powyższej zmiany jest to, że pliki są zestawiane i podawane w kolejności podać w Plik angular-cli.json. Załóżmy więc, że napisałeś style niestandardowe dla btn-primary w styles.css, które zostaną nadpisane przez bootstrap.css zawsze i nigdy nie zobaczysz, że style są stosowane w interfejsie użytkownika i nie będziesz w stanie dowiedzieć się, co dzieje się źle.

Jeśli zamienisz kolejność plików zgodnie z sugestią, style ładowania początkowego zostaną załadowane najpierw, a następnie niestandardowe style, tym samym nadpisując style bootstrap własnymi stylami. To byłaby jedyna poprawka, którą musisz teraz zrobić w swoim przypadku, a wszystko inne powinno działać sprawnie bez żadnego wysiłku z twojej strony.