Angular NG3004 issue with abpSuite Code generator. In a modular application when you generate UI components in the module itself.
- Template: app
- Created ABP Studio Version: 2.1.6
- Current ABP Studio Version: 2.1.9
- Tiered: No
- Multi-Tenancy: Yes
- UI Framework: angular
- Theme: leptonx
- Theme Style: dim
- Theme Menu Placement: side
- Progressive Web App: No
- Run Progressive Web App Support: No
- Database Provider: ef
- Database Management System: sqlserver
- Separate Tenant Schema: Yes
- Mobile Framework: none
- Public Website: Yes
- Social Login: Yes
- Include Tests: Yes
- Kubernetes Configuration: No
- Distributed Event Bus: none
- Use Local References: No
- Optional Modules:
- GDPR
- TextTemplateManagement
- AuditLogging
- OpenIddictAdmin
- Selected Languages: English
- Default Language: English
- Create Command: abp new iOCO.XeoN.Core -t app --ui-framework angular --database-provider ef --database-management-system sqlserver --theme leptonx --separate-tenant-schema --skip-migration --skip-migrator --public-website --without-cms-kit --dont-run-install-libs --dont-run-bundling -no-file-management -no-language-management
- Exception message and full stack trace:
[ERROR] NG3004: Unable to import symbol PermissionDirective. The symbol is not exported from <filepath>/angular/node_modules/@abp/ng.core/index.d.ts (module '@abp/ng.core'). [plugin angular-compiler]
src/app/dashboard/dashboard.component.ngtypecheck.ts:0:0: 0 ¦ ? ^
The symbol is declared here.
node_modules/@abp/ng.core/index.d.ts:2486:0: 2486 ¦ declare class PermissionDirective implements OnDestroy, OnChange... ? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .... .... ....
- Steps to reproduce the issue:
- Create a modular angular application. Test that everything works.
- Add a New Entity using abp Suite to the module. The angular component gets created along with the proxy. yarn start will then throw numerous errors: All of them are similar to the below (I have replaced teh actual path with <filepath>:
We have also attempted to re-create the issue and get a similar issue with 'PageComponent' this time referencing the module itself. If we remove the file reference in tsconfig, build the module, then add a yarn reference with a file link and build the main application (i.e. bypass the "paths": {}) , the code itself works. This indicates a potential issue with the setup of the angular modules in ABP 10 or with abp Suite code generator.
2 Answer(s)
-
0
This is not an ABP Suite “wrong import” problem; it’s a TypeScript paths + Angular new application builder resolution problem that shows up only in modular/module-development scenario (where you reference module UI libs via
tsconfig.pathsto theirprojects/.../src/public-api.ts), and it can manifest as:NG3004: Unable to import symbol PermissionDirective. The symbol is not exported from ... @abp/ng.core/index.d.ts- similar errors for other symbols (e.g.,
PageComponent, etc.)
Why it happens
- With the newer Angular build system, mapping packages to
node_modules(directly or indirectly) is stricter and local library builds can end up being resolved in a way that mixes two “copies” of ABP Angular packages (one from the main app’snode_modules, another from the module library build context). - When the Angular compiler/type-checker ends up analyzing
.d.tsfrom one place but expects exports consistent with another resolution graph, you get “symbol declared here but not exported from index.d.ts” style errors (like yourPermissionDirectivecase).
- With the newer Angular build system, mapping packages to
Definitive workaround (recommended by ABP community guidance): use symlinks instead of relying on
pathsto source projects- Remove any
tsconfig.json/tsconfig.base.jsonpath mappings that try to “redirect” packages tonode_modules(or that cause the library project to resolve ABP dependencies differently than the app). - Keep your module UI packages referenced as local projects (as needed), but ensure the library projects resolve dependencies from the same
node_modulesas the main Angular app by symlinking dependencies into each library project. - In practice, the approach is:
- create a
node_modulesfolder under eachangular/projects/<your-module-lib>if it doesn’t exist - symlink required packages (at least
@abp/*,@angular/*, rxjs, etc.) from the main appangular/node_modulesinto the library’snode_modules - then build/run as usual
- create a
This matches the behavior you observed: when you bypass
pathsand consume the built output viafile:dependency, everything works because module resolution becomes consistent again.- Remove any
What to do in ABP v10.x
- Until the template/codegen is adjusted for this scenario, the stable approach is:
- either use the symlink strategy for “module development UI inside same workspace”
- or build the module and consume it via
file:(your current working approach), avoidingpathsredirection.
- Until the template/codegen is adjusted for this scenario, the stable approach is:
Sources (validated)
- https://abp.io/community/articles/5z2ate6e
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.
-
0
Thank you for the detailed explanation of the issue. I was not able to reproduce the problem on my end.
Could you please confirm which Suite version you used for the generation? You can find the version details in the documentation: https://abp.io/docs/latest/studio/working-with-suite
Additionally, it would be very helpful if you could share the dependency information from your
package.jsonfile.Thank you in advance for your cooperation.
