Как настроить приложение Angular2 с помощью typescript с Maven?

Ответ 1

Я использую typescript.ts файлы в моем загрузочном приложении Angular 2 + Spring с maven. Я запускаю npm install для зависимостей и npm запускать tsc для преобразования файлов .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>

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

Одна вещь, которую я хочу упомянуть, - это взломать запуск ex-maven-plugin на eclipse, если os - это Windows или Mac. Linux (Ubuntu) вообще не выглядит проблемой. Когда вы запускаете сборку из eclipse на Windows или Mac, проблема в том, что она не понимает команду npm и пытается найти такой файл, хотя сборка maven полностью прекрасна в Terminal или Command Window.

Чтобы решить эту проблему, я сделал несколько настроек. Для Mac, создавая символическую ссылку для node и npm в каталоге /usr/bin, как показано ниже. Однако изменение /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 под системным путем, как показано ниже После этого maven build полностью отлично от eclipse и окна команд как на 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%

Ответ 2

Файлы typescript, заканчивающиеся на .ts, скомпилированы с помощью компилятора typescript, а не node.js, они полностью отделены друг от друга, посмотрите http://www.typescriptlang.org/ для получения дополнительной информации о typescript.

Чтобы использовать Angular2, вам действительно не нужно использовать typescript, вы можете написать простой старый Javascript, хотя команда Angular2 использует typescript для создания фреймворка.

Итак, чтобы ответить на ваш первый вопрос, ни один из них не задействован, вы создаете свой HTML, CSS и Javascript, как хотите.

Что касается использования беседки, Angular2 официально не существует на башне, только npm, вы можете увидеть обсуждение здесь https://github.com/angular/angular/issues/4018. Как говорится в обсуждении, вы можете использовать конечную точку GitHub, если вы хотите использовать беседу.

Я надеюсь, что это ответит на ваши вопросы.