15. Wpis do index.html

Dodając Angular Material za pomocą komendy:

plik index.html zostaje uzupełniony o potrzebne czcionki z Google Fonts. Dzieje się to również za pomocą Schematics. W tej lekcji, podłączymy sobie nasze fonty:

również w index.html.

Zaczniemy od nowego Schematic o nazwie Font. Przechodzimy do katalogu angularlove i wpisujemy:

Plik collection.json automatycznie uzupełni się o nowy Schematic. Teraz kod zacznie być skomplikowany i będzie go sporo, stąd nie będę tłumaczył krok po kroku każdej linii, tylko wytłumaczę ogólny flow. Rozwiązanie opiera się na tym, które znalazłem w source code Angular Material Schematics.

Co musimy zrobić:
1) wyciągnąć z angular.json ściężkę do pliku index.html (project.architect.build.options.index)

2) sparsować plik index.html i wyciągnąć head element jeśli jest dostępny, wykorzystamy do tego utila parse5

3) do wyciągniętego head element, dodać nasz wpis <link href=”https://fonts.googleapis.com/css?family=Lato” rel=”stylesheet”>

4) zaplikować te zmiany na tree w rule factory

Kod:

https://github.com/tomasznastaly/angular-schematics-tutorial/pull/9/files

Puszczamy Font Schematic:

Voila!

Można również pomyśleć o prompterze w konsoli, który pozwoliłby wybrać fonta z listy.