Integrate Angular2 project into Tomcat server

Question

I've developed a Spring maven rest api for my project. For the client side, I'm using Angular2 with typescript. As new to Angular, referred angular website for the development, using npm and lite-server.

Now I need to make these two separate projects into a single project, by integrating the html,js,css files into my maven project, to deploy it in Tomcat server.

Project structure

Client side

Project
|__ app
      |_ all app files
|__ node_modules
|__ typings
|__ index.html
|__ package.json
|__ style.css
|__ systemjs.config.js
|__ tsconfig.json
|__ typings.json

Server side

Project
|__ src/main
        |__ java
        |__ resources
        |__ webapp
                 |__index.html
|__ pom.xml

All similar posts/blogs, i found suggest to update pom.xml with node etc. But what i need is,

Compile the angular-typescript project to js files.
Produce a set of fully functional html,js,css files.
Copy them to server webapp folder or whereever they must be.
Running Spring maven project in Tomcat must display my client side index page
Client must work (communicating with rest api) same way when they were two separate projects

How this can be done?

Run this command, npm run build, in angular project root folder to create a dist folder, containing production ready client side files. But got this error

missing script build

.

The Solution for this problem can be found in the below post. stackoverflow.com/questions/39018765/… — Amit khandelwal
– Amit khandelwal, Commented Jun 23, 2017 at 17:45

Ramanujan R · Accepted Answer · 2016-11-25 06:23:05Z

21

At last used angular-cli. ng build --prod creates a production ready build. Copied index.html and .js files under project folder in tomcat webapps (Or under Webcontent in eclipse).

Edited index.html as <base href = "."> and it worked fine

answered Nov 25, 2016 at 6:23

Ramanujan R

1,7392 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ramanujan R Over a year ago

@MendonAshwini If question and answer helped you, please up vote them, so that it will reach more people quickly ( not only for me ;) )

Naik Ashwini Over a year ago

Sure. I missed to upvote the question. Answer I upvoted already

ZackDeRose Over a year ago

I am trying to deploy my angular cli project via a similar method to an Oracle WebLogic server (I'm actually using the grunt-war npm to build a war to deploy). I've adjusted the <base href = "."> as you show above. After deploying the war file, I can hit the app from the url: [weblogic IP]:[port]/[appname] and if I just click on links the app works fine. However if I ever refresh a page or try to navigate to a specific page via a url, I get a 404 error. Any idea what that's about?

Ramanujan R Over a year ago

@ZackDeRose I've not much experience in this. Better you please ask a new question, someone in SO, who have a better understanding, can help you. Good luck!

ZackDeRose Over a year ago

@RamanujanR appreciate you looking out. I resolved the issue by building via the command ng build --base-href /[app-name]/ and wrapping that up in a war file (via grunt). I also had to adjust my RouterModule import in my app.module.ts file to: RouterModule.forRoot(appRoutues, {useHase: true}) This will add a /#/ between the app name and the path, but as I understand, that's pretty much unavoidable if you're putting an angular app out on a Tomcat or WebLogic.

|

Collectives™ on Stack Overflow

Integrate Angular2 project into Tomcat server

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related