consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
angular

Absolutne importowanie zależności w Angular CLI

author Grzegorz Lipecki
17 lutego 2017

Odpowiedzialny programista tworząc aplikacje przestrzega powszechnie uznanych zasad tworzenia oprogramowania. Jedną z takich zasad jest Single Responsibility Principle, która uczy nas, że każdy moduł powinien mieć jedno, jasno zdefiniowane zadanie. Przenosząc tę zasadę na strukturę aplikacji powinniśmy, co najmniej, wydzielić każdą tworzoną klasę do osobnego pliku. O ile świat JavaScript’u próbował wielokrotnie zmierzyć się z problemem modularyzacji aplikacji, to jednak dopiero standard ES6 pozwolił w pełni zaadaptować takie podejście.

Modularyzacja w ES6

W ramach standardu ES6 wprowadzono pojęcie modułu oraz standardowego sposobu wyrażania zależności za pomocą polecenia import.

Za moduł przyjmuje się pojedyczny plik. Wszystkie elementy w nim zdefiniowane są jego własnością i nie zabrudzają globalnej przestrzeni aplikacji. Elementy, które chcemy udostępnić innym modułom należy jawnie wskazać przez oznaczenie ich poleceniem export. Wyeksportowane elementy możemy importować i używać w modułach zależnych poleceniem import.

Przykładowo, możemy zdefiniować zależność pomiędzy modułami:

service.ts

export class Service {}

component.ts

import {Service} from './service';
export class Component {
	private service: Service;
}

Problemy z importowaniem zależności

Standardowo importowane moduły są wyszukiwane względem importującego pliku. W przypadku nietrywialnej struktury może to doprowadzić do pogroszenia czytelności aplikacji.

Wyobraźmy sobie strukturę kodu:

src
  \- user
    \- details
      user-details.component.ts
  \- authentication
    \- authentication.service.ts

Wówczas zawartość pliku user-details.component.ts mogłaby wyglądać:

component.ts

import {AuthenticationService} from '../../authentication/authentication.service';
export class UserDetailsService {
	private service: AuthenticationService;
}

Utrzymywanie względnych ścieżek importowanych modułów jest trudne. Czytelność istniejących importów jest wątpliwa, a dopisywanie nowych niewygodne. Rozwiązaniem tego problemu może być stosowanie absolutnych ścieżek do modułów, liczonych względem głównego katalogu ze źródłami. Przy takim podejściu dopisywanie nowych importów jest proste (widząc strukturę aplikacji), a czytając jesteśmy w stanie szybko się zorientować jakie zależności właściwie wciągamy.

Użycie absolutnych ścieżek zależności

Na szczęście zalecane podejście do pisania aplikacji w Angular 2 zakłada stosowanie kompilatora TypeScript, a ten od dłuższego czasu wspiera stosowanie absolutnych ścieżek przy importowaniu zależności. Dodatkowo, również Angular CLI prawidłowo obsluguje bundlowanie zasobów zbudowanych z wykorzystaniem absolutnych ścieżek.

W tym celu należy zmodyfikować plik konfiguracyjny kompilatora TypeScript. W pliku tsconfig.json dopisujemy atrybut baseUrl: “.”

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Od teraz możemy we wszystkich miejscach importować zależności podając ich absolutne ścieżki:

import {AuthenticationService} from 'authentication/authentication.service';
export class UserDetailsService {
	private service: AuthenticationService;
}

Podsumowanie

Wprowdzenie modularyzacji do standardu ES6 to ogromny krok w stronę poprawy jakości aplikacji. Jednak podawanie względnych ścieżek do zależności może szybko doprowadzić do pogorszenia czytelności kodu i przyprawić niejednego programistę o ból głowy. Na szczęścię kompilator TypeScript pozawala definiować zależności wskazując absolutne ścieżki - wystarczy za pomocą atrybutu baseUrl kompilatora zdefiniować katalog, względem którego chcemy wyszukiwać plików do importowania.

  • Wsparcie dla absolutnych importów w kompilatorze TypeScript
  • Wsparcie dla konfiguracji baseUrl w Angular CLI
Najnowsze wpisy

  • Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?
  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
wcag

Czy wiesz, że w Jest można automatycznie testować dostępność (a11y)?

author
Wojciech Stolarski 19 maj 2025
post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się