何在Maven中使用Typescript配置Angular2应用

何在Maven中使用Typescript配置Angular2应用

本文介绍了如何在Maven中使用Typescript配置Angular2应用程序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Angular2的新手.我项目的技术堆栈是Angular2,带有打字稿和spring作为后端.我不想按照指示使用节点服务器来编译前端,但是我将需要使用TOMCAT和Maven代替.我有几个问题.

I am a newbie with Angular2. My project's technical stack is Angular2 with typescript and spring as backend. I don't want to use node server as directed to compile my frontend but I will need to use TOMCAT and Maven instead. I have a few questions.

  1. 我猜节点服务器会为每个.ts文件生成.js和.js.map,因为浏览器仅了解.js文件.我的理解正确吗?如何使用Maven和Tomcat完成此任务?
  2. 我想使用Maven从头开始构建我的应用程序.我更喜欢Bower作为前端任务管理器.

任何人都可以给我逐步指南,以使用"bower或任何其他前端任务管理工具(例如,缩小文件,创建应用程序支架"和"Maven进行后端任务管理")创建Angular2 + Spring应用程序吗?我愿意接受任何建议.

Can anyone give me a step by step guide to create an Angular2 + Spring application using 'bower or any other tools for frontend task management such as minification of files, creating application scaffold' and 'Maven for backend task management'? I am open for any suggestions.

推荐答案

我正在使用Maven在Angular 2 + Spring Boot应用程序中使用Typescript .ts文件.我通过 exec-maven-plugin npm install 用于依赖关系,将 npm运行tsc 用于将.ts文件转换为.js.

I'm using typescript .ts files in my Angular 2 + Spring Boot application with maven. I run npm install for dependencies and npm run tsc for converting .ts files to .js by exec-maven-plugin.

下面是我pom.xml中的插件部分.在我的应用程序中,pacakge.json,tsconfig.json和Types.json都在 src/main/resources 路径下,因此在该路径下运行npm任务

Below is the plugin portion from my pom.xml. In my application, pacakge.json, tsconfig.json and typings.json all under src/main/resources path, so run npm tasks under the path

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>

我的Angular2 + Spring Boot应用程序文件夹结构如下

My Angular2 + Spring Boot application folder structure is like below

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

在.jsp文件头部分中,包含 systemjs.config.js

On .jsp file head section, include the 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>

这也是我的WebMvcConfigurerAdapter代码到映射路径

Also here is my WebMvcConfigurerAdapter code to mapping path

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

我想提到的一件事是,如果操作系统是Windows或Mac,则在eclipse上运行exec-maven-plugin会有一些漏洞. Linux(Ubuntu)看起来完全没有问题.在Windows或Mac上从eclipse运行构建时,问题是它不了解npm命令并尝试查找此类文件,即使在终端机或命令窗口上的maven构建完全正常.

One thing I want to mention is there some hack on running the exec-maven-plugin on eclipse if the os is Windows or Mac. Linux(Ubuntu) looks no issue at all.When run the build from eclipse on Windows or Mac, the problem is it doesn't understand npm command and try to find such file, even though the maven build is totally fine on Terminal or Command Window.

为解决此类问题,我做了一些调整.对于Mac,请在/usr/bin 路径下为node和npm进行符号链接,如下所示.但是不允许修改/usr/bin ,所以我是在通过恢复磁盘重新启动后完成的

To solve such issue, I did some tweak.For Mac, making symbolic link for node and npm under /usr/bin path like below.However modifying /usr/bin is not allowed, so I done after rebooting by recovery disk

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

对于Windows,我在如下所示的系统路径下制作了node.bat和npm.bat文件完成此操作后,在Windows 10上的Eclipse和Command窗口中,Maven的构建都完全正常.

For Windows, I made node.bat and npm.bat file under system path like belowAfter doing this, the maven build totally fine from eclipse and command window both on 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%

这篇关于如何在Maven中使用Typescript配置Angular2应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-07 01:08