CODEWITHSUNDEEP
javaangularjsspringspring-mvcweb
paaaaat
paaaaat

Reputation: 91

How do I run an Angular 2 Page in a Spring MVC Application?

I want to have index.html from an angular 2 project to run as a welcome page of a Spring MVC application.
The way I run the angular 2 is via npm start. If I load the index.html without doing npm start, components do not load properly.
How will I be able to make index.html as the welcome page for my Spring MVC Project?

Edit: Added some more details.

The angular-seed project is loaded as is. I'm just trying to load the index.html from the angular-seed project. node modules have already been added and it runs perfectly with npm start.

As for my web.xml, I have the welcome file this way:

  <welcome-file-list>
      <welcome-file>AngularContent/src/index.html</welcome-file>
  </welcome-file-list>

And index.html has the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="AngularContent/node_modules/core-js/client/shim.min.js"></script>

    <script src="AngularContent/node_modules/zone.js/dist/zone.js"></script>
    <script src="AngularContent/node_modules/systemjs/dist/system.src.js"></script>

    <script src="AngularContent/src/systemjs.config.js"></script>
    <script>
      System.import('AngularContent/src/main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Upvotes: 2

Views: 4252

Answers (1)

user6709592
user6709592

Reputation:

I have a same problem and I found proper solution lately.

Follow below steps to achieve our main goal, to run SPRINGMVC + Angular2 on a single server.

  1. Create normal Dynamic web project.

  2. Add all dependancy required for spring or user maven pom.xml

  3. Open CMD, navigate to angular2 application. Hit command npm install to download node_modules and then ng build or use ng build --prod for production.This command will create a "dist" folder, copy all files including all folders.
  4. Paste those files and folders into WebContent directory.
  5. Last thing, you need to change basehref="./" in index.html.

Now you are ready to run server or you can deploy war file and serve it with tomcat or other servers.

visit this thread if you want file structure for spring and angular 2!

Upvotes: 8

Related Questions