How to include angular2/4 component in JSP page?

后端未结

关注

 4  1133

孤街浪徒

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

相关标签:

4条回答

臣服心动

2021-02-10 15:16

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.

0 讨论(0)

孤城傲影

2021-02-10 15:20

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
攒了一身酷

2021-02-10 15:21

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2021-02-10 15:33
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...