proyecto - ¿Cómo configurar la aplicación Angular2 usando mecanografiado con Maven?

mvn compile command

Question

Soy un novato con Angular2. La pila técnica de mi proyecto es Angular2 con texto mecanografiado y resorte como back-end. No quiero usar el servidor de nodos como se indica para compilar mi interfaz, pero tendré que usar TOMCAT y Maven en su lugar. Tengo algunas preguntas.

1. Supongo que el servidor de nodos genera .js y .js.map para cada archivo .ts ya que el navegador solo entiende los archivos .js. Es mi entendimiento correcto? ¿Cómo puedo lograr esta tarea usando Maven y Tomcat?
2. Me gustaría construir mi aplicación desde cero utilizando Maven. Preferiré Bower como el administrador de tareas frontend.

¿Alguien puede darme una guía paso a paso para crear una aplicación Angular2 + Spring usando ''bower o cualquier otra herramienta para administración de tareas frontend como minificación de archivos, creación de andamios de aplicaciones'' y ''Maven para administración de tareas de back-end''? Estoy abierto para cualquier sugerencia.

Answer 1

Estoy utilizando archivos .ts de mecanografía en mi aplicación Angular 2 + Spring Boot con maven. Ejecuto npm install para dependencias y npm ejecutan tsc para convertir archivos .ts a .js por exec-maven-plugin .

A continuación se muestra la porción del complemento de mi pom.xml. En mi aplicación, pacakge.json, tsconfig.json y typings.json todo en la ruta src / main / resources , así que ejecute tareas npm en la ruta

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>

La estructura de mi carpeta de aplicaciones My Angular2 + Spring Boot es la siguiente

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

En la sección del encabezado del archivo .jsp , incluya el archivo 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>

También aquí está mi código WebMvcConfigurerAdapter a la ruta de mapeo

@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 que quiero mencionar es que hay algún truco en ejecutar el plugin exec-maven en eclipse si el sistema operativo es Windows o Mac. Linux (Ubuntu) no parece tener ningún problema. Cuando ejecuta la compilación de eclipse en Windows o Mac, el problema es que no entiende el comando npm y trata de encontrar dicho archivo, incluso si la compilación maven está totalmente bien en la Terminal o en la ventana de comandos.

Para resolver ese problema, hice algunos retoques. Para Mac, hacer un enlace simbólico para el nodo y npm en la ruta / usr / bin como a continuación. Sin embargo, modificar / usr / bin no está permitido, así que lo hice después de reiniciar el disco de recuperación

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

Para Windows, hice el archivo node.bat y npm.bat en la ruta del sistema como se muestra a continuación. Después de hacer esto, el maven compila totalmente bien desde el eclipse y la ventana de comandos tanto en 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

Los archivos de texto mecanografiado, que terminan en .ts, se compilan con el compilador de tipo mecanografiado, no node.js. Están completamente separados, eche un vistazo a http://www.typescriptlang.org/ para obtener más información sobre la escritura en sí.

Para usar Angular2, realmente no necesitas usar mecanografiado, podrías escribir un Javascript simple. Aunque el equipo de Angular2 está utilizando Typescript para crear el marco.

Entonces, para responder a su primera pregunta, ninguno de los dos está involucrado. Usted crea su HTML, CSS y Javascript como quiera.

En cuanto al uso de bower, Angular2 no existe en bower oficialmente, solo npm. Puede ver la discusión detrás de esto aquí https://github.com/angular/angular/issues/4018 . Como dicen en la discusión, puede usar el punto final de GitHub si realmente desea usar bower.