webentwicklung-frage-antwort-db.com.de

Wie konfiguriere ich die Angular2-Anwendung mit TypeScript mit Maven?

Ich bin ein Neuling bei Angular2. Der technische Stack meines Projekts ist Angular2 mit TypeScript und Spring als Backend. Ich möchte Node Server nicht wie angewiesen verwenden, um mein Frontend zu kompilieren, sondern muss stattdessen Tomcat und Maven verwenden. Ich habe ein paar Fragen.

  1. Ich denke, Node Server generiert .js und .js.map für jede .ts-Datei, da der Browser nur .js-Dateien versteht. Ist mein Verständnis korrekt? Wie kann ich diese Aufgabe mit Maven und Tomcat ausführen?
  2. Ich möchte meine Anwendung mit Maven von Grund auf neu erstellen. Ich bevorzuge Bower als Frontend-Task-Manager.

Kann mir jemand eine Schritt-für-Schritt-Anleitung zum Erstellen einer Angular2 + Spring-Anwendung mit "Bower" oder anderen Tools für die Verwaltung von Front-End-Aufgaben geben, z. Für Anregungen bin ich offen.

46
Gendaful

Ich verwende TypeScript .ts-Dateien in meiner Angular 2 + Spring Boot-Anwendung mit maven. Ich führe npm install für Abhängigkeiten aus und npm run tsc zum Konvertieren von .ts-Dateien in .js mit exec-maven-plugin.

Unten ist der Plugin-Teil aus meiner pom.xml. In meiner Anwendung befinden sich pacakge.json, tsconfig.json und typings.json unter src/main/resources . Führen Sie daher npm-Tasks unter dem Pfad aus

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>

Die Ordnerstruktur meiner Angular2 + Spring Boot-Anwendung ist wie folgt

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

Fügen Sie im Abschnitt .jsp file head die Datei systemjs.config.js hinzu.

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

Hier ist auch mein WebMvcConfigurerAdapter-Code für den Zuordnungspfad

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

Eine Sache, die ich erwähnen möchte, ist, dass das exec-maven-plugin unter Eclipse gehackt wird, wenn das Betriebssystem Windows oder Mac ist. Linux (Ubuntu) scheint überhaupt kein Problem zu sein. Wenn Sie den Build von Eclipse unter Windows oder Mac ausführen, besteht das Problem darin, dass der Befehl npm nicht verstanden wird und versucht wird, eine solche Datei zu finden, obwohl der Build von maven im Terminal- oder Befehlsfenster völlig in Ordnung ist.

Um dieses Problem zu lösen, habe ich einige Optimierungen vorgenommen. Stellen Sie für Mac wie unten beschrieben eine symbolische Verknüpfung für Node und Npm unter dem Pfad /usr/bin her. Das Ändern von /usr/bin ist jedoch nicht zulässig. Dies habe ich nach dem Neustart von der Wiederherstellungsdiskette durchgeführt

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

Unter Windows habe ich die Dateien node.bat und npm.bat wie folgt unter dem Systempfad erstellt. Danach hat der Maven unter Windows 10 sowohl mit Eclipse als auch mit dem Befehlsfenster einwandfrei funktioniert.

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%
33
Steve Park

Die mit .ts endenden TypeScript-Dateien werden mit dem TypeScript-Compiler kompiliert, nicht mit node.js. Sie sind vollständig voneinander getrennt. Weitere Informationen zu TypeScript selbst finden Sie unter http://www.typescriptlang.org/ .

Um Angular2 zu verwenden, müssen Sie nicht unbedingt TypeScript verwenden, sondern können einfaches altes Javascript schreiben. Obwohl das Angular2-Team TypeScript verwendet, um das Framework zu erstellen.

Um Ihre erste Frage zu beantworten, sind beide nicht beteiligt. Sie erstellen HTML, CSS und Javascript nach Ihren Wünschen.

Angular2 gibt es offiziell nicht für die Verwendung von bower, sondern nur für npm. Die Diskussion dazu finden Sie hier https://github.com/angular/angular/issues/4018 . Wie in der Diskussion bereits erwähnt, können Sie den GitHub-Endpunkt verwenden, wenn Sie wirklich Bower verwenden möchten.

3
Namirna