How to deploy angular code to Apache Tomcat?

How to deploy angular code to Apache Tomcat?

CodePudding user response：

1. run ng-build command in Visual Studio Code

2. copy the files from dist folder ex : C:\Users\ap022\Desktop\Project_Name\dist\MaterialDemo

3. paste the copied files into webapps folder of tomcat by creating new folder ex : E:\apache-tomcat-9.0.37\webapps

4. change the value of href in index.html from the copied files

CodePudding user response：

If you are using maven you can use 'maven-war-plugin' to create a .war file. Then you can deploy as a regualar war.

<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.0</version>
                <configuration>
                    <warName>PME_UI_ADMIN_PORTAL_${version}</warName>
                    <warSourceExcludes>**</warSourceExcludes>
                    <nonFilteredFileExtensions>
                        <!-- default value contains jpg,jpeg,gif,bmp,png -->
                        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                    </nonFilteredFileExtensions>
                    <webResources>
                        <resource>
                            <directory>dist</directory>
                            <!-- override the destination directory for this resource -->
                            <targetPath />
                            <!-- enable filtering -->
                            <filtering>true</filtering>
                        </resource>
                        <resource>
                            <directory>src/assets</directory>
                            <!-- override the destination directory for this resource -->
                            <targetPath>assets</targetPath>
                            <!-- enable filtering -->
                            <filtering>true</filtering>
                        </resource>
                    </webResources>
                  <webXml>web.xml</webXml>
                  <failOnMissingWebXml>true</failOnMissingWebXml>
                </configuration>
            </plugin>

Following plugin will install node and npm and will build source

<!-- Plugin to execute command  "npm install" and "npm run build" inside /angular directory -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>

                <configuration>
                    <workingDirectory>./</workingDirectory>
                </configuration>
                <executions>
                    <!-- It will install nodejs and npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v10.16.0</nodeVersion>
                            <npmVersion>6.9.0</npmVersion>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm install" inside "/angular" directory -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                     <!--It will execute command "npm lint"-->
                    <execution>
                        <id>npm lint</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run lint</arguments>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm build" inside "/angular" directory to clean and create "/dist" directory-->
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>