Wróć do strony głównej

ANGULAR 2 – SharedModule w większych projektach

Cześć! W dzisiejszym artykule pokażę, jak możemy współdzielić sharedModule w projektach o większej skali.

Wyobraźmy sobie, że pracujemy w projekcie o bardzo dużej skali, który składa się z paru mniejszych projektów/modułów, nad którymi pracują osobne zespoły. Natomiast design aplikacji i stylistka komponentów jest taka sama, w celu zgodności produktów/modułów. Czyż nie byłoby wspaniale, jeśli zespoły między sobą mogły korzystać z tego samego sharedModule (zawiera reużywalne komponenty, dyrektywy, pipe’y) i styli? Pewnie, że tak 😉

Mamy 2 rozwiązania:

  1. zespoły kopiują od siebie folder sharedModule, z reguły od pierwszego zespołu, który zaczął go tworzyć, wybierają co trzeba, resztę wyrzucają. Minusy są oczywiste – jeśli designer zacznie zmieniać stylistykę lub deweloper implementację, trzeba będzie ją zmieniać wśród wszystkich zespołów, które korzystają z tego samego kodu. Kolejnym minusem jest ponowne dorzucanie nowych reużywalnych komponentów, w złożonym projekcie będzie to nieutrzymwalne
  2. wydzielenie sharedModule do osobnego repozytorium i zaciągnie go poprzez NPM

 

Zapewne się domyślasz, że skupię się na drugim wariancie. Ale najpierw musimy zacząć od uwierzytelnienia użytkownika.

KLUCZ SSH

Pierwsze od czego zaczniemy, to stworzenie nowego repozytorium. Wrzucamy tam wszystkie rzeczy, które chcemy udostępnić do innych projektów. Jeśli już to wykonałeś, to musisz stworzyć klucz SSH, który pozwoli nam na uwierzytelnienie użytkownika podczas użycia polecenia npm install.

Celem artykułu nie jest tłumaczenie czym są klucze SSH. Musisz zagłębić temat samemu. Przedstawię wyłącznie minimum:

1. Ściągamy GIT BASH’a:

https://git-scm.com/downloads

2. Po instalacji, urchamiamy Git Basha. Na ekranie powinien pojawić się terminal, w którym wpisujemy:

Klikamy parę razy enter, aż do zakończenia.

3. W ten sposób generujemy parę kluczy SSH (publiczny i prywatny). W katalogu użytkownika windowsa (C:/users/username) powinien pojawić się folder o nazwie „.ssh”, który będzie zawierał trzy pliki:

  • id_rsa
  • id_rsa.pub
  • known_hosts

Wchodzimy do pliku id_rsa.pub i kopiujemy jego zawartość.

Następnie logujemy się na koncie Githuba (lub np. Stasha, zależnie czego używasz w projekcie), wchodzimy do account settings -> SSH and GPG keys i klikamy ADD NEW SSH KEY. Jeżeli chodzi o Githuba, widok wygląda następująco:

SharedModule - ssh

W polu key wklejamy nasz publiczny klucz z pliku id_rsa.pub a następnie klikamy Add SSH key. W tym momencie, będziemy mogli być uwierzytelniani poprzez SSH.

REPOZYTORIUM POBRANE PRZEZ NPM

Dla łatwiejszego przedstawienia dalszej części artykułu, załóżmy, że mamy dwa repozytoria:

  • angular-project (nasz projekt z aplikacją, tutaj będziemy importować moduł)
  • shared-module (moduł z reużywalnymi komponentami)

Wchodzimy do pliku package.json w repozytorium angular-project, w obiekcie dependencies wrzucamy następującą linijkę:

Powyższa linijka zawiera adres do naszego repozytorium z shared-module.

