I like Angular Framework and happy to discover Web components as a great way to include features in it.
The idea here is to include these Nuxeo elements (polymer web components) in a basic Angular app offering search capabilities in a Nuxeo platform.
I finally did following these 7 steps :
1) using the Angular CLI to generate a new project.
$ ng new my-nuxeo-angular-app$ cd my-nuxeo-angular-app
2) Install components
$ npm install @nuxeo/nuxeo-elements @nuxeo/nuxeo-ui-elements
3) Because as many of web components are JS only, add JavaScript support to your app
tsconfig.json{ compilerOptions: { "allowJs": true }}
4) Enable custom elements schema
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';...@NgModule({ … schemas: [CUSTOM_ELEMENTS_SCHEMA], …})
5) Verify that you can run the application
$ ng serve
Cool...
6) Then customize your app
Here the idea - as React and Vue integrations done - is to set a selection into a Nuxeo instance running on 8080 port.
And it works ! :)
and with some document list:
To give you feedback about major problems solved.
> A nuxeo-connection element needs to be out from any angular digest, so include it in you index.html is a way to connect to your Nuxeo instance.
> You would need to listen on some element events due to an common observer pattern. In this case, an angular child view can be useful:
page.html
<you-observed-component #observed />
component.ts
Class youObserverComponent {
...
@ViewChild(observed) observed: ElementRef;
// observed.addEventListner(‘your-event’,(e) => { …});
7) About API proxy or manage CORS
Angular gives you the opportunity to test in dev mode your local api through a local proxy; then Nuxeo:8080 could be mapped via
angular.json
"proxyConfig": "proxy.conf.json",
proxy.conf.json
{
"/nuxeo": {
"target": "http://localhost:8080/"
}
}
The other way is to allow CORS in your API server, like described here https://doc.nuxeo.com/nxdoc/cross-origin-resource-sharing-cors/
Final conclusion and resources
Like explained at the begining, it was less natural to include web elements in angular than vue or react. The main reason is that angular is managing DOM in a more strict way and probably less open than other frameworks.
But again, after some optimization, the app looks cool and efficient ?!
Enjoy!
@mat
