angular - 如何在两个不同的模块中声明 AppComponent
问题描述
我正在运行包含两个不同应用程序的 Angular 7 项目:
- 基本工具
- 高级工具
BasicTools 项目指向 basic-main.ts,AdvancedTools 项目指向 advanced-main.ts。从 basic-main.ts 文件,BasicAppModule 被引导,从 advanced-main.ts AdvancedAppModule 被引导。
我有在 BasicAppModule 和 AdvancedAppModule 中都使用的通用 AppComponent 但是在构建应用程序时,我收到错误,因为 AppComponent 被声明为两个模块的一部分。
我尝试在 basic-app.module.ts 中导出 AppComponent,还从 advanced-app.module.ts 中删除了 AppComponent 的声明,但出现错误:AppComponent 应声明为 ngModule 的一部分。
有什么办法可以解决这个问题,因为我在两个模块中都需要 AppComponent。??
下面是我的 angular.json 文件:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"BasicTools": {
"root": "",
"sourceRoot": "Client",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": "Client/index.html",
"main": "Client/app/basic/basic-main.ts",
"polyfills": "Client/polyfills.ts",
"tsConfig": "Client/tsconfig.app.json",
"assets": [
"Client/assets"
],
"styles": [
"Client/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "Client/environments/environment.ts",
"with": "Client/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "BasicTools:build"
},
"configurations": {
"production": {
"browserTarget": "BasicTools:build:production"
}
}
}
},
"AdvancedTools": {
"root": "",
"sourceRoot": "Client",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": "Client/index.html",
"main": "Client/app/advanced/advanced-main.ts",
"polyfills": "Client/polyfills.ts",
"tsConfig": "Client/tsconfig.app.json",
"assets": [
"Client/assets"
],
"styles": [
"Client/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "Client/environments/environment.ts",
"with": "Client/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "AdvancedTools:build"
},
"configurations": {
"production": {
"browserTarget": "AdvancedTools:build:production"
}
}
}
},
高级main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from '../../environments/environment';
import { AdvancedAppModule } from '../advanced-app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AdvancedAppModule);
基本的main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from '../../environments/environment';
import { BasicAppModule } from '../basic-app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(BasicAppModule);
高级-app.module.ts
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
CoreModule,
SharedModule,
BasicModule,
AdvancedModule,
applicationRoutingInformation
],
providers: [
{ provide: LocationStrategy, useClass: MiPathLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AdvancedAppModule { }
基本-app.module.ts
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
BasicModule,
CoreModule,
SharedModule,
applicationRoutingInformation
],
providers: [
{ provide: LocationStrategy, useClass: MiPathLocationStrategy }
],
bootstrap: [AppComponent]
})
export class BasicAppModule { }
解决方案
在您的两个根模块配置中创建AppModule
导出并将其导入:AppComponent
app.module.ts
@NgModule({
declarations: [AppComponent],
exports: [AppComponent]
})
export AppModule {}
基本-app.module.ts
@NgModule({
imports: [AppModule, ...],
bootstrap: [AppComponent],
...
})
export class BasicAppModule{}
高级-app.module.ts
@NgModule({
imports: [AppModule, ...],
bootstrap: [AppComponent],
...
})
export class AdvancedAppModule {}
更进一步,如果您在这两个入口模块之间共享 AppComponent 的一些公共依赖项,您可以在AppModule
配置中为它们添加提供程序。
推荐阅读
- javascript - 在 Wordpress 中触发 MediaElement.js 视频的大小调整
- python - 如何遍历一个元组或函数列表并对它们的返回值进行操作?
- php - 处理特殊字符 PHP Webdriver
- javascript - 如何在 ResultCard 中实现 onclick 并将 div 与另一个组件交换
- android - 如何更新 Dart 类变量并刷新颤振状态?
- php - 如何在代码点火器模型 php 代码点火器上转换此 SQL 查询
- python - tensorflow:找不到dnn实现
- java - 问题: curl: (7) 无法连接到 localhost 端口 1080: Connection refused
- javascript - Tensorflow Square 函数不精确
- javascript - 通过相同的 JS 代码提交多个表单时不支持 POST 方法。(405)