Micro Frontends with Angular doesn't compile

[mraible]

Overview of the issue

Creating a microservices architecture with Angular results in a compilation error.

> Task :webapp

> [email protected] webapp:build
> npm run clean-www && npm run webapp:build:dev


> [email protected] clean-www
> rimraf build/resources/main/static/


> [email protected] webapp:build:dev
> ng build --configuration development

- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
✔ Browser application bundle generation complete.

./src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:6:0-74 - Error: Module not found: Error: Can't resolve 'app/entities/blog/user/service/user.service' in '/Users/mraible/Downloads/micro-angular/blog/src/main/webapp/app/entities/blog/blog/update'

Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:10:23 - error TS2307: Cannot find module 'app/entities/blog/user/user.model' or its corresponding type declarations.

10 import { IUser } from 'app/entities/blog/user/user.model';
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:11:29 - error TS2307: Cannot find module 'app/entities/blog/user/service/user.service' or its corresponding type declarations.

11 import { UserService } from 'app/entities/blog/user/service/user.service';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:36:66 - error TS2571: Object is of type 'unknown'.

36   compareUser = (o1: IUser | null, o2: IUser | null): boolean => this.userService.compareUser(o1, o2);
                                                                    ~~~~~~~~~~~~~~~~


Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:86:34 - error TS2571: Object is of type 'unknown'.

86     this.usersSharedCollection = this.userService.addUserToCollectionIfMissing<IUser>(this.usersSharedCollection, blog.user);
                                    ~~~~~~~~~~~~~~~~


Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:90:5 - error TS2571: Object is of type 'unknown'.

90     this.userService
       ~~~~~~~~~~~~~~~~


Error: src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts:93:37 - error TS2571: Object is of type 'unknown'.

93       .pipe(map((users: IUser[]) => this.userService.addUserToCollectionIfMissing<IUser>(users, this.blog?.user)))
                                       ~~~~~~~~~~~~~~~~



npm ERR! Lifecycle script `webapp:build:dev` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: /Users/mraible/Downloads/micro-angular/blog
npm ERR! Lifecycle script `webapp:build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: /Users/mraible/Downloads/micro-angular/blog

> Task :webapp FAILED

Motivation for or Use Case

This worked in 8.1.0.

Reproduce the error

jhipster jdl reactive-mf.jdl --monorepository --workspaces --client-framework angular
cd blog
./gradlew

JHipster Version(s)

main branch

[mraible]

Changing the imports and adding a type to UserService seems to fix the issue.

--- a/blog/src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts
+++ b/blog/src/main/webapp/app/entities/blog/blog/update/blog-update.component.ts
@@ -7,11 +7,11 @@ import { finalize, map } from 'rxjs/operators';
 import SharedModule from 'app/shared/shared.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { IUser } from 'app/entities/blog/user/user.model';
-import { UserService } from 'app/entities/blog/user/service/user.service';
 import { IBlog } from '../blog.model';
 import { BlogService } from '../service/blog.service';
 import { BlogFormService, BlogFormGroup } from './blog-form.service';
+import { IUser } from '../../../user/user.model';
+import { UserService } from '../../../user/service/user.service';
 
 @Component({
   standalone: true,
@@ -27,7 +27,7 @@ export class BlogUpdateComponent implements OnInit {
 
   protected blogService = inject(BlogService);
   protected blogFormService = inject(BlogFormService);
-  protected userService = inject(UserService);
+  protected userService: UserService = inject(UserService);
   protected activatedRoute = inject(ActivatedRoute);
 
   // eslint-disable-next-line @typescript-eslint/member-ordering

[mraible]

As far as I can tell, it seems like uniqueRel.otherEntityPath is blog/user when it should be user.

From generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.ts.ejs:

<%_
Object.keys(differentRelationships).forEach(key => {
  if (differentRelationships[key].some(rel => rel.persistableRelationship)) {
    const uniqueRel = differentRelationships[key][0];
    if (uniqueRel.otherEntityAngularName !== entityAngularName) {
_%>
import { I<%= uniqueRel.otherEntityAngularName %> } from 'app/entities/<%= uniqueRel.otherEntityPath %>/<%= uniqueRel.otherEntityFileName %>.model';
import { <%= uniqueRel.otherEntityAngularName %>Service } from 'app/entities/<%= uniqueRel.otherEntityPath %>/service/<%= uniqueRel.otherEntityFileName %>.service';

[mraible]

@mshima It appears the changes in imports in #24885 cause this problem.