cancel
Showing results for 
Search instead for 
Did you mean: 

Help on generating first extension for ACA 4.2 (or git)

Andreas_L-Å
Champ on-the-rise
Champ on-the-rise

Hi

Could someone please help me in generating a new extentions like inte this guide how-to-create-your-first-extension ?

I know this guide is outdated and that we no longer should use ng but I can't get things to work properly.

I have been trying diffrent things for several days now. I got it to work once but had to do a forced install becouse of some strange dependency problem concerning alfreco content service 2.5.0 so that did not seem right at all.

Best Regards Andreas

4 REPLIES 4

denys
Confirmed Champ
Confirmed Champ

Thanks for reporting the outdated tutorial, we will update it with most recent steps in the coming release.

If you are using VS Code, it's easier generating new libraries or running targets with the following extension: https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console

I would recommend taking a look at the "folder-rules" plugin in the source code, to see how it is configured, i.e. tsconfig.json: https://github.com/Alfresco/alfresco-content-app/blob/928c6b5731c81a55a5d18b3daedf85d30f86d800/tscon...

@denys 

This is the way to create extension for ADW?

https://docs.alfresco.com/digital-workspace/latest/develop/extensions/

I am following same step but not working.

Chethan_m01
Champ in-the-making
Champ in-the-making

Hi @denys,

Thanks for the response, Latest release documention is still not working.

can you please provide steps or references to the updated tutorial for generating extension for ACA 4.3.

Thanks.

boneill
Star Contributor
Star Contributor

The documentation tripped me up too.  I spent weeks on this too and eventually figured it out (I think as I am still working on it).  The steps I used were as follows:

This page provides information on how to install Alfresco Content Application and add a custom extension library. It uses the nx library to achieve this.

Instructions

Install the Alfresco Content Application

  1. clone the ACA app from github and build it

git clone --depth 1 --branch 4.4.0 https://github.com/Alfresco/alfresco-content-app.gitcd alfresco-content-app
cd alfresco-content-app
npm install
  1. Create a .env file in the alfresco-content-app root and set the base url for alfresco

vim .env
BASE_URL="http://localhost:8080"
  1. Start the app an verify you can connect to alfresco

npm start

Create nx Library

Install the nx library and then create the library. It will be created in the projects folder of the aca app.

Navigate to the root of the aca app and install nx into it(alfresco-content-app/)
npm install -g nx@latest
#nx generate library 
nx generate @nx/angular:library <lib-name> --buildable --directory=projects/<library name> --lazy=true --routing=true --importPath=@my-lib-name --dry-run
#Note do a dry run so you can see where things will be created.  Select the As Provided option.

Note:

  • importPath: The library name used to import it, like @myorg/my-awesome-lib. Must be a valid npm name.

This generates the library under the projects/<lib-name> folder.

The library when generated will be at the alfresco-content-application/<lib-name> path. It will contain a module and a service under src/lib. It will also contain a src/lib/index.ts file which must contain an export for any component/store item/module etc that you want to export from your library to be used by another library or the app.

Update the projects/broking/ng-package.json and adjust the destination path the dist/broking.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/<lib-name>",
  "lib": {
    "entryFile": "src/index.ts"
  }
}

Build the project:

nx build broking

Update the package.json with the modules for alfresco, angular, material etc. Add the following to the ajg/package.json: Note: change the versions to match those being used by your aca app.

"@alfresco/adf-core": ">=6.7.0",
    "@alfresco/adf-content-services": ">=6.7.0",
    "@alfresco/adf-extensions": ">=6.7.0",
    "@alfresco/js-api": ">=7.6.0",
    "@angular/animations": ">=14.1.3",
    "@angular/cdk": ">=14.1.3",
    "@angular/forms": ">=14.1.3",
    "@angular/material": ">=14.1.3",
    "@ngx-translate/core": ">=14.0.0",
    "rxjs": ">=6.6.6",
    "zone.js": ">=0.11.8"

