Вот что я сделал: -
- Установите Nodejs v6.9 +
- Run НПМ установить @ угловой/кли -g для углового CLI
- Установка Apache Maven или используйте любую дружественную Maven IDE
- Используйте свою необходимую конфигурацию Maven, я использовал простой webapp (WAR).
Справочник Stucture (За исключением ngapp Папка остальное стандартная структура Maven.)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
угловая часть
Открыть ngapp папку в терминале и типа нг init команда для инициализации узла и npm configurati на результат будет простой пример применения Angular2 будет следующая структура каталогов внутри папки ngapp: -
├── 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
Эта структура Угловая эквивалент структуры проекта Maven и ЦСИ каталог Угловая исходный код приложения, так же, как Команда maven build генерирует свой вывод в target folder, ng build команда генерирует свой вывод в dist папка.
Для того, чтобы упаковать сгенерированный Угловое приложение в Maven генерироваться WAR изменить конфигурацию сборки, чтобы изменить выходную папку с дист к WebApp, открытый угловой cli.json файл и изменить его OUTDIR, как показано ниже: -
"outDir": "../webapp/ng"
на данный момент нг построить команда будет генерировать встроенный Угловое приложение внутри нг каталог ngfirst/SRC/главная/webapp папка.
Maven Часть
Открыть pom.xml и настроить следующие три Maven плагинов: -
- компилятором плагин: Нет Java материал для компиляции в/SRC/главная/ngapp папку, исключите его.
- war-plugin:/src/main/ngapp - это угловая папка проекта и ее нельзя упаковывать в WAR, исключая ее.
- exec-plugin: Выполнение команд установки NPM и команды Angular-CLI для генерации углового приложения в папке webapp для окончательной упаковки. Аргумент --base-href требуется для загрузки угловых ресурсов из контекста контекста webapp.
Вот как это должно выглядеть следующим образом: -
<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>
Строительство Maven проекта (и угловыми App тоже)
Открыть терминал в корневой папке проекта ngfirst и запустить MVN package, это приведет к созданию WAR-файла (ngfirst.war) в target папке.
Развернуть ngfirst.war в контейнере, открыть http://localhost:8080/ngfirst/ng/index.html в браузере. (при необходимости измените свое имя хоста и порт)
Если все пошло правильно, вы должны увидеть приложение работает! в браузере, то есть угловое приложение на работе !!
JSP Предварительной обработка
Мы можем использовать динамические конфигурации и страницу возможности рендеринга технологии JSP с угловым применением, Угловое SPA обслуживаются контейнер Java, как и обычные HTML-страница, index.html в этом Если мы сконфигурируем JSP Engine для предварительной обработки файлов html, тогда вся магия JSP может быть включена в страницу Angular SPA, просто включите следующее внутри .XML
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Сохранить, восстановить Maven проект, развернуть WAR и вуаля !!
В настоящее время я работаю над одним и тем же, но посмотрю на эти ответы http://stackoverflow.com/questions/35704973/how-to-configure-angular2-application-using-typescript-with-maven/35708519 – Grim
если у вас нет машинописного текста и работает здесь, это хороший ответ, и тот, который я использовал http://stackoverflow.com/questions/35890887/how-to-get-angular2-to-work-in-eclipse-with- typescript – Grim
Спасибо Чарльз. Я следил за этими ссылками, но все же я не понимаю структуру каталогов и компиляцию. Если есть какая-либо ссылка, которая объясняет больше, это будет очень полезно. – RohanB