#lazy loading question

1 messages · Page 1 of 1 (latest)

limpid flicker
#

Hello, I would like to ask a Lazy-loading question:

app.module.ts
import { DatePickerStartComponent } from './PageMaterial/date-picker-start/date-picker-start.component';
import { CommonModule } from '@angular/common';

@NgModule({
declarations: [
DatePickerStartComponent,
CommonModule,
......and other Component other Module

app-routing.module.ts
{
path: 'AIMS',
loadChildren: () => import('./aims/aims.module').then(m => m.AIMSModule)
},

aims.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [

],
imports: [
CommonModule,
AIMSRoutingModule,

AIMSModule's component
aug-raw-avg.component.html
<app-date-picker-start class=" button-container btn-group col-12 col-xl-6" (dateSelected)="handleDateSelected($event)"></app-date-picker-start>

has a problem：
'app-date-picker-start' is not a known element:

  1. If 'app-date-picker-start' is an Angular component, then verify that it is part of this module.
  2. If 'app-date-picker-start' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
    aug-raw-avg.component.ts(1, 144): Error occurs in the template of component AugRawAvgComponent.
    (element) app-date-picker-start: HTMLElement
dense pebble
#

AugRawAvgComponent is declared in a module that does not import the module where DatePickerStartComponent is declared and exported. So it can't use it. You need to put DatePickerStartComponent in a separate module, declare it and export it there, and import that other module in modules that need it. Or do as the docuentation strongly encourages: forget about NgModules, make the components standalone, and import them whre you use them.

limpid flicker
#

SharedModule.ts
// shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatePickerStartComponent } from './PageMaterial/date-picker-start/date-picker-start.component';

@NgModule({
declarations: [
DatePickerStartComponent,
],
exports: [
DatePickerStartComponent,
CommonModule, // 需要導出 CommonModule 以便其他模組使用
],
imports: [
CommonModule,
],
})
export class SharedModule { }

////////////////////////
// aims.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AIMSRoutingModule } from './aims-routing.module';
import { SharedModule } from '../shared/shared.module'; // 導入 SharedModule

@NgModule({
declarations: [],
imports: [
CommonModule,
AIMSRoutingModule,
SharedModule, // 導入 SharedModule
],
})
export class AIMSModule { }

limpid flicker
dense pebble
#

ngModel is a directive from the FormsModule. So the module where you use it must import FormsModule.

limpid flicker