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

Question

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

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

Может кто-нибудь дать мне шаг за шагом руководством по созданию приложения Angular2 + Spring с помощью «беседки или любых других инструментов для управления задачами внешнего интерфейса, таких как минификация файлов, создание эшафотого приложения» и «Maven для управления задачами серверных «? Я открыт для любых предложений.

Answer 1

Я использую файлы машинописных файлов .ts в приложении Angular 2 + Spring Boot с maven. Я запускаю npm install для зависимостей и npm run tsc для преобразования файлов .ts в .js по exec-maven-plugin.

Ниже приведена часть плагина из моего pom.xml. В моем приложении pacakge.json, tsconfig.json и typings.json все под SRC/основные/ресурсы путь, поэтому запускать НУЮ задачу по пути

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

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

Чтобы решить эту проблему, я сделал некоторые настройки. Для Mac, создавая символическую ссылку для узла и npm под /usr/bin путь, как показано ниже. Однако изменение /USR/бен не допускается, так что я сделал после перезагрузки с помощью диска восстановления

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.

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% 

Answer 2

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

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

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

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