10-16-2023 04:42 PM
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
10-16-2023 05:01 PM
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...
11-08-2023 06:35 AM
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.
03-06-2024 07:59 AM
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.
04-09-2024 04:06 AM
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.
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:
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"],
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 {}
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" ] }
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 {}
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.
Explore our Alfresco products with the links below. Use labels to filter content by product module.