Einstieg in Angular 4 – Bootstrap, Font-Awesome und Sass einbinden

20. May 2017 - Allgemein, AngularJS, Bootstrap, Sass, TypeScript

Wir wollen jetzt einmal Bootstrap in unser Angular 4 Projekt einbinden und auch Sass. Ich wollte erst einmal etwas ausführlicher erklären, wie Angular 4 bzw bereits Angular 2 aufgebaut ist. Aber dann dachte ich mir, dass wir das Setup doch gleich komplett aufbauen können, um dann direkt zu schauen, wie man Projekte mit AngularJS entwickeln kann.

Im letzten Beitrag habe ich ja schon durchblicken lassen, dass die Angular Cli sehr hilfreich ist. Wer die Angular Cli noch nicht installiert hat sollte dies wirklich tun, da sie vieles einfacher macht. Gerade beim Componenten anlegen, was ich im nächsten Artikel zeigen möchte, muss man nicht nur vier (gefühlt 100) Dateien anlegen, sondern diese auch überall einbinden, importieren usw.

Sass installieren und einbinden

Nun kommen wir aber erst einmal zur Installation von Sass. Wir fangen mit Sass an, weil wir hierfür ein neues Projekt anlegen müssen. Man kann es auch hinterher noch einbinden, wenn das Projekt schon existiert und größer ist, aber das führte bei mir immer zu Problemen. Entweder, weil die Sass Dateien nicht automatisch aus den CSS Dateien erstellt worden sind und man somit am Ende beides vermischt hatte. Oder weil ich einen Fehler “Cannot find module ‘node-sass’ ” bekommen habe.
Ich zeige aber beide Wege. Einmal, wie man SASS oder gerne auch SCSS bei einem neuen Projekt direkt mit angibt oder wie man es in ein bestehendes Projekt einbinden kann.

Neues Projekt mit SASS/SCSS anlegen

Der Befehl lautet

ng new project --style=sass

oder

ng new project --style=scss

project ist natürlich euer gewünschter Projektname. Ihr müsst sass bzw scss natürlich auch noch installieren. Und gerade, wo ich das schreibe, fällt mir auf, weshalb ich wahrscheinlich einen Fehler bekommen habe, der besagt, dass node-sass fehlt.

npm install node-sass --save-dev

Bestehendes Projekt um SASS/SCSS erweitern

Ihr könnt aber trotzdem versuchen euer bestehendes Projekt zu erweitern. Hierfür einfach ebenfalls node-sass oder node-scss installieren und dann als default Style setzen.

npm install node-sass --save-dev

 

ng set defaults.styleExt sass

oder aber

ng set defaults.styleExt scss

Den letzten Schritt könnt ihr auch manuell gehen. Einfach in der .angular-cli.json Datei unten defaults und dort dann styleExt verändern.
Sieht dann so aus:

"defaults": {
    "styleExt": "sass",
    "component": {}
  }

Ihr könnt jetzt einfach mal gucken, ob Sass funktioniert, indem ihr eure app.component.sass öffnet und dort drin etwas anlegt. Wenn ihr ein neues Projekt angelegt habt sollte die Datei vorhanden sein. Beim Nachinstallieren müsst ihr sie wahrscheinlich manuell anlegen.

Ich lege aber mal kurz eine Variable primary an und sage ich hätte gerne meine h1 Überschrift auf der Startseite in der Farbe der Variablen primary.

Das sieht dann so aus (bei SASS hat man keine Klammern wie { } )

$primary: pink;

h1 
  color: $primary;

Wenn jetzt eure h1 app works auf der Startseite pink ist sollte Sass/Scss bei euch funktionieren.

 

Installieren von Bootstrap und font-awesome

Wer Bootstrap noch überhaupt nicht kennt, wird dies eventuell dadurch ändern, dass er sich meinen Artikel aus dem Jahr 2014 über Bootstrap anschaut. Versprechen kann ich es aber nicht.

Mit dem folgenden Befehl erweitert ihr euer node_module um einen Unterordner mit dem Namen Bootstrap:

npm install --save bootstrap@4.0.0-alpha.5

Wer noch nicht auf Bootstrap 4 und die Vollständigkeit setzt, kann auch noch Bootstrap 3 einbinden.

npm install bootstrap@3 jquery --save

Natürlich jeweils in eurem Projektordner. Also erst in der cmd dahin navigieren und dann die jeweiligen Befehle ausführen.
Wer es richtig wissen will, kann auch direkt schon font-awesome mit einbinden. Der Befehl erweitert sich dann um das font-awesome und sieht so aus:

npm install --save bootstrap@4.0.0-alpha.5 font-awesome

Jetzt müssen wir aber noch der angular cli (bzw der .json Datei der angular cli) mitteilen, dass sie Bootstrap und ggf auch font-awesome laden soll.
Hierfür gehen wir in die .angular-cli.json Datei und erweitern erst einmal styles um die beiden folgenden Zeilen:

../node_modules/bootstrap/dist/css/bootstrap.css
../node_modules/font-awesome/css/font-awesome.css

Bei mir sieht es dann so aus (ich habe noch kein font-awesome installiert)

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

Jetzt bekommt ihr aber wahrscheinlich einen Fehler auf eurer Konsole. Denn ihr müsst um Bootstrap zu benutzen jquery installiert haben.

Das holt ihr einfach mit folgendem Befehl nach

npm install jquery --save

Es gibt noch einen Befehl für jQuery TypeScript autocomplete. Wofür man das braucht weiß ich noch nicht und habe es selbst noch nicht installiert. Aber er würde so aussehen:

npm install @types/jquery --save-dev

jQuery muss natürlich auch noch der angular cli bekannt gemacht werden und über das node_module eingebunden werden. Der Pfad zu jQury ist der folgende:

"../node_modules/jquery/dist/jquery.min.js"

Das war es dann aber auch noch nicht, denn es sollte einen neuen Fehler geben. Es fehlt nämlich noch Tether.js. Zumindest dann, wenn ihr auch Bootstrap 4 installiert habt. Ansonsten solltet ihr keinen Fehler bekommen.

Installieren von Tether.js

Man kann Tether auch mithilfe der angular cli installieren. 

Wenn ich das gerade richtig gelesen habe sollte Tether.js schon im node_module vorhanden sein, wenn ihr Bootstrap 4 installiert habt. Ihr müsst den Pfad dann auch nur in der angular-cli angeben.

Das ist der Pfad:

"../node_modules/tether/dist/js/tether.js"

Und alle Scripts Pfads zusammen sollten dann aus aussehen.

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

Bei mir hat das am Anfang irgendwie nicht richtig funktioniert, weshalb ich tether.js einfach old school in der index.html über einen CDN eingebunden habe. Falls noch wer Probleme mit dem angular-cli Pfad hat, kann ebenfalls auf diesen Umweg zurückgreifen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

Jetzt sollte Bootstrap aber eigentlich funktionieren. Auch hier könnt ihr es wieder testen, indem ihr beispielsweise einfach in eurer app.component.html Datei einen Bootstrap Button einfügt.

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

Wenn euch der Button angezeigt wird funktioniert Bootstrap auf jeden Fall und es kann dann demnächst richtig losgehen.

 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply