Szybki start projektu Angular 6. Praktyczne podejście!

Chciałbym Ci przedstawić jaka jest moim zdaniem najlepsza praktyka odnośnie szybkiego startu z projektem angular’owym. Opisane poniżej podejście nie będzie miało dużego znaczenia przy mniejszych projektach w których nie musisz się martwić o dalsze utrzymywanie kodu. Jeśli zamierzasz rozwijać projekt samodzielnie to także możesz nie odczuć większych zalet. Natomiast jeśli w grę wchodzą aplikacje angular’owe klasy enterprise, które będę miały długi cykl życia i wiele osób będzie zaangażowanych w kontrybucje, to możesz zyskać wiele dobrego.

Instalacja Angular CLI

W wielu tutorialach angularowych jak i na oficjalnej stronie dokumentacji Angular 6 spotykamy się ze standardowym podejściem odnośnie utworzenia nowego projektu w Angularze. Absolutnie nie jest to złe podejście i nie zamierzam go negować. Pierwszy opisywany krok to instalacja narzędzie Angular CLI. Standardowym krokiem jest instalacje tego pakietu globalnie poprzez wykonanie:

npm install -g @angular/cli

Nie rób tego! Zwróć uwagę na fakt, że Angular CLI jest systematycznie rozwijany, a jego wersja powinna być w pełni kompatybilna z wersją Angular’a, którego używasz w projekcie. Oczywiście, możesz dbać o to, aby wersja którą masz zainstalowaną globalnie była cały czas zgodna. Jednak jest to dodatkowy narzut odpowiedzialności. Teraz zastanów się, co zrobisz, jeśli będziesz miał do utrzymania kilka projektów Angular’a w różnych wersjach? Jedna wersja globalnie zainstalowanego Angular CLI będzie musiała obsłużyć projekty Angular’a w różnych niezgodnych wersjach. W rezultacie zamiast prawidłowej pracy otrzymasz stos błędów. W najlepszym przypadku nie będziesz miał pewności, czy poszczególne komendy Angular CLI’a robią z danym projektem to co do nich należy.

Istnieje sposób, aby sobie z tym poradzić. Wymaga on trochę więcej narzutu pracy podczas etapu inicjacji nowej aplikacji. Natomiast koszt czasu zwraca się w późniejszym etapie z nieporównywalną nawiązką. Do dzieła! Zamiast instalować globalnie pakiet @angular/cli wykonaj następującą komendę:

npx @angular/cli new smartly-initiated-app

Odczekaj chwilę, dając czas na zainstalowanie się odpowiednich pakietów node’a. W swojej konsoli powinieneś otrzymać komunikat o sukcesie oraz stworzonych plikach:

Co właściwie się stało? Właśnie stworzyłeś szkielet nowej aplikacji Angular’a! Jeśli nie wiesz jak to się stało to warto zapoznać się z narzędziem npx, które od wersji 5.2 node.js wchodzi w jego skład. Za pomocą npx możesz uruchamiać binarki z katalogu node_modules/.bin bieżącej lokacji lub ze zdalnego repo npm’a (tak właśnie zrobiłeś przed chwilą). Spójrz do katalogu

ls node_modules/.bin

Wśród wielu binarek, które są zainstalowane lokalnie dla Twojego nowego projektu jest także binarka Angular CLI o nazwie ng. Podczas rozwoju aplikacji niejednokrotnie będziesz chciał z niej skorzystać. Nie musisz robić żadnego aliasu globalnego. Wystarczy, że wykonasz następującą komendę (dla przykładu możesz stworzyć nowy komponent)

npx ng component foo-component

Po wykonaniu na konsoli pojawi się komunikat o pomyślnym utworzeniu komponentu

Co zyskujesz stosując to podejście?

  • Pełną niezależność od globalnej wersji pakietu @angular/cli
  • Jedyne źródło prawdy o wersji @angular/cli dla danego projektu znajduje się w pliku package.json danego projektu
  • Możesz rozwijać kilka aplikacji w różnych wersjach Angular’a na jednym komputerze i nie martwić się o kompatybilność
  • Każdy developer pracujący nad projektem korzysta dokładnie z tej samej wersji pakietu @angular/cli
  • Wdrożenie nowej osoby do pracy nad projektem jest łatwiejsze. Nie trzeba dbać o to, aby miał on dokładnie taką samą wersję globalną @angular/cli. W praktyce zaoszczędza to naprawdę wiele czasu i pieniędzy dla projektu!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *