在 Ionic 应用程序中使用共享组件时生产构建失败
Posted
技术标签:
【中文标题】在 Ionic 应用程序中使用共享组件时生产构建失败【英文标题】:Production build fails when using a shared component in Ionic app 【发布时间】: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
运行我的应用程序,但它仍然失败并出现同样的错误。
这里有人可以帮忙解决这个错误吗? 提前致谢。 :)
【问题讨论】:
【参考方案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/
【讨论】:
以上是关于在 Ionic 应用程序中使用共享组件时生产构建失败的主要内容,如果未能解决你的问题,请参考以下文章