Production build fails when using a shared component in Ionic app

Question

I've a monorepo created by Nrwl Nx tool. The monorepo already contains one Angular web app and now i want to move my Ionic App to the existing monorepo.

the structure of workspace is,

apps/
  -> AngularWebApp
  -> IonicMobileApp/
     -> e2e
     -> node_modules
     -> src/
        ->app/
          -> app.module.ts
          -> app.component.ts
          -> app.component.html
          -> ..
          -> home/
             -> home.page.html
             -> home.module.ts
             -> home.page.ts
     -> ionic.config.json
     -> package.json
     -> tsconfig.json
     -> tsconfig.app.json
     -> angular.json
libs/
  -> my-lib
package.json
ionic.config.json
package.json
tsconfig.json
tsconfig.app.json
angular.json

I also want to reuse my ionic components into my angular project. to carry out the reusing of components, the best way that i see so far is creating a shared library.

to create a library, i use the following command,

ng generate library my-lib --prefix=lib

ng generate library my-lib --prefix=lib
? In which directory should the library be generated? 
? What framework should this library use? Angular    [ https://angular.io/             ]
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]
? Which tags would you like to add to the library? (used for linting) 
? Which Unit Test Runner would you like to use for the library? Jest [https://jestjs.io/]
CREATE libs/my-lib/README.md (986 bytes)
CREATE libs/my-lib/tsconfig.lib.json (705 bytes)
CREATE libs/my-lib/tslint.json (187 bytes)
CREATE libs/my-lib/src/index.ts (37 bytes)
CREATE libs/my-lib/src/lib/my-lib.module.ts (160 bytes)
CREATE libs/my-lib/src/lib/my-lib.module.spec.ts (344 bytes)
CREATE libs/my-lib/tsconfig.json (123 bytes)
CREATE libs/my-lib/tsconfig.spec.json (245 bytes)
CREATE libs/my-lib/jest.config.js (261 bytes)
CREATE libs/my-lib/src/test-setup.ts (30 bytes)
UPDATE angular.json (58704 bytes)
UPDATE nx.json (1732 bytes)
UPDATE tsconfig.json (1649 bytes)
UPDATE package.json (5294 bytes)

After creating library my-lib, i have created a component inside my-lib.

my-lib.component.ts looks like,

@Component({
  selector: 'app-my-lib',
  templateUrl: './my-lib.component.html',
  styleUrls: ['./my-lib.component.scss']
})
export class MyLibComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

in angular.json,

"my-lib": {
      "root": "libs/my-lib",
      "sourceRoot": "libs/my-lib/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/my-lib/tsconfig.lib.json",
              "libs/my-lib/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "test": {
          "builder": "@nrwl/builders:jest",
          "options": {
            "jestConfig": "libs/my-lib/jest.config.js",
            "tsConfig": "libs/my-lib/tsconfig.spec.json",
            "setupFile": "libs/my-lib/src/test-setup.ts"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    }
  }

and following paths were added in project's tsconfig.json,

path: {"@workspace/my-lib": ["libs/my-lib/src/index.ts"]}

I copied this path to my mobile app's tsconfig.json,

path: {"@workspace/my-lib": ["../../libs/my-lib/src/index.ts"]}

my-lib.module.ts looks like,

@NgModule({
  imports: [CommonModule],
  declarations: [MyLibComponent],
  exports: [MyLibComponent]
})
export class MyLibModule {}

after generating the library, I try to use it in both angular and ionic apps.

In my mobile app, in page home.module.ts,

import { MyLibModule } from '@workspace/my-lib'; //specified in apps/IonicMobileApp/tsconfig.json

@NgNodule({imports: [MyLibModule]})

Everything works really well when ionic serve command is executed.

While trying to build the ionic app using --prod, the following error comes up,

ERROR in Unexpected value 'MyLibModule' in '../libs/my-lib/src/lib/my-lib.module.ts'imported by the module 'AppModule' in ../apps/mobile-app/src/app/app.module.ts'. Please add a @NgModule annotation.
Unexpected value 'MyLibModule' in ../libs/my-lib/src/lib/my-lib.module.ts' imported by the module 'HomePageModule' in ../apps/mobile-app/src/app/home/home.module.ts'. Please add a @NgModule annotation.
'app-my-lib' is not a known element:
1. If 'app-my-lib' is an Angular component, then verify that it is part of this module.
2. If 'app-my-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-content>
  <div class="ion-padding">
    [ERROR ->]<app-my-lib></app-my-lib>
    The world is yo")

[ERROR] An error occurred while running subprocess ng.

        ng run app:build:production exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

After some research, i feel that this is related to some AOT compiler problem? but i dont really understand how to solve this.

I have already tried running my app using, ionic build --prod --aot=false, but it still fails with the same error.

Can anyone here please help to get rid of this error? Thanks in advance. :)

Answer 1

After much research, i found out that may be my project structure is wrong. I came across this wonderful tool xplat which helped a lot to setup Ionic project correctly.

heres how,

add package,

 ng add @nstudio/xplat

add ionic app

ng g @nstudio/xplat:app

after the app is generated, use the shared library in the required page (as described in question) and you are good to go.

ionic build --prod builds without any error.

Following link might help, https://blog.devget.net/development/angular-8-ionic-4-monorepo-part-1-the-setup/