英文:
Angular 16: failed to load component through lazy loading process
问题
我正在尝试延迟加载项目中的一个组件（HomeComponent）。我尝试使用按钮来加载它（单击按钮后，URL 将更改），或者手动更改URL。但输出似乎停留在 app.component.html 中，不加载目标组件。
以下是来自 app.module.ts 文件的代码：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
loadChildren: () => import('./main/home/home.module').then(m => m.HomeModule)
}
]
}
]
@NgModule({
declarations: [AppComponent],
imports: [
CommonModule,
HttpClientModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在，以下是 home.module.ts 文件。这是我尝试访问的组件。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Routes = [
{
path: '**',
component: HomeComponent
}
];
@NgModule( {
declarations: [ HomeComponent ],
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
} )
export class HomeModule {}
这里似乎有什么问题？控制台没有显示任何错误，比如找不到模块之类的。从这里我可以做什么？
英文:
I'm trying to lazy load a component (HomeComponent) in my project. I have tried to load it by using a button (upon clicking the button the URL will be changed) and manually changing the URL. But the output seems stuck in the app.component.html and does not load the target component.
Here is the code from the app.module.ts file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
loadChildren: () => import('./main/home/home.module').then(m => m.HomeModule)
}
]
}
]
@NgModule({
declarations: [AppComponent],
imports: [
CommonModule,
HttpClientModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Now, here is the home.module.ts file. It is the component which I am trying to access.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Routes = [
{
path: '**',
component: HomeComponent
}
];
@NgModule( {
declarations: [ HomeComponent ],
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
} )
export class HomeModule {}
What seems to be there problem here? The console does not show any error like it cannot find the module or something. What can I do now from here?
答案1
得分: 0
我在我的IDE中编写了相同的代码，它可以正常工作。我认为您可能忘记在app.component.html文件中添加<router-outlet></router-outlet>。
这是一个用于动态加载组件的占位符。
英文:
I wrote the same code in my IDE, its working. I think you might have forgotten to add <router-outlet></router-outlet> in the app.component.html file.
Its a placeholder to load the components dynamically.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论