Konfigurieren eckig 2-Projekt mit maven und spring REST

Hier ist was ich getan habe:-

• Install Nodejs-v6.9+
• Laufen npm installieren @eckig/cli –g für Eckige CLI
• Installation von Apache Maven oder verwenden Maven freundlich IDE
• Verwenden Sie Ihre benötigte Maven-Konfiguration, die ich verwendet, einfache webapp (KRIEG).

Verzeichnisstruktur (Außer für ngapp Ordner rest ist standard-Maven-Struktur.)

ngfirst
├── pom.xml
├── src
│   └── main
│       ├── java
│       ├── resources
│       ├── webapp
│       └── ngapp

Eckigen Teil

Öffnen ngapp Ordner in das terminal und geben Sie ng-init - Befehl zu initialisieren node und npm-Konfiguration, wird das Ergebnis eine einfache Angular2 Beispiel-Anwendung wird die folgende Verzeichnisstruktur innerhalb ngapp Ordner:-

             ├── angular-cli.json
             ├── e2e
             ├── karma.conf.js
             ├── node_modules
             ├── package.json
             ├── protractor.conf.js
             ├── README.md
             ├── tslint.json
             ├── src
                 ├── app
                 ├── assets
                 ├── environments
                 ├── favicon.ico
                 ├── index.html
                 ├── main.ts
                 ├── polyfills.ts
                 ├── styles.css
                 ├── test.ts
                 └── tsconfig.json

Diese Struktur ist Gewinkelt äquivalent von Maven Projektstruktur und src Verzeichnis ist Kantig Anwendung Quelle, genau wie maven-build - Befehl generiert seine Ausgabe in Ziel Ordner, ng bauen Befehl generiert seine Ausgabe in dist Ordner.

Um-Paket der generierte Winkel-Anwendung innerhalb von Maven generierte KRIEG ändern Sie die build-Konfiguration ändern Sie die Ausgabe-Ordner aus dist zu webapp, öffnen Winkel-cli.json - Datei und ändern Sie die outDir wie folgt:-

"outDir": "../webapp/ng"

Zu diesem Zeitpunkt ng bauen Kommando erzeugen integrierte Winkel-Anwendung in ng Verzeichnis ngfirst/src/main/webapp Ordner.

Maven Teil

Öffnen pom.xml und konfigurieren Sie folgende drei maven-plugins:-

1. - compiler-plugin: Keine Java Sachen zu kompilieren in /src/main/ngapp Ordner ausschließen.
2. Krieg-plugin: /src/main/ngapp Eckig Projekt-Ordner und es sollte nicht sein, verpackt in einem KRIEG ausschließen.
3. exec-plugin: Ausführen von NPM Installieren und Winkel-CLI-Befehle zum Erstellen generieren Angular Anwendung im webapp-Ordner für die endgültige Verpackung. Argument - base-href zu laden erforderlich ist Eckig Ressourcen von webapp - context-Pfad.

Hier ist, wie es Aussehen sollte:-

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.5.0</version>
        <executions>
            <execution>
                <id>exec-npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>exec-npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>ng</executable>
                    <arguments>
                        <argument>build</argument>
                        <argument>--base-href=/ngfirst/ng/</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>  

Gebäude Maven-Projekt (und Kantige App auch)

Terminal öffnen in der Projekt-root-Ordner ngfirst und führen mvn package Befehl, erzeugt dies eine war-Datei (ngfirst.Krieg) in Ziel Ordner.

Bereitstellen ngfirst.Krieg in einem container, open http://localhost:8080/ngfirst/ng/index.html im Browser. (passen Sie sich den Hostnamen und den port, falls erforderlich)

Wenn alles gut gegangen ist, sollten Sie sehen, app funktioniert! im browser ist Kantig Anwendung bei der Arbeit!!

JSP Pre-Processing

Können wir nutzen die dynamische Konfiguration und die Seite-rendering-Fähigkeiten der JSP-Technologie mit Eckigen Anwendung, Winkel-SPA, serviert das Java-container als normale HTML-Seite, index.html in diesem Fall, wenn wir konfigurieren der JSP-Engine zu pre-Prozess-html-Dateien, dann alle JSP-Magie enthalten, können im inneren Winkel-SPA-Seite, nur sind die folgenden in web.xml

<servlet-mapping>
    <servlet-name>jsp</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>

Speichern, umbauen, maven-Projekt, bereitstellen von KRIEG und voila!!

InformationsquelleAutor J_Dev