How can we use ACA modules or components inside our custom ACA extensions? like aca-page-layout ...

[tmeedend_adv]

Hi, I wanted to use aca-page-layout and all to have the same look n feel on my custom ACA extension. But it seems that the component is in ACA-SHARED. 

So I opened the readme and it says I must compile it with the command "ng build aca-shared". But it doesn’t work: 

ENOENT: no such file or directory, stat 'C:\workspace\reim\aca-3.0\projects\aca-shared\ng-package.json'

How can we use aca-page-layout and other aca modules inside our extensions?

Thank you.

[denys]

You probably need just importing it from "@alfresco/aca-shared" and build your extension, so that typescript links and builds the rest. Note there are many changes since the 3.0 that you are using, and in the later versions and upcoming release (4.2) it is going to be a single standalone component PageLayout and a bunch of CSS class names you could use to style the content (header, content, etc)

[tmeedend_adv]

Hi,

I have tried to import it in my .ts file but it doesn’t work. I have tried: 

• import { PageLayoutComponent } from '@alfresco/aca-shared';
• import { PageLayoutModule } from '@alfresco/aca-shared';
• import { PageLayoutModule.PageLayoutComponent } from '@alfresco/aca-shared';

But each time I have tons of errors if I add this to my ts file.

You mean in the 4.2 version, I will have to redo my pages? Do you know when it will be out approximately?

[denys]

It's hard to give any hints without context. What errors you have? how you integrate the component, etc. It would be great if you have an example to reproduce the issue somewhere, or more details.

Other than that - we use those libs all the time and those are working in other Apps, so probably something in your code.

[tmeedend_adv]

Hi,

Ok, I will give some context. 

• We are using ACA-3.0 sources
• We generated a new extension by following the documentation
• then, I tried to add some components from aca-shared.
• I am pasting some errors I have at the end of this message when I try to compile with the import I told you

We can work anothey way: I see that there is another project next to my extension named "aca-about". It is doing what I want: it uses aca-page-layout. And when I open its html, I don’t have an error like my extension. But I don’t what I am missing.

I would like to try to compile this project aca-about but if I run "npm run build:aca-about" it doesn’t work: Missing script: "build:aca-about".

The logs when compiling:

PS C:\workspace\reim\aca-3.0> npm run build:agp-extension

> alfresco-content-app@3.0.0 build:agp-extension
> ng build agp-extension && npx cpr projects/agp-extension/assets dist/agp-extension/assets --deleteFirst

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'agp-extension'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/aca-shared/src/lib/adf-extensions/extensions-data-loader.guard.ts:1:1 - error TS6059: File 'C:/workspace/reim/aca-3.0/projects/aca-shared/src/lib/adf-extensions/extensions-data-loader.guard.ngtypecheck.ts' is not under 'rootDir' 'C:\workspace\reim\aca-3.0\projects\agp-extension\src'. 'rootDir' is expected to contain all source files.

1 /*!

projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ts:1:1 - error TS6059: File 'C:/workspace/reim/aca-3.0/projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ngtypecheck.ts' is not under 'rootDir' 'C:\workspace\reim\aca-3.0\projects\agp-extension\src'. 'rootDir' is expected to contain all source files.

1 /*!

projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ts:1:1 - error TS6059: File 'C:/workspace/reim/aca-3.0/projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ngtypecheck.ts' is not under 'rootDir' 'C:\workspace\reim\aca-3.0\projects\agp-extension\src'. 'rootDir' is expected to contain all source files.

and then I have hundreds of other errors ...

[yorinfr4]

1. Include Compiled Files:

   • After the build process, you should have compiled JavaScript and CSS files. Include these files in your custom ACA extension's assets or appropriate directories.

2. Import and Use the Component:

   • In your custom ACA extension, you'll likely need to import and use the ACA component you've compiled. You might need to adjust your Angular module imports and component templates to integrate the ACA component.

3. Update Configuration:

   • If there are configuration files that need to be updated to enable the usage of the ACA component, make sure to follow the documentation or guidelines provided with the ACA components.

4. Dependencies and Compatibility:

   • Ensure that the version of the ACA component you're integrating is compatible with your custom ACA extension. There might be version dependencies that need to be considered.

5. Documentation and Support:

   • If you encounter issues or errors during the integration process, refer to the official documentation of the ACA-SHARED repository. Additionally, if possible, seek help from the development community or support channels related to the ACA system.

Please note that integrating components from a larger system like ACA can be complex and may involve more specific steps than outlined here. Always refer to the official documentation or guides provided by the ACA project, and consider seeking assistance from experienced developers who are familiar with ACA.