web-dev-qa-db-fra.com

Comment configurer une application Angular2 en utilisant TypeScript avec Maven?

Je suis un débutant avec Angular2. La pile technique de mon projet est Angular2 avec TypeScript et spring en arrière-plan. Je ne veux pas utiliser le serveur de noeud comme indiqué pour compiler mon interface, mais je devrai plutôt utiliser Tomcat et Maven. J'ai quelques questions.

  1. Je suppose que le serveur de noeud génère les fichiers .js et .js.map pour chaque fichier .ts puisque le navigateur ne comprend que les fichiers .js. Ma compréhension est-elle correcte? Comment puis-je accomplir cette tâche en utilisant Maven et Tomcat?
  2. Je souhaite créer mon application à partir de zéro avec Maven. Je préférerai bower en tant que gestionnaire des tâches frontales.

Est-ce que n'importe qui peut me donner un guide pas à pas pour créer une application Angular2 + Spring en utilisant 'bower ou tout autre outil pour la gestion des tâches frontales, comme la minification de fichiers, la création d'un échafaudage d'application' et 'Maven pour la gestion des tâches principales'? Je suis ouvert à toutes suggestions.

mavenangulartypescriptbower
46
Gendaful

J'utilise des fichiers .ts TypeScript dans mon Angular 2 + application de démarrage Spring avec maven. Je lance npm install = pour les dépendances et npm run tsc pour convertir les fichiers .ts en .js par exec-maven-plugin.

Ci-dessous, la partie plugin de mon fichier pom.xml. Dans mon application, pacakge.json, tsconfig.json et typings.json se trouvent tous sous src/main/resources , exécutez donc les tâches npm sous le chemin

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 structure de mon dossier de l'application Angular2 + Spring Boot est semblable à celle ci-dessous.

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

Dans la section d'en-tête du fichier .jsp, incluez 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>

Aussi, voici mon code WebMvcConfigurerAdapter pour mapper le chemin

@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;
    }
}

Une chose que je tiens à mentionner est qu'il y a un peu de mal à exécuter le plug-in exec sur mecl sous Eclipse si le système d'exploitation est Windows ou Mac. Linux (Ubuntu) ne pose aucun problème. Lorsque vous exécutez la compilation d’Eclipse sous Windows ou Mac, le problème est qu’elle ne comprend pas la commande npm et tente de trouver un tel fichier, même si la compilation maven est tout à fait correcte dans un terminal ou une fenêtre de commande.

Pour résoudre ce problème, j'ai fait du tweak. Pour Mac, créer un lien symbolique pour node et npm sous /usr/bin comme ci-dessous. Toutefois, la modification /usr/bin n'est pas autorisée. J'ai donc terminé après le redémarrage par le disque de récupération.

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

Pour Windows, j’ai créé les fichiers node.bat et npm.bat sous le chemin système, comme indiqué ci-après. Après cela, le build maven était parfaitement correct à partir d’Eclipse et de la fenêtre de commande sous 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%
33
Steve Park

Les fichiers TypeScript, se terminant par .ts, sont compilés avec le compilateur TypeScript, pas node.js. Ils sont complètement séparés, jetez un oeil à http://www.typescriptlang.org/ pour plus d'informations sur TypeScript lui-même.

Pour utiliser Angular2, vous n'avez pas vraiment besoin d'utiliser TypeScript, vous pouvez écrire du Javascript ancien. Même si l'équipe Angular2 utilise TypeScript pour créer le framework.

Donc, pour répondre à votre première question, ni l'un ni l'autre ne sont impliqués. Vous créez votre code HTML, CSS et Javascript comme vous le souhaitez.

En ce qui concerne bower, Angular2 n’existe pas officiellement sur bower, seulement npm. Vous pouvez voir la discussion derrière ceci ici https://github.com/angular/angular/issues/4018 . Comme ils le disent dans la discussion, vous pouvez utiliser le point final GitHub si vous souhaitez vraiment utiliser Bower.

3
Namirna