Angular 在Ionic应用程序中使用共享组件时，生产构建失败

我有一个由Nrwl Nx工具创建的monorepo。monorepo已经包含一个Angular web应用程序，现在我想将我的Ionic应用程序移动到现有的monorepo

工作空间的结构是

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

我还想在我的angular项目中重用我的离子组件。要实现组件的重用，到目前为止我看到的最好的方法是创建一个共享库

要创建库，我使用以下命令

ng生成库我的库--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)

在创建库my lib之后，我在库中创建了一个组件

my-lib.component.ts看起来像

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

  constructor() { }

  ngOnInit() {
  }
}

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

在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"
        }
      }
    }
  }

在项目的

tsconfig.json

中添加了以下路径：

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

我将此路径复制到我的移动应用程序的tsconfig.json

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

my-lib.module.ts看起来像

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

  constructor() { }

  ngOnInit() {
  }
}

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

生成库后，我尝试在angular和ionic应用程序中使用它

在我的移动应用程序中的home.module.ts页中

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

@NgNodule({imports: [MyLibModule]})

当执行

命令时，一切都很好

尝试使用--prod构建ionic应用程序时，出现以下错误：

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.

由../apps/mobile app/src/app/app.module.ts中的模块AppModule导入的“../libs/my lib/src/lib/my lib.module.ts”中的意外值“MyLibModule”中出现
错误。请添加@NgModule注释。
由../apps/mobile app/src/app/home/home.module.ts中的模块“HomePageModule”导入的../libs/my lib/src/lib/my lib.module.ts中的意外值“MyLibModule”。请添加@NgModule注释。
“应用程序我的库”不是已知元素：
1.如果“应用程序我的库”是一个角度组件，则验证它是否是此模块的一部分。
2.如果“app my lib”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。("
[错误->]
世界就是这样
[错误]运行子进程ng时出错。
ng运行应用程序：生成：生产已退出，退出代码为1。
使用--verbose标志重新运行此命令可能会提供更多信息。

经过一些研究，我觉得这与一些AOT编译器问题有关？但我真的不明白如何解决这个问题

我已经尝试过使用，
ionic build--prod--aot=false运行我的应用程序，但仍然失败，并出现相同的错误

这里的任何人都能帮我摆脱这个错误吗？
提前感谢。：）
 我在使用“材质”选项卡时出现了相同的错误。。。
在你的app.module.ts中

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    ReactiveFormsModule,
  ],
  providers: [ // sevices],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

我在使用“材质”选项卡时出现了相同的错误。。。
在你的app.module.ts中

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    ReactiveFormsModule,
  ],
  providers: [ // sevices],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

经过大量的研究，我发现可能是我的项目结构是错误的。我遇到了这个很棒的工具，它对正确设置爱奥尼亚项目有很大帮助

这就是为什么

添加包

 ng add @nstudio/xplat

添加离子应用程序

ng g @nstudio/xplat:app

生成应用程序后，使用所需页面中的共享库（如问题中所述），您就可以开始了

ionic构建——prod
构建时没有任何错误

下面的链接可能会有所帮助，
经过大量研究，我发现可能是我的项目结构不对。我遇到了这个很棒的工具，它对正确设置爱奥尼亚项目有很大帮助

这就是为什么

添加包

 ng add @nstudio/xplat

添加离子应用程序

ng g @nstudio/xplat:app

生成应用程序后，使用所需页面中的共享库（如问题中所述），您就可以开始了

ionic构建——prod
构建时没有任何错误

如果“应用程序我的库”是一个角度组件，下面的链接可能会有所帮助。模板中的（模块）具有组件。但是您有MyLibModule，它不是一个组件。很抱歉，缺少信息，我的库中有一个组件。我已经更新了我的问题。thanksHow是否在app.module.ts中导入？如果“app my lib”是角度组件，则应在app.module.ts中导入MyLibModule。模板中的（模块）具有组件。但是您有MyLibModule，它不是一个组件。很抱歉，缺少信息，我的库中有一个组件。我已经更新了我的问题。thanksHow您是否在app.module.ts中导入？您应该在app.module.ts中导入MyLibModule