Note: the alfresco-content-app/tsconfig.base.json file is updated with a compile path reference to include our new library path. This means that it will include the path to the library we have build when compiling.

 "paths": {
      "@<lib-name>": ["projects/<lib-name>/src/index.ts"],

Add the custom library module to the extensions module for the aca app and register the config extension and assets directory with the aca app.

Register the ajg library module with the aca extension module:

Edit the alfresco-content-application/app/src/app/extensions.module.ts file to add the ajg library

Edit the alfresco-content-application/app/src/app/extensions.module.ts file to add the ajg library module to the application using the following format:

import { NgModule } from '@angular/core';
import { AcaFolderRulesModule } from '@alfresco/aca-content/folder-rules';
import { AosExtensionModule } from '@alfresco/aca-content/ms-office';
import { AcaAboutModule, DEV_MODE_TOKEN, PACKAGE_JSON } from '@alfresco/aca-content/about';
import { environment } from '../environments/environment';
import packageJson from 'package.json';
import { <lib-name>Module } from '@<lib-name>';

@NgModule({
  imports: [AosExtensionModule, AcaAboutModule, AcaFolderRulesModule, <lib-name>Module],
  providers: [
    { provide: PACKAGE_JSON, useValue: packageJson },
    { provide: DEV_MODE_TOKEN, useValue: !environment.production }
  ]
})
export class AppExtensionsModule {}

Add a configuration file and assets to the custom library and inject into aca app

The config will be injected into the aca app to set new routes, features etc.

  • Create an assets folder in the ajg folder.
    cd alfresco-content-app/projects/<lib-name>
    mkdir assets
    vim ajg-config.json
    add the following config.  This creates a left hand icon on the aca page which when pushed
    routes to ext/my/route.  The route in turn loads the component called ajg.main.component which
    is the identifier for the main custom  lib component we add to the extension service above.
    
     

The below example creates a root to a custom component in the library with a button to open the component injected into the left hand menu via the features configuration.

{
  "$schema": "../../extension.schema.json",
  "$id": "<lib-name>",
  "$version": "1.0.0",
  "$vendor": "Seed Information Management",
  "$name": "<lib-name>",
  "$description": "ACA extension to include broking solution",
  "$license": "MIT",

  "routes": [
    {
      "id": "my.extension.route",
      "path": "ext/my/route",
      "component": "my.main.component"
    }
  ],

  "features": {
    "navbar": [
      {
        "id": "my.extension.nav",
        "items": [
          {
            "id": "my.extension.main",
            "icon": "extension",
            "title": "My Extension",
            "route": "my.extension.route"
          }
        ]
      }
    ]
  }
}
  • Update the ng-package.json to copy the assets folder for the library to dist/broking/assets

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/broking",
  "lib": {
    "entryFile": "src/index.ts"
  },
  "assets": [
    "assets"
  ]
}

Edit the alfresco-content-app/app/src/project.json configuration file and add the following glob to the build executor. This copies the ajg-config.json config file for the library into the assets/plugins folder of the aca app where is is referenced from the aca app and ensures that the config for the library is injected into the standard app config.

"build": {
      "executor": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/content-ce",
        "index": "app/src/index.html",
        "main": "app/src/main.ts",
        "tsConfig": "app/tsconfig.app.json",
        "polyfills": "app/src/polyfills.ts",
        "allowedCommonJsDependencies": ["minimatch", "cropperjs"],
        "stylePreprocessorOptions": {
          "includePaths": ["projects/aca-content/src/lib/ui", "node_modules"]
        },
        "assets": [
          ....
          
          {
            "glob": "**/*.json",
            "input": "dist/<lib-name>/assets",
            "output": "./assets/plugins"
          },
          {
            "glob": "**/*",
            "input": "projects/<lib-name>/assets",
            "output": "./assets/<lib-name>"
          }

          ....
      ]
    etc

Note: the second glob copies all other folders and files under broking of the aca assets folder. This is required to inject the i18n properties files created in the library into the aca app

Register the custom library config plugin (<lib-name>-config.json) with the aca app

  • Update the alfresco-content-application/projects/aca-content/assets/app.extensions.json file and add a reference to the new plugin:

{
    "$references": [
        "<lib-name>-config.json"
    ]
}

Register the broking library module with the aca extension module

  • Update <aca-conent-app>/app/src/app/extensions.module.ts

import { NgModule } from '@angular/core';
import { AcaFolderRulesModule } from '@alfresco/aca-content/folder-rules';
import { AosExtensionModule } from '@alfresco/aca-content/ms-office';
import { AcaAboutModule, DEV_MODE_TOKEN, PACKAGE_JSON } from '@alfresco/aca-content/about';
import { environment } from '../environments/environment';
import packageJson from 'package.json';
import { <Lib-Name>Module } from '@<lib-name>';

@NgModule({
  imports: [AosExtensionModule, AcaAboutModule, AcaFolderRulesModule, <Lib-name>Module],
  providers: [
    { provide: PACKAGE_JSON, useValue: packageJson },
    { provide: DEV_MODE_TOKEN, useValue: !environment.production }
  ]
})
export class AppExtensionsModule {}

Test all changes have worked:

nx build broking

  • Ensure that the assets folder and <lib-name>-config.json is copied into the dist/broking/assets folder.

nx serve content-ce

  • Validate that the app still loads.