How to include angular2/4 component in JSP page?

问题

I want to add angular component into JSP page, what are the possible ways ?

To Describe more :

I have one application dynamic web application in JSP and another I created is an angular component which does some authentication. Is there way to use this component in JSP web application, apart from object,embedd or iframe ?

回答1:

I am able to include my angular component into jsp by bootstrapping it into my application and it runs fine. Below is one way of doing so. Another you can also include the whole component code and bootstrap angular module.

Include below scripts into your index.jsp. here my-app is name of my component

    <script src="node_modules/@angular/common/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/core.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

    <!-- Our app -->
    <script src="app.js"></script> 
  <body>
  <my-app></my-app>
  <body>

Create app.js file which will bootstrap your angular component.

app.js

(function() {
  var MyApp = ng.core.Component({
      selector : 'my-app',
      template : '<h1>Hello Angular 2!</h1>'
  }).Class({
      constructor : function() {
      }
  });

  document.addEventListener('DOMContentLoaded', function() {
      ng.platformBrowserDynamic.bootstrap(MyApp);
  });

})();

For more information you can read bootstrapping angular application.

回答2:

Another way I was able to do it, by building the angular component with command:

ng build

This will generate JavaScript files will be created in dist folder of your angular project.

Then just include the files from the dist folder into your JSP application and use angular component directly.

回答3:

One can use ng build -bh <WebAppContextPath> from the location of your angular project. For instance, if you have named your project as client (generated using ng new client) it will create a dist folder under the project client.

Copy the contents from the dist folder to your WebApp in the WebContent folder. Now either use the index.html of your client project or paste it to the index.jsp. Now access the webApp, now angular 2 components will be served.

Please note that when the build in for non-production, all the node_modules will served from the location of client project, if you want to server everything from the webApp itself then build it for prod mode ng build -bh <WebAppContext> --prod, all modules will be combined into single file.

回答4:

I was recently working on the similar use case where I had to add the angular page on to the JSP page. Based on what I did, this is what you can also do: You can copy and add all and tags to your JSP page from the index.html file that is contained in the build directory of your angular application. In case that your build of the angular application is with --prod option, since the file under your build directory(normally 'dist'), is named with the dynamic hash (this is named this way for cache busting purpose), you need to create a logic which loops over files in the dist folder and find the CSS and js files dynamically based on the extensions of each file and create the corresponding string literal with or based on files type(.js or .css). After this, you need to include those string literals in the JSP file using out.print() statement.

Then finally you can add your angular component selector like on your JSP page. As you have all the required scripts and CSS already added, it should work without any issues.

来源：https://stackoverflow.com/questions/45282825/how-to-include-angular2-4-component-in-jsp-page

标签

angular

jsp