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

【问题标题】：Production build fails when using a shared component in Ionic app在 Ionic 应用程序中使用共享组件时生产构建失败
【发布时间】：2020-01-16 18:12:00
【问题描述】：

我有一个由 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 生成库 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)

创建库 my-lib 后，我在 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() {
  }
}

在 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 看起来像，

@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]})

执行ionic serve 命令时一切正常。

在尝试使用 --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.

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

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

这里有人可以帮忙解决这个错误吗？提前致谢。 :)

【问题讨论】：

标签： angular shared-libraries ionic4 monorepo nrwl-nx

【解决方案1】：

我在使用材料选项卡时遇到了同样的错误... 在你的 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-my-lib' 是 Angular 组件。（模块）
在你的模板中有组件。但是你有 MyLibModule 这不是一个组件。
抱歉信息丢失，我的库中有一个组件。我已经更新了我的问题。谢谢
如何在你的 app.module.ts 中导入？
你应该在你的 app.module.ts 中导入 MyLibModule

【解决方案2】：

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

方法如下，

添加包，

 ng add @nstudio/xplat

添加离子应用

ng g @nstudio/xplat:app

应用程序生成后，使用所需页面中的共享库（如问题所述），一切顺利。

ionic build --prod 构建没有任何错误。

以下链接可能会有所帮助，https://blog.devget.net/development/angular-8-ionic-4-monorepo-part-1-the-setup/

【讨论】：