Come faccio a integrare un progetto bootstrap in una web app Angular?

il

web developer Umbria

All’ indirizzo https://www.umbriaway.eu/2019/07/05/progettare-web-app-con-angular-8/ abbiamo visto le fasi preliminari per mettere in piedi una web app con il framework Angular, adesso facciamoci una domanda e diamoci una risposta, come faccio a integrare bootstrap per la mia stilizzazione dei contenuti? Vediamo subito con un approccio pratico. Il comando da dare alla nostra finestra terminale del nostro editor visual studio code è: npm install –save bootstrap@4 , dopo alcuni secondi di macinamento ecco comparire il messaggio di avvenuta esecuzione: + bootstrap@4.3.1 added 1 package from 2 contributors and audited 17112 packages in 67.973s found 0 vulnerabilities. Quello che è stato fatto è aggiungere bootstrap alla cartella node_modules ma non basta, adesso bisogna aggiungerlo anche al progetto andando nella root della cartella SRC e individuando il file angular.json dove andremo a scrivere il path nella sezione styles quindi: “node_modules/bootstrap/dist/css/bootstrap.min.css“. Si salva e ricompila il tutto con il comando ng serve e si apre la pagina indicata in genere localhost:4200 per verificare con gli strumenti di ispeziona documento se all’ interno della sezione head bootstrap è stato effettivamente incluso nella parete dei CSS. Con il comando corredato da opzione ng serve –port verrà compilata la cartella tenendo conto delle porte occupate per l’output. A questo punto siamo pronti per mettere in piedi progetti edulcorati!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...