我为我的项目使用了延迟加载。之后,我无法获得系统的预期输出。控制台中没有任何错误。我在这段代码中看不到任何错误的东西。那我该怎么办
我停止了终端并通过qazxsw poi命令重启项目。但什么都没发生。
APP-routing.module.ts
npm start
发票建设者,routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'invoice',
loadChildren :'./invoice-builder/invoice-builder.module#InvoiceBuilderModule',
},
{
path: '',
redirectTo: 'invoice',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
发票builder.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { InvoiceBuilderComponent } from './invoice-builder.component';
const routes: Routes = [
{
path: '',
component: InvoiceBuilderComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class InvoiceBuilderRoutingModule { }
发票builder.component.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InvoiceBuilderRoutingModule } from './invoice-builder-routing.module';
import { InvoiceBuilderComponent } from './invoice-builder.component';
@NgModule({
declarations: [InvoiceBuilderComponent],
imports: [
CommonModule,
InvoiceBuilderRoutingModule
]
})
export class InvoiceBuilderModule { }
预期产量是
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-invoice-builder',
template: `
<p>
invoice-builder works!
</p>
`,
styles: []
})
export class InvoiceBuilderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app.module.ts
invoice-builder works!
浏览器显示如下import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from './shared/material.module';
import { InvoiceBuilderModule } from './invoice-builder/invoice-builder.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
发票builder.component.ts
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-invoice-builder',
template: `
<p>
invoice-builder works!
</p>
`,
styles: []
})
export class InvoiceBuilderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}