ionic framework - Error using Angular shared Library across mulitple Icon apps

Question

I have followed Building an Ionic Multiple App Project with Shared Angular Library to Share common angular library among multiple Ionic Apps. The App runs accordinly. However, the common shared library is not recognized by the Apps when referencing the common library components. As the link suggests, In order to use shared library component we change the path in the ts.config file of the ionic apps.

I added the path in Ionic App tsconfig file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "academy-lib": [
        "../../dist/academy-lib"
      ],
      "academy-lib/*": [
        "../../dist/academy-lib/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

In my ionic App Home Page Module Page

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { AcademyLibModule } from 'academy-lib';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    AcademyLibModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Home Page HTML

<div id="container">
    <ac-academyLib></ac-academyLib>
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>

and the Library file

import { Component, OnInit } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'ac-academyLib',
  template: `
    <p>
      academy-lib works!
    </p>
  `,
  styles: [
  ]
})
export class AcademyLibComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

The setup of the project is exactly the same, but I am receiving a weired error.

If I call the services of the Angular Shared Library it works from Ionic App. However, the components doesn't work.

Answer 1

等待大神答复