我正在加载延迟加载我的模块。我需要在另一个模块中使用一种形式的模块。
例如,有产品模块和品牌模块。两者都以延迟加载方式加载。但我希望用户能够在产品表单中注册品牌。但我的问题是两个模块都是懒散加载的。
我真的需要完全加载这两个模块吗?或者我可以只加载所需的组件吗?
我的加载延迟加载:
const productRoutes: Routes = [
{
path: 'product',
loadChildren: 'app/admin/product/product.module#ProductModule',
canLoad: [AuthGuard]
}
];
const brandRoutes: Routes = [
{
path: 'brand',
loadChildren: 'app/admin/brand/brand.module#BrandModule',
canLoad: [AuthGuard]
}
];
我的组件:
....
<div class="form-group">
<label for="exemplo">Create Name Product</label>
<input type="text" name="name" [(ngModel)]="Product.name" #name="ngModel" >
</div>
<div class="form-group">
<label for="exemplo">Create Brand</label>
<brand-form-component></brand-form-component>
</div>
修改
我创建了共享模块:
import { NgModule } from '@angular/core';
import { FormComponent as
FormBrandComponent } from '../../brand/brand-form/form.component'
@NgModule({
imports: [ ],
declarations: [ FormBrandComponent ],
providers: [ FormBrandComponent ],
exports: [ FormBrandComponent ],
})
export class SharedModule { }
我在其他模块中导入:
品牌模块
import { SharedModule }from '../shared/shared.module';
@NgModule({
imports: [ SharedModule, DialogModule, GrowlModule, Ng2PaginationModule, BrandRouting ],
declarations: [ BrandComponent, ListComponent ],
providers:[ BrandService ]
})
export class BrandModule {}
产品模块
import { SharedModule }from './shared/shared.module';
@NgModule({
imports: [ SharedModule, CurrencyMaskModule, DragulaModule, GrowlModule, DialogModule, Ng2PaginationModule, productRouting, ReactiveFormsModule ],
declarations: [ ProductComponent, FormComponent, ListComponent ],
providers:[ FormComponent, ProductService, BreadService, MarcaService, GradeService ]
})
export class ProductModule { }
但是给出了以下错误:
答案 0 :(得分:8)
延迟加载的当前实现是在模块级别上,它是全部或全部。如果您需要在两者之间共享组件(这听起来像这样),那么您可能有一个尚未完全识别的隐藏共享模块。因此,您很可能应该创建一个新模块来容纳这些共享组件/服务,并将该模块导入到其他两个延迟加载的模块中。
您可以选择新模块是懒惰还是急切加载 - 这两种模块都可以正常工作。 (由于它是产品和品牌模块的依赖关系,一旦加载,新模块也会被加载)。