Сбой производственной сборки при использовании общего компонента в приложении Ionic

У меня есть монорепозиторий, созданный инструментом Nrwl Nx. Monorepo уже содержит одно веб-приложение Angular, и теперь я хочу переместить свое приложение 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

Я также хочу повторно использовать свои ионные компоненты в моем угловом проекте. Чтобы выполнить повторное использование компонентов, лучший способ, который я видел до сих пор, - это создание общей библиотеки.

для создания библиотеки я использую следующую команду,

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 {}

после создания библиотеки я пытаюсь использовать ее как в угловых, так и в ионных приложениях.

В моем мобильном приложении на странице home.module.ts

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

@NgNodule({imports: [MyLibModule]})

При выполнении команды ionic serve все работает очень хорошо.

При попытке создать ионное приложение с помощью --prod появляется следующая ошибка:

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, но он все равно не работает с той же ошибкой.

Может ли кто-нибудь здесь помочь избавиться от этой ошибки? Заранее спасибо. :)


person DP63    schedule 15.09.2019    source источник


Ответы (2)


У меня была такая же ошибка, когда я использовал вкладку материалов ... в вашем 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 {
}
person Beller    schedule 15.09.2019
comment
Если app-my-lib - это компонент Angular. (Модуль) - person Beller; 16.09.2019
comment
В вашем шаблоне есть компонент ‹app-my-lib› ‹/app-my-lib›. Но у вас есть MyLibModule, который не является компонентом. - person Beller; 16.09.2019
comment
извините за недостающую информацию, у меня есть компонент в моей библиотеке. я обновил свой вопрос. Благодарность - person DP63; 16.09.2019
comment
Как вы импортируете в свой app.module.ts? - person Beller; 16.09.2019
comment
Вы должны импортировать MyLibModule в свой app.module.ts - person Beller; 16.09.2019
comment
да, я импортировал его в свой app.module.ts, вот так: import { MyLibModule } from '@workspace/my-lib'; и в @NgNodule({imports: [MyLibModule]}) - person DP63; 16.09.2019
comment
Вы бы загрузили его на stackblitz? - person Beller; 16.09.2019
comment
Постараюсь выложить на stackblitz. - person DP63; 17.09.2019

После долгих исследований я обнаружил, что, возможно, структура моего проекта неправильная. Я наткнулся на этот замечательный инструмент 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/

person DP63    schedule 16.09.2019