2016-02-29 7 views
43

मैं कोणीय 2 के साथ एक नौसिखिया हूँ। मेरी परियोजना का तकनीकी ढेर एंगुलर 2 है जिसमें टाइपस्क्रिप्ट और वसंत बैकएंड के रूप में है। मैं अपने फ्रंटेंड को संकलित करने के लिए निर्देशित नोड सर्वर का उपयोग नहीं करना चाहता हूं लेकिन मुझे इसके बजाय टॉमकैट और मेवेन का उपयोग करने की आवश्यकता होगी। मेरे कुछ प्रश्न हैं।मैवेन के साथ टाइपस्क्रिप्ट का उपयोग कर Angular2 एप्लिकेशन को कॉन्फ़िगर कैसे करें?

  1. मुझे लगता है कि नोड सर्वर प्रत्येक .ts फ़ाइलों के लिए .js और .js.map उत्पन्न करता है क्योंकि ब्राउजर केवल .js फ़ाइलों को समझता है। क्या मेरी समझ सही है? मैवेन और टोमकैट का उपयोग करके मैं यह कार्य कैसे पूरा कर सकता हूं?
  2. मैवेन का उपयोग करके स्क्रैच से अपना एप्लिकेशन बनाना चाहता हूं। मैं मोर्चा को फ्रंटेंड टास्क मैनेजर के रूप में पसंद करूंगा।

किसी को भी मुझे बैकएंड कार्य प्रबंधन के लिए उपयोग कर एक Angular2 + स्प्रिंग आवेदन बनाने के लिए कदम गाइड द्वारा एक कदम 'बोवर या ऐसी फ़ाइलों का minification के रूप में दृश्यपटल कार्य प्रबंधन के लिए किसी अन्य उपकरण, आवेदन पाड़ बनाने' और 'Maven दे सकते हैं '? मैं किसी भी सुझाव के लिए खुला हूं।

+1

टाइपप्रति संकलक (npm.bat निर्माण tsc) .js और मानचित्र फ़ाइलों को उत्पन्न करता है, नोड.जे.एस. नहीं। एक बार जब आपका जेएस, सीएसएस, एचटीएमएल, आदि हो तो आप उन्हें किसी अन्य वेबसाइट की तरह ही सेवा देते हैं। आपके इनपुट के लिए – rgvassar

उत्तर

32

मैं अपने कोणीय 2 + स्प्रिंग बूट एप्लिकेशन में मेवेन के साथ टाइपस्क्रिप्ट .ts फ़ाइलों का उपयोग कर रहा हूं। मैं एनपीएम चलाता हूं निर्भरताओं और एनपीएम रन टीएससी को .ts फ़ाइलों को .js में exec-maven-plugin द्वारा कनवर्ट करने के लिए चलाएं।

नीचे मेरे pom.xml से प्लगइन भाग है। अपने आवेदन, pacakge.json, tsconfig.json और typings.json सभी के तहत src/मुख्य/संसाधनों पथ, तो पथ के अंतर्गत 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 + स्प्रिंग बूट आवेदन फ़ोल्डर संरचना की तरह नीचे

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

एक बात मैं उल्लेख करना चाहते हैं वहाँ ग्रहण पर कार्यकारी-Maven-प्लगइन चल रहा है, तो ओएस विंडोज या मैक है पर कुछ हैक है । लिनक्स (उबंटू) बिल्कुल कोई मुद्दा नहीं दिखता है। जब विंडोज या मैक पर ग्रहण से निर्माण चलाते हैं, तो समस्या यह है कि यह एनपीएम कमांड को समझ में नहीं आता है और ऐसी फ़ाइल को खोजने का प्रयास करें, भले ही मेवेन बिल्ड टर्मिनल या कमांड विंडो पर पूरी तरह ठीक हो।

इस तरह के मुद्दे को हल करने के लिए, मैंने कुछ चिमटा किया। मैक के लिए, /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 दोनों विंडोज पर ग्रहण और कमांड विंडो से पूरी तरह से ठीक 10.

@echo off 
set arg1=%1 
set arg2=%2 
set arg3=%3 
set arg4=%4 
C:\Progra~1\nodejs\npm.cmd %arg1% %arg2% %arg3% %arg4% 
+1

मिलते हैं लेकिन यदि आप नोड_मोड्यूल शामिल करते हैं तो आप युद्ध बहुत विशाल होंगे, है ना? –

+1

हां, युद्ध फ़ाइल बड़ी होगी। मेरा वसंत बूट ऐप मूल रूप से वेबजर का उपयोग कर रहा था जिसे युद्ध फ़ाइल में भी शामिल किया गया था और वितरित करने के लिए डिज़ाइन किया गया था। लेकिन आप वेब सर्वर के लिए node_module सेट कर सकते हैं और प्रॉक्सी को रिवर्स कर सकते हैं। –

+0

मैं समझता हूं कि आप आकार को कम करने के लिए उपयोगकर्ता को बोवर कर सकते हैं और केवल वही शामिल कर सकते हैं जो आप चाहते हैं, लेकिन मुझे नहीं पता कि मैं इसे सही समझा –

2

टाइप्सक्रिप्ट फाइलें, जो .ts में समाप्त होती हैं, टाइपस्क्रिप्ट कंपाइलर के साथ संकलित की जाती हैं, नोड.जे.एस. वे पूरी तरह से अलग हैं, टाइपस्क्रिप्ट पर अधिक जानकारी के लिए http://www.typescriptlang.org/ पर एक नज़र डालें।

कोणीय 2 का उपयोग करने के लिए, आपको वास्तव में टाइपस्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है, आप सादे पुराने जावास्क्रिप्ट लिख सकते हैं। भले ही Angular2 टीम ढांचे को बनाने के लिए टाइपस्क्रिप्ट का उपयोग कर रही है।

तो अपने पहले प्रश्न का उत्तर देने के लिए, न ही शामिल हैं। हालांकि आप अपना एचटीएमएल, सीएसएस और जावास्क्रिप्ट बनाते हैं।

बोवर का उपयोग करने के लिए, कोणीय 2 वास्तव में केवल आधिकारिक रूप से बोवर पर मौजूद नहीं है। आप यहां https://github.com/angular/angular/issues/4018 के पीछे चर्चा देख सकते हैं। जैसा कि वे चर्चा में कहते हैं, आप गिटहब एंडपॉइंट का उपयोग कर सकते हैं यदि आप वास्तव में बोअर का उपयोग करना चाहते हैं।

+0

धन्यवाद नमिरना। मैं अपनी परियोजना को स्थापित करने के लिए कुछ वैकल्पिक टूल ढूंढ रहा हूं जिसमें कोणीय 2 और वसंत है। चूंकि बोवर एंगुलर 2 के लिए एक विकल्प नहीं है, इसलिए मैं सोच रहा था कि क्या कोई अन्य उपकरण है जिसमें मेवेन के साथ अच्छा एकीकरण है? – Gendaful

+0

एनपीएम दुनिया को ले रहा है ऐसा लगता है :) मैंने मैवेन के साथ अपने एकीकरण को नहीं देखा है, लेकिन मुझे विश्वास नहीं है कि यह वहां नहीं है क्योंकि एनपीएम सचमुच हर जगह है और वेब पर निर्भरताओं के लिए वास्तविक तथ्य है आज विकास ... और एक बहुत ही तेज़ Google खोज कर मुझे प्लगइन – Namirna

संबंधित मुद्दे