Deploy Angular Maven WebApp on Tomcat
In this post I’m going to show you how you could integrate Angular with Maven automatically. I request you to read this article carefully and not for just copy paste because it would be very helpful for you in various ways like debugging, tweaking or modifying steps etc.
First of all here is the summary of the steps for integration
- Setup nodejs and npm
- Run command
npm installin angular directory to install dependencies and compile typescript files. - Run command
npm run buildin angular directory to build Angular project. - Finally copied the contents from
your-angular-directory/dist/in root of .war file (before finally making .war file).
Explaination
We are going to do all these steps automatically means we want maven to do all these steps above for us.
If you donot understand the 4th step then let me explain. Once I analyzed the contents of a .war file and what I found is that the .html, javascript and css files are placed in the root of war file. From this I got an idea that to integrate angular with maven, I have to copy the contents of dist directory(build directory) from angular folder to the root of war with the help of maven.
If you want full automation ie. you want maven to setup nodejs and run commands npm install and npm run build for you then build time increases a lot.
But if you are ready to run commands npm install and npm run build manually then running command mvn clean install would be very fast. This is semi automatic way. I will show you both ways.
So lets start. This is my project structure for maven project.
.
├── angular
│ ├── angular-cli-build.js
│ ├── angular-cli.json
│ ├── config
│ ├── dist
│ │ ├── app
│ │ ├── bundle.js
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── system-config.js
│ │ └── vendor
│ ├── e2e
│ ├── package.json
│ ├── public
│ ├── README.md
│ ├── src
│ ├── tmp
│ ├── tslint.json
│ ├── typings
│ └── typings.json
├── cat.txt
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ └── webapp
│ └── WEB-INF
│ └── web.xml
├── target
└── tempAnd Just for your knowledge this is the content of the .war file that I found when I was analyzing it.
.
├── app
├── cat.txt
├── favicon.ico
├── index.html
├── main.js
├── META-INF
├── system-config.js
├── vendor
└── WEB-INF
├── lib
└── web.xmlFully automatic way
I am writing the code first that you have to add in pom.xml. I will explain after that.
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
</plugin>
<!-- 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.0</version>
<configuration>
<workingDirectory>angular</workingDirectory>
<installDirectory>temp</installDirectory>
</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>v6.3.1</nodeVersion>
<npmVersion>3.9.5</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 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>
<!-- Plugin to copy the content of /angular/dist/ directory to output directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/angular/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>In the above build code, we used these two new plugins frontend-maven-plugin and maven-resources-plugin.
1. frontend-maven-plugin – It will install nodejs and build the angular project.
2. maven-resources-plugin – It will copy the contents of ‘dist’ directory to root of .war file.
How we used frontend-maven-plugin?
<configuration>
<workingDirectory>angular</workingDirectory>
<installDirectory>temp</installDirectory>
</configuration>In the above code we are telling frontend-maven-plugin that our angular code is in /angular directory and the directory in which we want it to install nodejs is /temp.
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.3.1</nodeVersion>
<npmVersion>3.9.5</npmVersion>
</configuration>
</execution>In the above code we are specifying node and npm version to install it on our system automatically.
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>It will execute command npm install inside the workingDirectory (ie. /angular/)
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>It will execute command npm run build inside the workingDirectory (ie. /angular/)
How we used maven-resources-plugin?
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/angular/dist</directory>
</resource>
</resources>
</configuration>
</execution>It will copy the content of /angular/dist/ directory to output directory (${project.basedir}/angular/dist).
Now you can execute command mvn clean install and your .war will be ready in a few minutes. But I suggest you to read the full article first.
NOTE :
1. Add index.html in your welcome files list in web.xml.
ie. Paste the below code in web.xml
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>2. Add “build”: “ng build” script in your package.json
{
"name": "angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "ng serve",
.
.
.
"build": "ng build --prod"
},
"dependencies": {
.
.
.
},
"devDependencies": {
.
.
}
}You can check my projects (have not updated for a long time but concept remain same)
BaceDevotees
TransactionManager
Semi Automatic way
This way would be very helpful if the above method won’t work or you want to build your maven project separately from angular project.
If you are the only person in your team who changes angular project then you could also use this method. In my team one person commit angular code with angular/dist directory so that others could easily build their maven project.
The code is similar to the above method except we remove the frontend-maven-plugin code.
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/angular/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>Thank you. Now first run npm install and npm run build commands in your angular directory and then mvn clean install in your root directory (maven project).
If you have any queries feel free to ask.
Also don't forget to read this
https://github.com/ashishdoneriya/LittleBlueBird/wiki
It will describe what's wrong with urls in Angular.
Hello,
I would like to ask how do you run npm run build. Where is your build script? Run ng build is not supported from the plugin.
Thank you Evangelos for pointing out the problem. Yes, ng build is not supported from this plugin but it can call any script and we will call build script and build script will run “ng build” command. For this we have to add one script (line) in package.json -> script
and that is
“build”: “ng build”
Thanks for pointing out the error. I have fixed the problem in my github repository and added build script in package.json
https://github.com/ashishdoneriya/TransactionManager
Your welcome. Are you planning to update at the angular release version your project? Have you tried to support both angular-cli and gulp in any of your projects?
Sorry Evangelos, currently I don’t have any plan to update the project and I haven’t tried to support both angular-cli and gulp. This link might help you.
how i can run the application after maven clean install ?
After success build (mvn clean install). A directory “target” will be created. Inside that directory there will be a .war file. Deploy that .war file in web server (like tomcat).
I am able to successfully build the project and deploy it to my local Tomcat Server.
However I am unable to load index.html as I have getting 404 Resource not found error for following JS files:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/ember-cli-live-reload.js Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor/es6-shim/es6-shim.js Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor/reflect-metadata/Reflect.js Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor/systemjs/dist/system.src.js Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/vendor/zone.js/dist/zone.js Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: System is not defined(…)
I checked the WAR file and found that everything is there except ember-cli-live-reload.js file.
Do you have any idea what wrong in here?
It seems you don’t have the same context path. You should point your angular application to the right context path. Probably you deploy an app as /something but your application tries to find the resources from the root. Try something like
# Sets base tag href to /myUrl/ in your index.html
ng build –base-href /myUrl/
ng build –bh /myUrl/
Sorry, but I think you should run a sample angular app (without maven etc.). Also check if you haven’t change the dist-folder path. Also check your context path as suggested by Ungelis Papathanasiou
The solution for broken routes is that in the index.html file in the base property href agren the paht of your project
Thanks for sharing. really helping.
This link might help you.
After I ran maven install, I found everything in target/LPA-1.0.0-SNAP SHOT but not in the war file. Anything I left?
target
—LPA
—LPA-1.0.0-SNAP SHOT
—maven-archiver
—LPA.war
Hi Ashish,
I am using angular-cli for creating angular 2 website. I am exposing rest services in springboot using STS and Maven. Now I want to use rest services in my angular 2 website. But I want to run the application on same localhost port. So can I use the same you mentioned. You have any sample project on it.
Hi Waqas,
Sorry I don’t know about Spring boot, But overall logic is When we build any angular 2 project, what it produces are just a bunch of html, css and js files [in angular-directory/dist/]. We have to copy these generated files in our webapp just like we add index.html in our app.
Maybe this project could help you
https://github.com/ashishdoneriya/BaceDevotees
I was looking exactly something like this
Thanks, this will help me
Thanks for the interesting article. The exact steps helped in deploying the application.
I had to change the base URL in index.html from “/” to “.” so that the script files are loaded properly, when the target is localhost:8080/xxx/home
Thanks Ponni! I was also stuck at this point-your comment might help, Iwill give a try
Hi Ponni, this didnt help , can you please post your package.json, or put your project on github.
did use ngbuild ng build –base-href in package.json?
Appreciate your response
Hi Jagruti,
I dint do anything at the package.json . Just updated the index.html. What’s the error you get?
And it is plain ‘ng build’ that I do. I had some trouble in the of ng build through Maven. So I commented out the ‘npm build’ execution in the pom.xml above, and copied the dist folder generated from a direct ‘ng build’ in my app folder.
Please let me know if that helps.
I got a forbidden message after I deploy to WildFly Server. I guess it is related to index.html.
I don’t have any index.html inside src/main/webapp/. But I guess the server should find my index.html in my WAR file. My WAR file has an index.html which is from my angular project built.
But I have a red cross of my WAR file in WildFly Server of eclipse.
src/main/webapp/WEB-INF/web.xml:
Archetype Created Web Application
index.html
Thank you very much, very useful!
Hi Ashish,
I am trying to run the code as directed by you,my code always gives
Failed at the [email protected] build script ‘ng build –prod’.
Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.0:npm (npm build) on project Angular2test1: Failed to run task: ‘npm run build –proxy=http://’ failed.
I am stuck in this since 3 days,tried various solution by altering build in script:
can you please help me out on this
I think there is proxy problem on your network. Try to run without proxy.
App work if dist is copied in ROOT context, and doesnt work if i set the context path
any idea
http://localhost/index.html — works
but
http://localhost/ews/index.html doent work- any idea why?
Appreciate your help.
Can anyone explain what wrong I am doing in building project
[INFO] Installing node version v6.3.1
[INFO] Copying node binary from C:\Users\ayush.goyal\.m2\repository\com\github\eirslett\node\6.3.1\node-6.3.1-windows-x64.exe to C:\Users\ayush.goyal\workspace\angular2-tom\temp\node\node.exe
[INFO] Installed node locally.
[INFO] NPM 3.9.5 is already installed.
[INFO]
[INFO] — frontend-maven-plugin:1.0:npm (npm install) @ angular2-tom —
[INFO] Found proxies: [Fiddler{protocol=’http’, host=’indpunsbd6intpxy01.ad.infosys.com’, port=80}]
[INFO] Running ‘npm install –proxy=http://indpunsbd6intpxy01.ad.infosys.com:80’ in C:\Users\ayush.goyal\workspace\angular2-tom\angular
[INFO] ————————————————————————
[INFO] BUILD FAILURE
[INFO] ————————————————————————
[INFO] Total time: 5.916 s
[INFO] Finished at: 2017-02-21T12:16:54+05:30
[INFO] Final Memory: 10M/113M
[INFO] ————————————————————————
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.0:npm (npm install) on project angular2-tom: Failed to run task: ‘npm install –proxy=http://indpunsbd6intpxy01.ad.infosys.com:80’ failed. java.io.IOException: Cannot run program “C:\Users\ayush.goyal\workspace\angular2-tom\temp\node\node.exe” (in directory “C:\Users\ayush.goyal\workspace\angular2-tom\angular”): CreateProcess error=193, %1 is not a valid Win32 application -> [Help 1]
[ERROR]
What I need to do? I need to copy whole angular 2 app as it is need to past into src/main/webapp folder or just angular 2 app content?
I confused here. Please help me
I created “angular” folder in webapp and kept angular 2 app content in this folder with dist folder. I made .war file and deployed on server. But still I unable to access page. I tried with both “localhost:8080” and “localhost:4200”. Please guide me. I’m new in angular 2 and doing this thing first time.
Hi Anil,
You have to create the angular folder directly in project root (ie. with pom.xml file).
You don’t have to copy things every time (it will be done automatically). But you have to set up your project first time.
So do these steps.
1. Create maven project.
2. In the root of that maven project create folder named as angular.
3. Put your angular 2 code (package.json, dist whatever) inside that “angular” folder.
4. Do the changes in pom.xml file as I have described above in the blog.
5. Compile the project using mvn command (maven).
6. That’s it.
You can see my project https://github.com/ashishdoneriya/BaceDevotees and verify the project structure.
Remove proxy and then try again.
Can I delete the part of the pom.xml when I already have nodejs and npm installed?
You are free to try. And let me know, I’ll update the post.
For anyone else getting 404 resource not found errors on JS files, try changing ‘/’ to ‘./’ like Ponni mentioned. Worked for me!
Hi Ashish,
I’m getting this below error after clean .
Failed to run task (com.github.eirslett:frontend-maven-plugin:1.0:npm:npm install:generate-resources)
org.apache.maven.plugin.MojoFailureException: Failed to run task
at com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:95)
at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:134)
at org.eclipse.m2e.core.internal.embedder.MavenImpl.execute(MavenImpl.java:331)
at org.eclipse.m2e.core.internal.embedder.MavenImpl$11.call(MavenImpl.java:1362)
at org.eclipse.m2e.core.internal.embedder.MavenImpl$11.call(MavenImpl.java:1)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:112)
at org.eclipse.m2e.core.internal.embedder.MavenImpl.execute(MavenImpl.java:1360)
at org.eclipse.m2e.core.project.configurator.MojoExecutionBuildParticipant.build(MojoExecutionBuildParticipant.java:52)
at org.eclipse.m2e.core.internal.builder.MavenBuilderImpl.build(MavenBuilderImpl.java:137)
at org.eclipse.m2e.core.internal.builder.MavenBuilder$1.method(MavenBuilder.java:172)
at org.eclipse.m2e.core.internal.builder.MavenBuilder$1.method(MavenBuilder.java:1)
at org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod$1$1.call(MavenBuilder.java:115)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:112)
at org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod$1.call(MavenBuilder.java:105)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:151)
at org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:99)
at org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod.execute(MavenBuilder.java:86)
at org.eclipse.m2e.core.internal.builder.MavenBuilder.build(MavenBuilder.java:200)
at org.eclipse.core.internal.events.BuildManager$2.run(BuildManager.java:735)
at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:206)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:246)
at org.eclipse.core.internal.events.BuildManager$1.run(BuildManager.java:301)
at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:304)
at org.eclipse.core.internal.events.BuildManager.basicBuildLoop(BuildManager.java:360)
at org.eclipse.core.internal.events.BuildManager.build(BuildManager.java:383)
at org.eclipse.core.internal.events.AutoBuildJob.doBuild(AutoBuildJob.java:144)
at org.eclipse.core.internal.events.AutoBuildJob.run(AutoBuildJob.java:235)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)
Caused by: com.github.eirslett.maven.plugins.frontend.lib.TaskRunnerException: ‘npm install’ failed.
at com.github.eirslett.maven.plugins.frontend.lib.NodeTaskExecutor.execute(NodeTaskExecutor.java:63)
at com.github.eirslett.maven.plugins.frontend.mojo.NpmMojo.execute(NpmMojo.java:62)
at com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:89)
… 32 more
Caused by: com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutionException: java.io.IOException: Cannot run program “/home/oem/workspace/NeedForBook/temp/node/node” (in directory “/home/oem/workspace/NeedForBook/angular”): error=2, No such file or directory
at com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutor.executeAndRedirectOutput(ProcessExecutor.java:73)
at com.github.eirslett.maven.plugins.frontend.lib.NodeExecutor.executeAndRedirectOutput(NodeExecutor.java:29)
at com.github.eirslett.maven.plugins.frontend.lib.NodeTaskExecutor.execute(NodeTaskExecutor.java:58)
… 34 more
Caused by: java.io.IOException: Cannot run program “/home/oem/workspace/NeedForBook/temp/node/node” (in directory “/home/oem/workspace/NeedForBook/angular”): error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)
at com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutor.executeAndRedirectOutput(ProcessExecutor.java:61)
… 36 more
Caused by: java.io.IOException: error=2, No such file or directory
at java.lang.UNIXProcess.forkAndExec(Native Method)
at java.lang.UNIXProcess.(UNIXProcess.java:247)
at java.lang.ProcessImpl.start(ProcessImpl.java:134)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1029)
… 37 more
Can you tell me files and directories that are just inside your project (eg. mine have pom.xml file and a directory named as ‘angular’ in which I’ve put my angular 2 source code).
Hi,
Thank you for sharing your code / knowledge!
The combination of Maven & Angular 2 seems a good one.
? Do you deploy both in 1 WAR file?
When trying the TransactionManager I tried to deploy the war within Eclipse on a Tomcat server. All went well.
When trying to browser to http://localhost:8080/transactionManager … I get a 404.
Also http://localhost:8080 … a 404.
I tried also to reach the api (…/api/categories) but nothing happens.
Can you please help?
Thank you, kind regards,
Johan
Yes, I deploy both in 1 war file. Angular 2 is nothing but a bunch of Html and Javascript in which it generates as its output when we build it (using ng build command). I just move all those generated Html/Javascript files to the root of war file (using maven pom.xml). And don’t use TransactionManagement Project. Use https://github.com/ashishdoneriya/BaceDevotees. It is maintained. Instructions are given on the link itself.
Hi Ashish
I’m using weblogic as my app server and I have created a separate module for UI(Angular2) in the existing project. Now made it into 1 war file(Angular2 + Java project) when I am deploying it and giving the local host as http://localhost:7001/gdl-ws/home/( I configured in the router to direct this URL and added component to that. GDL-WS is context route) I’m getting 404 error. Is there any where else that I have to configure for weblogic server. Do you have any sample project with Angular2 using weblogic server.
Sorry Niharika, no idea about weblogic.
Check whether .war file contains index.html at its root or not.
Hello Ashish !
thanks for your tutorial. it’s good help for me.
Just one question … why do you use “copy-resources” instead of “-op” option of “ng” command. this option automatically copy (with replace) your distrib in a specific path.
my example in my project (with my prompt “[…./webapp-test/webapp-node] $” ):
[…./webapp-test/webapp-node] $ ng build -prod -bh=. -op=../webapp-tomcat/src/main/webapp/ihm
Nice idea, thanks
“If you want a framework that is stable, then don’t use Angular 2,4” Why not?
Hi Ashish,
Thanks for the very neat tutorial it helped me a lot, Like you said in your tutorial maven-frontend plugin didn’t work for me.
So i thought to build the angular project and copy it manually in webapp folder. I try to build the angular project using npm install and npm build -prod in eclipse terminal I got error [ERROR in Error: Unexpected value ‘MaterialModule ].
Checked in internet and tried many solution but nothing works.
Can you tell me what may be the issue, i am using your DevoteeManagement project.
Thanks in Advance
Hi Thiru,
DevoteeManagement project currently is not working. I also tried a lot to fix [to compile the angular/nodejs code] it but couldn’t.
Hi Ashish,
Thanks for your reply, it is really good you are answering for everyone’s questions.
If i found the solution i will update you.
Thank you once again.
A tip for anyone who builds an application with Java and TypeScript:
You should create TypeScript interfaces from your Java sources. Automated, if possible. A super use for an annotation processor.
Something that does the job:
https://github.com/dzuvic/jtsgen
Hi! May be i do something wrong, but…
1. I’ve made a simple project in Angular on local machine
2. I have create a file proxy.conf.json with code:
“/injtest”: {
“target”: “http://localhost:8080”,
“secure”: false
}
3. i have change my proxy.json to:
“scripts”: {
“ng”: “ng”,
“start”: “ng serve –proxy-config proxy.conf.json”,
“build”: “ng build”,
4. i have run ng build –base-href /inj/ –prod
5. I add maven to my project
5. i inserted maven plugin to copy files from Dist to Webapps but i didnt insert plugins for build and run.
6. mvn clean insert
7. I deploy it on remote tomcat and i have 404 error.
8. Ok, I ran npm install on remote machine and i had error that there are no package.json.
9. Ok, i added packege.json to dist, when mvn clean insert
10. I deploy it and run again npm install. Its ok….
11. But – it still 404 error. index html cant find js files
What i do wrong ????
Sorry Anton, I couldn’t figure out the actual problem, but one thing that you mentioned that the error say there is no package.json. Well package.json is the heart of an angular (npm) project. When we compile angular project(html js part) it build the code ( fetching dependencies mentioned in package.json) and generate the output in dist/ directory. After build there is no need of package.json. I think you should create the project using angular-cli ( https://angular.io/guide/quickstart ). npm install just install dependencies but it doesn’t compile/build angular code.
[…] until now : When i put the angular app inside the /src/main/webapp of my spring project, following this documentation , i dont have the issue and the cookie are automatically set but it’s painful to do the […]
I am trying to do this without web.xml but I am getting 404.. My appConfig looks like this :
@Bean
public ViewResolver setupViewResolver() {
UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setPrefix(“/angular/dist/”);
resolver.setSuffix(“.html”);
resolver.setViewClass(JstlView.class);
return resolver;
}
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController(“/”).setViewName(“forward:/index.html”);
}
where am I going wrong?
Hello Asish, theres a problem at the beginning…
It says : in this post I’m taking about Angular vesion 2 and a
Thank you Alde, I’ve corrected spelling
Hey …
How can I deploy angular 2 on tomcat without using Maven and just Java Servlets.
I want to use Java as backend validation.
Manually build the angular app and copy the build files(inside angular code /dist) to src/main/webapp/ folder