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
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
Create a .env file in the alfresco-content-app root and set the base url for alfresco
vim .env
BASE_URL="http://localhost:8080"
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:
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.
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"
}
]
}
]
}
}
{
"$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>"
}
....
]
etcNote: 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
{
"$references": [
"<lib-name>-config.json"
]
}Register the broking library module with the aca extension module
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
nx serve content-ce
