typescript - Angular-cli bygge mappestruktur

Standard angular-cli bygg genererer dist-mappen med veldig flat struktur - en assets-mappe og js-, html-filer. Finnes det en måte å lage f.eks. en scripts-mappe og legge alle js-filene i den under byggeprosessen?

Svar #1

CLI-en støtter dette ikke fullt ut ennå, men den gir noen nyttige verktøy som kan hjelpe deg langt på vei. Jeg trengte dette for å distribuere Angular-applikasjonen min sammen med en WAR samtidig som jeg prøvde å minimere mengden kompleksitet lagt til via servlet-mappings. Dette spørsmålet nevner ikke J2EE spesifikt, men jeg tror prinsipper fra denne løsningen kan deles på tvers av ulike miljøer.

Relevante ng build-parametere:

  • --deploy-url: Banekartleggingen som vil bli brukt på ressurser. Dette er sannsynligvis så nærme Angular-CLI for øyeblikket kommer det du leter etter.
  • --output-path: Angir en utgangskatalog for Angular-bygget (spesielt brukte jeg dette for å angi unike utgangskataloger for forskjellige miljøer, siden applikasjonen distribueres til flere mål med forskjellige konfigurasjoner).
  • --base-href: Rot-URI-en for applikasjonen. F.eks., /angular-app/ for http://localhost:4200/angular-app/. Dette setter <base href="<uri>"> head-taggen og er nødvendig for ruter uten hash. Det kan også være nødvendig for andre ting.

Den mest interessante for deg er sannsynligvis --deploy-url. Hvis du setter en deploy-URL til /dist/, for eksempel, vil referansene til JS-filer i din bygde applikasjon bli prefikset med /dist/.

To store store med denne metoden:

  • --deploy-url endrer ikke output-banen for JS-filene. Det endrer bare referansene til JS-filene. Filene selv vil fortsatt bli lagt i roten av byggekatalogen. Du må legge til et steg i byggeprosessen din for å fikse dette manuelt.
  • --deploy-url ser ikke ut til å fungere for andre ressurser. Jeg plasserer alle mine andre ressurser i assets/-katalogen, og den ferdige outputen refererer fortsatt til ressursene via assets/<path> (i stedet for dist/assets/<path> som ønsket). Du kan omgå dette ved å opprette en virtuell katalog eller en URL-omskriving.

Som referanse, her er min resulterende katalogstruktur for WAR-filen:

app/
    dist/    <-- Deployed Angular application
        assets/
            (images, CSS, etc)
        *.js
        (other assets pulled into the root path, e.g. *.(svg|eot|woff|woff2|ttf) from Font Awesome)
        index.html
    WEB-INF/
    ...
    index.jsp

Dette er trinnene jeg tar for å produsere denne strukturen:

  1. ng build -pr false --prod --output-path build/node-prod --base-href /angular-app/ --deploy-url /angular-app/dist/.
  2. Kopier innholdet i build/node-prod til WAR-byggekatalogens app/dist via en Gradle-oppgave.
  3. Pek index.jsp til index.html via innholdet <%@include file="dist/index.html"%>.
  4. Legg til en servlet-mapping for standardservleten (statisk innhold) for stiene /dist/* og /assets/*.
  5. Legg til URL-mapping via http://tuckey.org/urlrewrite/ for ^/assets/(.*)$ til /dist/assets/$1 (eller via httpd, nginx, etc.). Dette er nødvendig på grunn av fangsten gitt ovenfor for --deploy-url som ikke fungerer for andre ressurser.
  6. (Valgfritt) legg til 301- eller 302-viderekobling for ^/dist/index.html$ til rotkontekstbanen for å forhindre at brukere får tilgang til appen via dist-URIen.

I den resulterende nettappen er http://localhost/angular-app/ det eneste gyldige endepunktet for applikasjonen min. Dette endepunktet peker til index.jsp, som inkluderer innholdet i index.html, som laster relevant JS via <script src="/angular-app/dist/<some-file>.js"></script>-tagger.

Når noen andre ressurser er nødvendige, for eksempel logo-bildet, gjør siden en forespørsel til assets/<file-name>, som blir omskrevet på serversiden via Tuckey til dist/assets/<file-name>, og løses transparent til den forespurte ressursen.

Det fine med denne løsningen var at vi kunne distribuere Angular-applikasjonen i rotkonteksten uten å måtte legge alt som ng build bygde inn i rot-WAR-stien. Dette er spesielt fint fordi vi ikke ønsker å legge til globale servlet-mappinger (f.eks. *.js) når det kan unngås.

Relaterte artikler