У меня есть монорепозиторий, созданный инструментом 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
, но он все равно не работает с той же ошибкой.
Может ли кто-нибудь здесь помочь избавиться от этой ошибки? Заранее спасибо. :)