[DSpace Angular] Adding new modules & routes to RouterModule from a theme

[Abel Gómez]

Hi all,

I've been working on a theme and customization for DSpace 7, and I've stumbled upon a problem I'm not really sure whether it's solvable or not.

I'd like to add some additional routes and modules to serve some additional sections in the DSpace site (mostly static HTML) but keeping the look and feel of my custom theme, and keeping the breadcrumbs and navigation features if possible. After inspecting the code, I've figured out the way to do it by modifying the "base app" (e.g., AppRoutingModule, and adding the needed modules under src/app/...), but I'd like to keep my modifications as modular and isolated as possible.

Is there any way to achieve the same by modifying only my custom theme in "src/themes/mytheme", and without changing the "base code" of DSpace angular in "src/app"?

Thanks for your help and advise.

Cheers,

Abel

[Mark H. Wood]

I haven't found a way to completely eliminate hacks to the stock
routing module, but I did manage a static "About Us" page that exists
within our local theme and requires only a reference in
'src/app/app-routing.module.ts':

------------------------ src/app/app-routing.module.ts ------------------------
index d426b041c..2d5b27797 100644
@@ -41,9 +41,12 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
import { MenuResolver } from './menu.resolver';
import { ThemedPageErrorComponent } from './page-error/themed-page-error.component';

+import { AboutComponent } from '../themes/scholarworks/app/static/about/about-page.component';
+
@NgModule({
imports: [
RouterModule.forRoot([
+ { path: 'about', component: AboutComponent },
{ path: INTERNAL_SERVER_ERROR, component: ThemedPageInternalServerErrorComponent },
{ path: ERROR_PAGE , component: ThemedPageErrorComponent },
{

AboutComponent consists of an empty class, an empty stylesheet, and a
single 'div' providing a basic description of the repo. plus links to
further reading and a 'mailto:'.

The close coupling between stock and theme led me to leave this commit
message:

Add a link and an About page.

This required adding the route in the main routing module, pointing into our
theme. That is a nasty hack and should be fixed when I find out how to put
the route into our theme's module.

--
Mark H. Wood
Lead Technology Analyst

University Library
Indiana University - Purdue University Indianapolis
755 W. Michigan Street
Indianapolis, IN 46202
317-274-0749
www.ulib.iupui.edu

[Abel Gómez]

Ouch!

I'm sorry to hear that modifying the stock routing module was the only way...

Anyway, it's true that, although it's a "hack", the modifications can be minimal.

Thanks for sharing your experience on this. Let's see if a "hooking" mechanism is added to the routing module in the future... If I have time, I'll try to implement something more portable/themable.

Cheers,

Abel

[darryl....@usask.ca]

I'm in the same boat here.  I'm wanting/needing to create some (themed) local components for things like an About page, FAQ, submission guidelines etc.  The closest examples I can see are the privacy policy and end user license agreement pages.  These seem to be controlled by the Info module in src/app/info. I'd happily have my URLs be something like "info/about" and "info/faq" if there were some easy way to have that info module implement a "hook" (as Abel said) or some sort of route/component mapping (similar to what's being done in info-routing-paths.ts and info-routing.module.ts) that we could define in our theme.  i.e. some localized way to add to that RouterModule that's being built in info-routing.module.ts so we could easily add components and paths without changing that core code.

Sadly, I'm not familiar enough with Angular to design and implement that.  Looks like I may have to resort to a more global hack, like Mark did.

- Darryl

[schu...@effective-webwork.de]

We have the exact same requirement in one of our projects - including the need to edit the menu to include the static pages (and ideally to edit the pages themselves) in DSpace directly. Does anyone know, if some kind of (minimal) CMS-functionality is planed or has been discussed?

For now I will also have a look at the info-component as a starting point.

[Michael Plate]

Hi,

Am 04.05.23 um 11:38 schrieb schu...@effective-webwork.de:

> We have the exact same requirement in one of our projects - including
> the need to edit the menu to include the static pages (and ideally to
> edit the pages themselves) in DSpace directly. Does anyone know, if some
> kind of (minimal) CMS-functionality is planed or has been discussed?

[…]

we had that problem a while ago, mainly I was to lazy to change the
static pages often :) …so we decided to use WordPress with its WYSIWIG
editor and include the contents via WPs REST interface - this we did for
DSpace 5.10, but this should be possible for DSpace 7 via Angular…


Michael

[schu...@effective-webwork.de]

That is for sure a way we could try, thanks! The CMS in this case is Typo3 (which will load content from DSpace vie Rest itself), but that should work as well, I think.  

[Kaiky]

Hi everyone,

I'm reading this thread from 2023 and wanted to check whether anything has changed in the more recent versions of DSpace. As of 2025, DSpace Angular is already at version 9.1, so I'm wondering:

Is there now any official or supported way to add custom routes or modules directly from a theme, without modifying the base app-routing.module.ts?

Has any “hooking” mechanism, extension point, or theme-level routing support been introduced since this discussion? Or is modifying the core routing module still the only approach?

Thanks in advance for any updated information!

[Gary Hsu]

Hi, 

I thought the router in angular is defined as a global service. It is therefore impossible to avoid this step unless one develops its own angular infrastructure. 

I might be wrong though.

Kind regards,

Gary

[Mark Wood]

I recently updated the above-mentioned instance to DSpace 9.1 and I still had to hack the stock routes.  The code seems to have been split into two new files:  `app-routes.ts` and `app-routing-paths.ts`.

I think there's a way to get a reference to the router and add routes to it dynamically, but that seemed like too much work to get it right.  You'd need to arrange for something in your theme to be called once before any other theme code runs.