Javascript 如何将app.module.ts中定义的ngModules用于延迟加载的组件?
我的目标是延迟加载应用程序我只想在Javascript 如何将app.module.ts中定义的ngModules用于延迟加载的组件?,javascript,angular,typescript,Javascript,Angular,Typescript,我的目标是延迟加载应用程序我只想在app.module.ts 例如,user.component.ts需要FormsModule和HttpClientModule。我想在app.module.ts中导入NgModules,而不是components/user/user.module.ts 当前,如果user.component.ts需要FormsModule和HttpClientModule,我需要将其导入user.module.ts。理论上,我需要为每个使用HttpClient.get()的视
app.module.ts
例如,user.component.ts
需要FormsModule
和HttpClientModule
。我想在app.module.ts
中导入NgModules,而不是components/user/user.module.ts
当前,如果user.component.ts
需要FormsModule
和HttpClientModule
,我需要将其导入user.module.ts
。理论上,我需要为每个使用HttpClient.get()的视图导入HttpClientModule
我担心这会增加延迟加载组件的捆绑大小
这是我想要实现的示例app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
=tl:dr
下面是我使用的当前解决方案使用user.module.ts
并为每个使用HttpClient.get()的视图导入HttpClientModule
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/user/user.module').then(m => m.UserModule)
},
{
path: 'about/:id',
loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from './user.component';
@NgModule({
imports: [
UserRoutingModule,
FormsModule,
HttpClientModule
],
declarations: [UserComponent]
})
export class UserModule { }
app-routing.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/user/user.module').then(m => m.UserModule)
},
{
path: 'about/:id',
loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from './user.component';
@NgModule({
imports: [
UserRoutingModule,
FormsModule,
HttpClientModule
],
declarations: [UserComponent]
})
export class UserModule { }
组件/user/user.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/user/user.module').then(m => m.UserModule)
},
{
path: 'about/:id',
loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from './user.component';
@NgModule({
imports: [
UserRoutingModule,
FormsModule,
HttpClientModule
],
declarations: [UserComponent]
})
export class UserModule { }
您可以awlays构建应用程序用于生产,并检查捆绑包大小是否确实变大。您可以awlays构建应用程序用于生产,并检查捆绑包大小是否确实变大