Implement Angular 2 in Alfresco one 5.1.1 Enterprise Edition

[riya_soni42]

Hi, I want to integrate Angular2 in Alfresco Enterprise Edition 5.1.1 on Alfresco Custom Share Page and also make some search components, but I didn't get any solution for the same. So, if anyone has even a small little bit hint or solution then please share with me.

[ddraper]

If you want to create a brand new page in Share then you need to do the following:

1. Create a new Surf Page XML file
2. Create a new Surf Template XML file (and associate it with your page)
3. Create a new Freemarker template and associate it with your template.
4. Place whatever you want to render in your Freemarker template

This process is described in the documentation here.

You can use something like the Angular CLI to build your Angular page bundle and can then reference it in your Freemarker template file.

Your main issue in terms of development will be in making REST API calls to the Alfresco repository. In order to achieve this you can configure a proxy in the Angular CLI. This is actually something I have been experimenting with recently - there are more details in my blogs (start from the one linked and work backwards for more details). 

This will allow you to develop in the Angular CLI and then deploy to Alfresco when you're ready.

[riya_soni42]

Hi,

Thank you for your early response.

The blog references and examples that you have suggested is related to Angular Routing, but I want to do make one page for my own search screen,
for that I need to import various packages of Angular2 in component file.

I have  tried below link which posted by you :

https://community.alfresco.com/community/ecm/blog/2016/05/03/aikau-1066-angular-2-integration

And it is working fine by deploying Angular2 Support Version 1.0.67.1 from http://localhost:8080/share/page/modules/deploy url.

But I want that Angular2 component in my custom share page.

So, I have started to make custom page in Aikau and add  widget in js file shown as below :
{
            id: "DEMO_SIMPLE_MSG",
            name: 'alfresco/experimental/ng2/Bootstrap',
            config: {
                main: 'blog/main.ts',
                templateString: '<my-app>Loading...</my-app>'
            }
 }

And also add main.ts and app.component.ts in blog folder as given in your below post and it is working fine.

But, when I have tried ng2-auto-complete component of Angular2 in component.ts  file, so it will generate error of "Source not found",
I have added below code in component.ts file for auto complete box :

<div ng2-auto-complete [source]="arrayOfStrings" placeholder="enter text">
                <input [ngModel]="model1" />
</div>

But it showcases that error that source not found, so is there any limitations of "alfresco/experimental/ng2/Bootstrap" Aikau widget library, or is there any other solution for the same.

I need to implement Angular 2 only for making my own search screen which contains Autocomplete or typeahead box, multiselect drop down and so on.

I can find the code for all this components on google, but how can I use that in Alfresco 5.1.1 Enterprise Edition, please give me answer or examples if any for the same.

Thank you.

[ddraper]

I would strongly recommend against using that module as it only pulls in an early beta of Angular 2 and not a final version.

This was only a proof-of-concept implementation and probably should be removed from the Aikau library. Unless you have a particular requirement to nest Angular 2 within an Aikau component I would suggest that you just import a built Angular 2 bundle.

The only reason that I've implemented the router approach was in order to be able to provide an authentication step in the the custom Node.js client. If you are creating a page within Share then authentication automatically be taken care of for you.

If you use the Angular CLI then there is no reason to implement the router. If you just create the proxy (as described) then you will be presented with a basic authentication dialog when you attempt to access any of the REST APIs - this should be perfectly acceptable for development. Once you have finished developing and deploy the finished bundle in a Surf page then the authentication issues will be handled for you.

[riyasoni42]

Hi,

I got your point that Aikau Widget Library that you have used it only contains Angular 2 beta version, so I can use routing concept for implementing my own search screen. So, can you provide me one sample example from start to end which contains One advanced ng2 component like Autocomplete or typeahead or any else that you know, So I can get clear idea for that same. as I have stuck over that routing example that you have provide in your blogs.

If I want to build an page which contains components like below link :
https://www.npmjs.com/package/ng2-auto-complete

Bit, currently I am not able to do this as it generates an error of source not found.

Thank you.

[ddraper]

Maybe you can provide the code that you've implemented so far for review? I will possibly get around to doing some kind of start to finish example of how to deploy different UI framework built pages into Share, but I can't say when it will be done.

[riyasoni42]

Yes, true. Even I have been searching this stuff from last 1 month, but I didn't get any small idea for the same. When I get that Aikau Widget library, I am able to implement basic Angular 2 facilities in alfresco  custom page.

So, I have written code in app.component.ts and main.ts file that I have attached to this comment. So, we can view autocomplete box on Aikau page that I have created by creating Aikau widget in js file by following code :

{
            id: "DEMO_SIMPLE_MSG",
            name: 'alfresco/experimental/ng2/Bootstrap',
            config: {
                main: 'blog/main.ts',
                templateString: '<my-app>Loading...</my-app>'
            }
        }

I have attached one jpg file named search.jpg to this comment, which is displayed when we hit the url of the newly created Aikau page.

But advance components are not available in this Aikau widget library. I know you have not implemented it but if you have any link that you can share with me so please give me the response.

[ddraper]

Although the example in this blog post is using React, the basic premise is still the same so would apply to the Angular CLI

[riyasoni42]

Ya true. So, if we want to use Any Js Framework and show result in the alfresco share page, then we have to use Aikau widgets, but for Angular 2 , there is no library available through which we can use advanced level components of Angular 2.

So, if we want to use advance components(like ng2typeahead or autocomplete), then how can we implement it using Angular CLI and display it in share page. I don't know how can we use Angular CLI and connect it to alfresco.

[ddraper]

No... that's not correct, in that example you don't need to use Aikau at all. The point is that you develop your Angular 2 page independently build it and then include the distribution files in the Surf page that you create. You can use whatever features of Angular 2 (or any other UI framework that you want).