Po hashu (#) umieszczamy nazwę brancha, z którego chcemy zaciągnąć pliki. Standardowo będzie to develop.

Następnie przechodzimy do katalogu z repozytorium shared-module, otwieramy terminal i wpisujemy komendę:

Dzięki temu, repozytorium shared-module będzie mogło być zaciągane poprzez npm install (sprawdź, czy w repozytorium shared-module, pojawił się plik package.json).

Wracamy do projektu angular-project, uruchamiamy terminal, wpisujemy komendę:

Wynikowo, w katalogu node_modules powinien pojawić się katalog shared-module.

Przechodzimy do app.module.ts i w imports, dodajemy nasz shared-module:

Vuala! w tym momencie, możemy korzystać ze wszystkich komponentów, które znajdują się w repozytorium shared-module. Nie musisz się martwić, że Twój moduł jest w node_modules, jeśli używasz Angular CLI, to komenda

wyciągnie Ci ten moduł i skompiluje go do finalnego bundle.js podczas tworzenia paczki produkcyjnej.

Zalety rozwiązania:

  • łatwość w utrzymaniu współdzielonych komponentów wśród zespołów
  • każdy team może pushować swoje reużywalne komponenty do wspólnego repo, dzięki temu wszystkie inne teamy automatycznie dostają do nich dostęp, wyłącznie wykonując komendę npm install
  • możemy korzystać z branchy
  • możemy trzymać wyłącznie na własne potrzeby repozytorium z komponentami i zaciągnąć je szybciutko do nowych projektów poprzez NPM

That’s all folks!

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

5 komentarzy

  1. Greg

    Fajna storna.
    Jestem właśnie na etapie nauki angulara. Utknąłem na zapewne prostej rzeczy ale nie potrafię jej przeskoczyć otóż w projekcie chciałbym powiedzmy wczytać bardziej skomplikowany plik json.

    [
    {
    „id”: 1,
    „idName”: „xxx”,
    „name”: „xxx”,
    „images”: [„IMG_1.jpg”,”IMG_2.jpg”,”IMG_3.jpg”,”IMG_4.jpg”]
    },
    {
    „id”: 2,
    „idName”: „xxx”,
    „name”: „xxx”,
    „images”: [„IMG_5.jpg”,”IMG_6.jpg”,”IMG_7.jpg”,”IMG_8.jpg”]
    }
    ]

    importuje Http
    Później

    constructor(private http: Http) {
    this.http = http;
    this.loadGallery();
    }

    loadGallery() {
    this.http.get(’./data/home.json’)
    .flatMap((data) => data.json())
    .subscribe((data) => {
    this.gallerys.push(data);
    console.log(this.gallerys);
    });
    }

    a w template

    {{gallery.id}} {{gallery.name}}

    I tutaj utknąłem, jak się dobrać do „images” i wyświetlić skomplikowane jsony.

    • jak już w konstruktorze piszesz
      constructor(private http: Http)
      to potem niżej nie powtarzasz this.http = http. Dodałeś słówko private, więc nie musisz tego robić. Generalnie jest to bardziej złożona sprawa, polecam najpierw przerobić tutorial na stronie http://www.angular.io a potem zacząć kodzić. Nie jestem w stanie Ci wytłumaczyć jak to ma być poprawnie zrobione nie poświęcając przynajmniej 40 minut czasu. W skrócie:
      – zrób serwis dla galerii, wstrzyknij tam http
      – w tym serwisie zrób metodę, która ma http get i łapie ten plik json
      – w komponencie wstrzyknij ten serwis, subskrybuj się do tej metody, która ma to http.

      • Greg

        Poradziłem sobie w inny sposób.
        W template użyłem:
        ul
        li *ngFor=”let gallery of gallerys”
        div {{gallery.id}} {{gallery.name}} div
        div *ngFor=”let image of gallery.images”>{{image}} div
        /li
        /ul
        i działa dzięki. Nie wiem czy to „najszczęśliwsze” rozwiązanie ale na chwilę obecną wystarczy 🙂
        Czasami dłuższa przerwa od problemu jest najlepszym rozwiązaniem.

  2. Paweł

    Dzięki za fajny pomysł.
    Myślę że w taki sposób można by było też współdzielić plik css pomiędzy projektami w jakimś udostępnionym tak katalogu. Chyba że tak nie zadziała i trzeba będzie stworzyć osobny komponent a w nim publicznie css (za pomocą encapsulation: ViewEncapsulation.None) ?

    • hej:) trochę to już przestarzałe, można pomyśleć o podejściu monorepo przy użyciu Nrwl.io (poszukaj pod hasłem angular nx), wtedy w jednym repo masz wiele projektów i osobno katalog z libkami, z których wszystkie projekty korzystają. Również z cssów.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *