Come configurare l'applicazione Angular2 utilizzando dattiloscritto con Maven?

Question

Sono un principiante con Angular2. Lo stack tecnico del mio progetto è Angular2 con dattiloscritto e molla come backend. Non voglio usare il nodo server come diretto per compilare il mio frontend, ma dovrò usare TOMCAT e Maven. Ho alcune domande.

1. Immagino che il server dei nodi generi .js e .js.map per ogni file .ts dal momento che il browser comprende solo i file .js. La mia comprensione è corretta? Come posso realizzare questo compito usando Maven e Tomcat?
2. Mi piacerebbe creare la mia applicazione da zero usando Maven. Preferirò il bower come task manager di frontend.

Qualcuno può darmi una guida passo passo per creare un'applicazione Angular2 + Primavera utilizzando 'pergolato o altri strumenti per la gestione delle attività frontend come la minimizzazione dei file, creazione di impalcatura applicazione' e 'Maven per la gestione delle attività di back-end '? Sono aperto a qualsiasi suggerimento.

Answer 1

Uso i file typescript .ts nella mia applicazione Angular 2 + Spring Boot con Maven. Corro npm install per dipendenze e npm run tsc per la conversione di file .ts in .js per exec-maven-plug-.

Di seguito è la parte plug-in dal mio pom.xml. Nella mia applicazione, pacakge.json, tsconfig.json e typings.json tutto sotto src/main/risorse percorso, in modo di eseguire le attività NPM nel percorso

pom.xml

<parent> 
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-parent</artifactId> 
    <version>1.3.5.RELEASE</version> 
</parent> 

<packaging>war</packaging> 


<build> 
    <plugins> 
     <plugin> 
      <groupId>org.apache.maven.plugins</groupId> 
      <artifactId>maven-compiler-plugin</artifactId> 
      <configuration> 
       <source>1.8</source> 
       <target>1.8</target> 
      </configuration> 
     </plugin> 
     <plugin> 
      <groupId>org.springframework.boot</groupId> 
      <artifactId>spring-boot-maven-plugin</artifactId> 
     </plugin> 
     <plugin> 
      <groupId>org.codehaus.mojo</groupId> 
      <artifactId>exec-maven-plugin</artifactId> 
      <executions> 
       <execution> 
        <id>exec-npm-install</id> 
        <phase>generate-sources</phase> 
        <configuration> 
         <workingDirectory>${project.basedir}/src/main/resources</workingDirectory> 
         <executable>npm</executable> 
         <arguments> 
          <argument>install</argument> 
         </arguments> 
        </configuration> 
        <goals> 
         <goal>exec</goal> 
        </goals> 
       </execution> 
       <execution> 
        <id>exec-npm-run-tsc</id> 
        <phase>generate-sources</phase> 
        <configuration> 
         <workingDirectory>${project.basedir}/src/main/resources</workingDirectory> 
         <executable>npm</executable> 
         <arguments> 
          <argument>run</argument> 
          <argument>tsc</argument> 
         </arguments> 
        </configuration> 
        <goals> 
         <goal>exec</goal> 
        </goals> 
       </execution> 
      </executions> 
     </plugin> 

mio Angular2 + Primavera Boot struttura di cartelle applicazione è come qui di seguito

src/main/resources 
        /app   - .ts and converted .js 
        /css 
        /images 
        /js   - systemjs.config.js is also placed here 
        /node_modules - generated by npm install and will include in war 
        /typings 
        application.properties 
        package.json 
        tsconfig.json 
        typings.json 

src/main/webapp 
       /WEB-INF 
         /jsp  - all .jsp files 

Sulla testata del file .jsp, includono le systemjs.config.js

<script type="text/javascript" src="webjars/zone.js/0.6.12/dist/zone.js"></script> 
<script type="text/javascript" src="webjars/reflect-metadata/0.1.3/Reflect.js"></script> 
<script type="text/javascript" src="webjars/systemjs/0.19.27/dist/system.js"></script> 
<script type="text/javascript" src="js/systemjs.config.js"></script> 

Anche qui è il mio codice WebMvcConfigurerAdapter al percorso di mappatura

@Configuration 
@EnableWebMvc 
@ComponentScan(basePackages = "com.my.controller") 
public class WebConfig extends WebMvcConfigurerAdapter { 

    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry) { 
     if (!registry.hasMappingForPattern("/webjars/**")) { 
      registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/"); 
     } 
     if (!registry.hasMappingForPattern("/images/**")) { 
      registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/"); 
     } 
     if (!registry.hasMappingForPattern("/css/**")) { 
      registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/"); 
     } 
     if (!registry.hasMappingForPattern("/js/**")) { 
      registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/"); 
     } 
     if (!registry.hasMappingForPattern("/app/**")) { 
      registry.addResourceHandler("/app/**").addResourceLocations("classpath:/app/"); 
     } 
     if (!registry.hasMappingForPattern("/node_modules/**")) { 
      registry.addResourceHandler("/node_modules/**").addResourceLocations("classpath:/node_modules/"); 
     } 
    } 

    @Bean 
    public InternalResourceViewResolver internalViewResolver() { 
     InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); 
     viewResolver.setPrefix("/WEB-INF/jsp/"); 
     viewResolver.setSuffix(".jsp"); 
     viewResolver.setOrder(1); 
     return viewResolver; 
    } 
} 

Una cosa che voglio menzionare c'è qualche trucco sulla gestione del exec-maven-plugin su Eclipse se il sistema operativo è Windows o Mac . Linux (Ubuntu) non sembra affatto un problema. Quando si esegue la compilazione da Eclipse su Windows o Mac, il problema è che non capisce il comando npm e tenta di trovare tale file, anche se la compilazione di Maven è completamente soddisfacente su Terminal o Command Window.

Per risolvere questo problema, ho apportato qualche modifica. Per Mac, creando un collegamento simbolico per nodo e npm sotto il percorso /usr/bin come di seguito. Tuttavia modificando /usr/bin non è consentito, così ho fatto dopo il riavvio dal disco di ripristino

lrwxr-xr-x  1 root wheel  17 May 22 03:01 node -> ../local/bin/node 
lrwxr-xr-x  1 root wheel  44 May 22 02:50 npm -> ../local/lib/node_modules/npm/bin/npm-cli.js 

Per Windows, ho fatto node.bat e file di npm.bat sotto percorso di sistema come qui di seguito Dopo aver fatto questo , l'esperto di costruire tutto bene da Eclipse e finestra di comando sia su Windows 10.

npm.bat

@echo off 
set arg1=%1 
set arg2=%2 
set arg3=%3 
set arg4=%4 
C:\Progra~1\nodejs\npm.cmd %arg1% %arg2% %arg3% %arg4% 

Answer 2

I file di dattiloscritto, che terminano in .ts, sono compilati con il compilatore typescript, non con node.js. Sono completamente separati, dai un'occhiata a http://www.typescriptlang.org/ per maggiori informazioni sul dattiloscritto stesso.

Per utilizzare Angular2, non è necessario utilizzare dattiloscritto, è possibile scrivere semplicemente JavaScript vecchio. Anche se il team Angular2 utilizza Typescript per creare il framework.

Quindi, per rispondere alla prima domanda, nessuno dei due è coinvolto. Tu crei il tuo HTML, CSS e Javascript come vuoi tu.

Per quanto riguarda l'uso del pergolato, Angular2 in realtà non esiste sul pergolato ufficialmente, solo in npm. Puoi vedere la discussione dietro questo qui https://github.com/angular/angular/issues/4018. Come si dice nella discussione è possibile utilizzare l'endpoint GitHub se si desidera veramente utilizzare Bower.