Main project cannot load component inside added module #3273 | Support Center | ABP Commercial

toptis created one year ago

ABP Framework version: v5.3.0
UI type: Angular
DB provider: EF Core

I created an EF Core + Angular application. Then, I added a custom module using the ABP suite named Start It created backend projects in the aspnet-core/modules folder and angular project in the angular/projects folder.

first, i edited tsconfig.json: "@top-tis.project-name/start": [ "projects/TopTis.project-name.Start/projects/start/src/public-api.ts" ], "@top-tis.project-name/start/config": [ "projects/TopTis.project-name.Start/projects/start/config/src/public-api.ts" ],

I added lazy loading of this new module in my main app-routing.module.ts: { path: 'start', loadChildren: () => import('@top-tis.project-name/start').then(m => m.StartModule.forLazy()), }

Then, Imported the ConfigModule in my app.module.ts

StartConfigModule.forRoot(),

At last, I added a route in my route.provider.ts

{ path: '/start', name: 'StartMenu' }

http://localhost:4200/start Dos not work and I have the below error in the console

core.mjs:6494 ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context Error: NG0203: inject() must be called from an injection context at injectInjectorOnly (core:4768:1) at Module.ɵɵinject (core:4778:1) at Object.RouterModule_Factory [as factory] (router.mjs:5861:1) at R3Injector.hydrate (core.mjs:11494:1) at R3Injector.get (core.mjs:11313:1) at core.mjs:11351:1 at Set.forEach (<anonymous>) at R3Injector._resolveInjectorDefTypes (core.mjs:11351:1) at new NgModuleRef (core.mjs:21881:1) at NgModuleFactory.create (core.mjs:21935:1) at resolvePromise (zone.js:1211:1) at resolvePromise (zone.js:1165:1) at zone.js:1278:1 at _ZoneDelegate.invokeTask (zone.js:406:1) at Object.onInvokeTask (core.mjs:25595:1) at _ZoneDelegate.invokeTask (zone.js:405:1) at Zone.runTask (zone.js:178:1) at drainMicroTaskQueue (zone.js:585:1)

7 Answer(s)

0

muhammedaltug created one year ago

Hello,

What is your angular version?

Did you use the inject function outside of the class creation context (eg: in lifecycle methods). If you did this angular doesn't allow it. For more information, you can check official angular documentation
0

toptis created one year ago

Angular Version is 13.3.3 And no I have not injected anything yet steps are clear. I don't do anything else with project yet except the steps I explained in my main question.
0

muhammedaltug created one year ago

Hello,

Can you send us an example project which includes this error?

Note: Please write the issue number(for this issue 3273) in the mail. Support mail address is support@abp.io
0

toptis created one year ago

Hello, I think the steps explained were so clear that you could re-create this problem. Anyway, I created and commented on a new project and sent it to your email. Search'problem-step' in the angular project to find steps. It is important to know that I didn't make any changes to the project except where I commented.

Please follow up as soon as possible.

muhammedaltug created one year ago

Hello,

Sorry for the late reply

I realized there are problems after generating custom module in the app pro template. Suite creates an angular project inside the projects folder and this app has angular project files (angular.json etc.). But projects folder should include only angular packages and angular applications. The config added to angular.json which is in the angular folder does not point to the created library.

We will work on this problem. For now, you can follow the steps below to avoid this error

Move the start folder which is in angular/projects/YOUR_MODULE_NAME/projects/start to angular/projects/start
Copy the library configuration which is in angular/projects/YOUR_MODULE_NAME/angular.json to angular/angular.json
Remove angular/projects/YOUR_MODULE_NAME directory
Edit paths in the angular/angular.json and angular/tsconfig.json files angular/projects/YOUR_MODULE_NAME to angular/projects/start
Remove the angular/.angular folder (angular's cache folder) if exists. And start your project

Note: After applying these steps StartConfigModule's routeProviders successfully added routes to the menu. You don't need to add manually in the app routeProviders

For your example, these files should look like following

// tsconfig.json
"@top-tis.project-name/start": [ "projects/start/src/public-api.ts" ], 
"@top-tis.project-name/start/config": [ "projects/start/config/src/public-api.ts" ]

// angular.json
{
  // other configs
  "projects": {
    // other projects
    "start": {
      "projectType": "library",
      "root": "projects/start",
      "sourceRoot": "projects/start/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/start/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/start/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/start/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/start/src/test.ts",
            "tsConfig": "projects/start/tsconfig.spec.json",
            "karmaConfig": "projects/start/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["projects/start/**/*.ts", "projects/start/**/*.html"]
          }
        }
      }
    }
  }
}

Your credit refunded

0

toptis created one year ago

ok please send me the issue link on Github so I can track it, please
0
muhammedaltug created one year ago
Hello

I can't share because the issue is in the private repo. We realized also ABP Cli generates modules successfully.

You can use the command below to generate a module (Please run this command in the project root folder which includes angular and aspnet-core folders)

abp new Your.Module -t module --add-to-solution-file

I will inform you when the fix is available.
1

Have an answer to this question? Log in and write your answer.

Assignee

muhammedaltug

Labels