As the title suggests, when you a modular Application with an initial module and install it, you get type errors. The integration model that the generator uses seems to be itself broken. I've fixed it temporarily by adding a manual symlink in the symlink-config.ps1 file but I don't know how stable that will be.
- Exception message and full stack trace: Type 'import("C:/Users/user/source/repos/App/modules/examplemodule/angular/node_modules/@angular/router/router_module.d").Routes' is not assignable to type 'import("C:/Users/user/source/repos/App/angular/node_modules/@angular/router/types/_router_module-chunk").Routes'.
- Steps to reproduce the issue:
- Install ABP Studio
- Create a new solution in Classic mode
- On modularity, set up as modular solution and create an example module
- Once it's installed, import the module as per the documentation https://abp.io/docs/latest/tutorials/modular-crm/part-02?UI=NG
- Try to run the angular application
2 Answer(s)
-
0
This error happens because your module’s Angular library project (e.g.
modules/examplemodule/angular/...) ends up compiling against a different physical copy of Angular packages than the main app (App/angular/...). So TypeScript sees two differentRoutestypes:.../modules/examplemodule/angular/node_modules/@angular/router/....../angular/node_modules/@angular/router/...and they are incompatible even if versions look identical.
Definitive fix (recommended approach): ensure module UI projects use the main app’s node_modules via symlinks (single dependency graph).
- Keep the module source referenced via
tsconfigpaths (as ABP modular UI does), but do not allow the module project to have its own independentnode_modulesresolution. - Use the ABP symlink scripts to link dependencies from
App/angular/node_modulesinto each module’sangular/projects/...(or the module’s angular workspace) so everything resolves to one place. - In practice, this means your
symlink-config.ps1should include at least these packages to be shared from the main app to the module libs:@angular/*rxjstslib@abp/*/@volo/*(if used inside the module UI lib)
This is exactly aligned with the behavior you observed: manually symlinking fixes it because it forces a single Angular dependency instance.
- Keep the module source referenced via
Stable alternative (also works, but slower for dev): build & consume the module UI as a package instead of paths
- Build the module’s Angular library and reference it as a
file:dependency from the main Angular app, avoidingtsconfig.pathspointing to library sources. This also prevents duplicatenode_modulesgraphs.
- Build the module’s Angular library and reference it as a
Sources:
- https://abp.io/community/articles/5z2ate6e
- https://abp.io/docs/latest/framework/ui/angular/quick-start
- https://abp.io/docs/latest/tutorials/modular-crm/part-02?UI=NG
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
Your workaround is the right one — editing
symlink-config.ps1and re-running the symlink script is the supported mechanism, so it will hold up across rebuilds.Edit
<your-app>/angular/scripts/symlink-config.ps1and list each imported module:$script:PackageDirectories = @( "../../modules/<your-module-name>/angular" )(One line per module.)
Then from
<your-app>/angular/scripts/, run:pwsh ./setup-symlinks.ps1You should see
Linked @angular,Linked rxjs,Linked tslibprinted, and theRoutesmismatch will be gone. The default$PackagesToSymlinkarray already covers all the standard packages, so you only need to add the directory path.We'll fix this on our side so the entry gets added and the symlinks get refreshed automatically when you Import a module. It'll go out in the next ABP Studio release.
Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
