Fix for incorrect relative path imports in JHipster Ionic blueprint

[keturk]

Issue Overview:

In the current JHipster Ionic blueprint, there is an issue with the way relative paths are generated for services such as UserRouteAccessService and ApiService. The problem arises when the blueprint is used with complex JDL setups, particularly those involving multiple microservices. In these cases, an additional folder level is introduced, causing the generated relative paths to be incorrect. As a result, imports for these services fail.

Problem Details:

1. Simple JDL Setup: For a simple JDL (without microservices), the path for UserRouteAccessService in src/app/pages/entities/_entity.module.ts.ejs is generated as:

   import { UserRouteAccessService } from '../../../services/auth/user-route-access.service';

   This works as expected when there is no additional folder level introduced by microservices.

2. Complex JDL Setup (with multiple microservices): In a complex setup, the blueprint generates an extra folder level under the entities directory (<microservice_name>/<entity_name>). This additional folder level breaks the relative path import, which should instead account for the added structure.

   For example, with microservices, the path should be:

   import { UserRouteAccessService } from '../../../../services/auth/user-route-access.service';

Proposed Fix:

To address this issue, I have introduced a conditional variable levelUp that adjusts the relative path depending on whether the project includes microservices. The fix has been implemented in two files: _entity.module.ts.ejs and _entity.service.ts.ejs.

Changes:

diff --git a/generators/ionic/templates/src/app/pages/entities/_entity.module.ts.ejs b/generators/ionic/templates/src/app/pages/entities/_entity.module.ts.ejs
index 282d4ab..90558dc 100644
--- a/generators/ionic/templates/src/app/pages/entities/_entity.module.ts.ejs
+++ b/generators/ionic/templates/src/app/pages/entities/_entity.module.ts.ejs
@@ -21,7 +21,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { IonicModule } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { UserRouteAccessService } from '../../../services/auth/user-route-access.service';
+<% const levelUp = (locals.microserviceName ? '../../../../' : '../../../'); %>
+import { UserRouteAccessService } from '<%= levelUp %>services/auth/user-route-access.service';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';

diff --git a/generators/ionic/templates/src/app/pages/entities/_entity.service.ts.ejs b/generators/ionic/templates/src/app/pages/entities/_entity.service.ts.ejs
index f35679c..7a8eb62 100644
--- a/generators/ionic/templates/src/app/pages/entities/_entity.service.ts.ejs
+++ b/generators/ionic/templates/src/app/pages/entities/_entity.service.ts.ejs
@@ -19,8 +19,12 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { ApiService } from '../../../services/api/api.service';
-import { createRequestOption } from '../../../shared';
+
+<% const levelUp = (locals.microserviceName ? '../../../../' : '../../../'); %>
+
+import { ApiService } from '<%= levelUp %>services/api/api.service';
+import { createRequestOption } from '<%= levelUp %>shared';
+
 import { <%= entityAngularName %> } from './<%= entityFileName %>.model';

Alternative Solution (Using Absolute Paths):

As an alternative to adjusting the relative paths, the imports can be made more robust by switching to absolute paths. This can be achieved by updating the tsconfig.json file to configure base URLs and path mappings. This approach avoids potential issues with incorrect relative paths due to folder structure changes.

Here’s an example configuration for tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@services/*": ["app/services/*"]
    }
  }
}

With this configuration, instead of using relative paths like ../../../services/auth/user-route-access.service, you can simply import the services using absolute paths:

import { UserRouteAccessService } from '@services/auth/user-route-access.service';

This method ensures that the imports remain stable regardless of how deep the file is located within the folder structure. It can be especially useful for large projects with multiple microservices.

Why This Fix is Needed:

• This fix ensures that the correct import paths are generated both for simple JDLs (without microservices) and complex JDLs (with multiple microservices).
• It resolves issues caused by the incorrect referencing of service files due to extra folder levels introduced by microservices in the generated structure.
• The alternative solution (absolute paths) offers a more scalable approach by eliminating the dependency on relative path depth, providing a stable reference for services and shared components across the project.

[mraible]

I like the enhancement to use tsconfig.json. Are you able to create a PR to fix?