Open Closed

Main project cannot load component inside added module #3273


0
toptis created
  • 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
    Support Team

    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

    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
    Support Team

    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 [email protected]

  • 0
    toptis created

    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.

  • 0
    muhammedaltug created
    Support Team

    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

    ok please send me the issue link on Github so I can track it, please

  • 0
    muhammedaltug created
    Support Team

    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.