如何使用带有 Maven 的打字稿配置 Angular2 应用程序？

Question

我是 Angular2 的新手。我的项目的技术堆栈是 Angular2，带有 typescript 和 spring 作为后端。我不想按照指示使用节点服务器来编译我的前端，但我需要改用 TOMCAT 和 Maven。我有几个问题。

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

任何人都可以逐步指导我使用 'bower or any other tools for frontend task management such as minification of files, creating application scaffold' 和 'Maven for backend task management' 创建 Angular2 + Spring 应用程序吗？我愿意接受任何建议。

Answer 1

以 .ts 结尾的 typescript 文件是用 typescript 编译器编译的，而不是 node.js。它们是完全独立的，请查看 http://www.typescriptlang.org/ 以获取有关打字稿本身的更多信息。

要使用 Angular2，您真的不需要使用打字稿，您可以编写普通的旧 Javascript。尽管 Angular2 团队正在使用 Typescript 创建框架。

所以要回答你的第一个问题，两者都没有涉及。您可以根据需要创建 HTML、CSS 和 Javascript。

至于使用bower，Angular2实际上并没有正式存在于bower上，只有npm。你可以在这里看到背后的讨论 https://github.com/angular/angular/issues/4018。正如他们在讨论中所说，如果您真的想使用 Bower，可以使用 GitHub 端点。

Answer 2

我在 Angular 2 + Spring 引导应用程序中使用 typescript .ts 文件和 maven。我运行 npm install 依赖项和 npm 运行 tsc 通过 [=40 将 .ts 文件转换为 .js =]exec-maven-plugin.

下面是我 pom.xml 的插件部分。在我的应用程序中，pacakge.json、tsconfig.json 和 typings.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启动应用程序文件夹结构如下

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

我想提到的一件事是，如果 os 是 Windows 或 Mac，那么运行在 eclipse 上执行 exec-maven-plugin 有一些 hack。 Linux(Ubuntu) 看起来完全没有问题。当运行在 Windows 或 Mac 上从 eclipse 构建时，问题是它不理解 npm 命令并尝试查找这样的文件，即使 maven 构建在终端上完全正常或命令 Window.

为了解决这个问题，我做了一些调整。对于 Mac，在 /usr/bin 路径下为节点和 npm 创建符号 link，如下所示。但是修改/usr/bin是不允许的，所以我通过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文件，如下所示这样做之后，maven 在 Windows 10.

上从 eclipse 和命令 window 构建完全正常

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 的打字稿配置 Angular2 应用程序？

How to configure Angular2 application using typescript with Maven?

maven

typescript

bower

angular