我是Angular2的新手。我项目的技术堆栈是Angular2,带有打字稿和spring作为后端。我不想按照指示使用节点服务器来编译前端,但是我将需要使用TOMCAT和Maven代替。我有几个问题。
谁能给我循序渐进的指南,以使用“ bower或任何其他前端任务管理工具(例如,缩小文件,创建应用程序支架”和“用于后端任务管理的Maven”)创建Angular2 + Spring应用程序?我愿意提出任何建议。
我正在使用Maven在Angular 2 + Spring Boot应用程序中使用Typescript .ts文件。我运行npm install以获得依赖关系,并运行npm tsc通过exec-maven-plugin将.ts文件转换为.js 。
以下是我pom.xml中的插件部分。在我的应用程序中,pacakge.json,tsconfig.json和Types.json都在src / main / resources路径下,因此在该路径下运行npm任务
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应用程序文件夹结构如下
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
<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代码到映射路径
@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构建在终端或命令窗口上完全正常。
为了解决这个问题,我做了一些调整。对于Mac,如下所示在/ usr / bin路径下为node和npm进行符号链接。但是不允许修改/ usr / bin,因此我是在通过恢复磁盘重新启动后完成的
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的构建都完全正常。
高于海平面
@echo off
set arg1=%1
set arg2=%2
set arg3=%3
set arg4=%4
C:\Progra~1\nodejs\npm.cmd %arg1% %arg2% %arg3% %arg4%
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句