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

Я новичок с Angular2. Технический стек моего проекта Angular2 с typescript и spring как бэкэнд. Я не хочу использовать сервер node как указано для компиляции моего интерфейса, но мне нужно будет использовать TOMCAT и Maven. У меня есть несколько вопросов.

  • Я предполагаю, что node сервер создает .js и .js.map для всех .ts файлов, так как браузер понимает только файлы .js. Правильно ли я понимаю? Как я могу выполнить эту задачу с помощью Maven и Tomcat?
  • Я хотел бы создать приложение с нуля с помощью Maven. Я буду любить беседу в качестве диспетчера задач frontend.

Может ли кто-нибудь дать мне пошаговое руководство по созданию приложения Angular2 + spring, использующего "bower" или любые другие инструменты для управления внешними задачами, такие как минимизация файлов, создание приложений для подмостей "и" 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, если вы хотите использовать беседу.

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