Clever Geek Handbook

How do I properly import a child component into a lazy loaded IonicPage?

I have this problem where my child component is throwing an "Unknown item:" error.

this is my module component Bubble-list.module

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BubbleListComponent } from './bubble-list.component';

@NgModule({
    declarations: [
        BubbleListComponent,
    ],
    imports: [
        IonicPageModule.forChild(BubbleListComponent),
    ],
    exports: [
        BubbleListComponent
    ]
})
export class BubbleListComponentModule { }

Bubble-list.component

import { Component } from '@angular/core';

@Component({
  selector: 'bubble-list',
  templateUrl: 'bubble-list.html'
})
export class BubbleListComponent {

  text: string;

  constructor() {
    this.text = 'Hello Hello BubbleListComponent Component ';
    console.log(this.text);
  }

}

my parent module

import { BubbleListComponent } from './components/bubble-list/bubble-list.component';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyMainPage } from './my-editor';

@NgModule({
    declarations: [
        MyMainPage
    ],
    imports: [
        IonicPageModule.forChild(MyMainPage),
        BubbleListComponent
    ],
    exports: [
        MyMainPage
    ],
    providers: [

    ]
})
export class MyMainPageModule { }

And in my HTML

<div
    <bubble-list></bubble-list>
</div>

If I declare them in declarations app.module

@NgModule()

it works, but I want to keep all child components inside my parent component. because they are not needed elsewhere. Am I missing something?

Mistake:

'bubble-list' is not a known element:
1. If 'bubble-list' is an Angular component, then verify that it is part of this module.
2. If 'bubble-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas

Thanks in advance.

Edit:

Here's the complete error:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'bubble-list' is not a known element:
1. If 'bubble-list' is an Angular component, then verify that it is part of this module.
2. If 'bubble-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""><br><br><br><br>newItem: {{annotationsProvider.bubbleInEdition.isNewItem}}<br><br><br></div>

    [ERROR ->]<bubble-list></bubble-list>
</ion-menu>

"): ng:///AppModule/myParentPage.html@14:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'bubble-list' is not a known element:
1. If 'bubble-list' is an Angular component, then verify that it is part of this module.
2. If 'bubble-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""><br><br><br><br>newItem: {{annotationsProvider.bubbleInEdition.isNewItem}}<br><br><br></div>

    [ERROR ->]<bubble-list></bubble-list>
</ion-menu>

"): ng:///AppModule/myParentPage.html@14:4
    at syntaxError (http://localhost:8100/build/main.js:91164:34)
    at TemplateParser.parse (http://localhost:8100/build/main.js:101655:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:115406:39)
    at http://localhost:8100/build/main.js:115330:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/main.js:115330:19)
    at createResult (http://localhost:8100/build/main.js:115215:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
    at r.run (http://localhost:8100/build/polyfills.js:3:4140)
    at http://localhost:8100/build/polyfills.js:3:13731 Error: Template parse errors:
'bubble-list' is not a known element:
1. If 'bubble-list' is an Angular component, then verify that it is part of this module.
2. If 'bubble-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""><br><br><br><br>newItem: {{annotationsProvider.bubbleInEdition.isNewItem}}<br><br><br></div>

    [ERROR ->]<bubble-list></bubble-list>
</ion-menu>

"): ng:///AppModule/myParentPage.html@14:4
    at syntaxError (http://localhost:8100/build/main.js:91164:34)
    at TemplateParser.parse (http://localhost:8100/build/main.js:101655:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:115406:39)
    at http://localhost:8100/build/main.js:115330:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/main.js:115330:19)
    at createResult (http://localhost:8100/build/main.js:115215:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
    at r.run (http://localhost:8100/build/polyfills.js:3:4140)
    at http://localhost:8100/build/polyfills.js:3:13731

Data structure

/src
   /pages
      /my-parent-page
            myparent.module   && myparent.component
          /components
              /bubble-editor/
                  bubble.module  && bubble.component
+3


source to share


2 answers


Method 1 . Store lazyload and import the child page into the parent module.

import { BubbleListComponent } from './components/bubble-list/bubble-list.component';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyMainPage } from './my-editor';

@NgModule({
    declarations: [
        MyMainPage,
        BubbleListComponent
    ],
    imports: [
        IonicPageModule.forChild(MyMainPage)        
    ],
    exports: [
        MyMainPage
    ],
    providers: [

    ]
})

It works great when debugging, but when you build with --prod

, it throws an error.

Method 2 : Remove lazy loading and do the same as method 1.
Uninstall @IonicPage

in bubble.component

and uninstall bubble.module

. After that, do the same as method 1. It works fine in all cases. bubble.component

will load the load at the same time MyMainPage

.

Method 3 : store lazy load and import child module into parent module.



import { BubbleListComponentModule } from './components/bubble-list/bubble-list.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyMainPage } from './my-editor';
@NgModule({
    declarations: [
        MyMainPage
    ],
    imports: [
        IonicPageModule.forChild(MyMainPage),
        BubbleListComponentModule        
    ],
    exports: [
        MyMainPage
    ],
    providers: [

    ]
})

I am just testing this method in ionic serve

and it works great. Please check it in another case :-)

0


source


import BubbleListComponentModule

instead of BubbleListComponent

in the parent module.

parent module

import { BubbleListComponentModule } from './components/bubble-list/bubble-list.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyMainPage } from './my-editor';

@NgModule({
    declarations: [
        MyMainPage
    ],
    imports: [
        IonicPageModule.forChild(MyMainPage),
        BubbleListComponentModule 
    ],
    exports: [
        MyMainPage
    ],
    providers: [

    ]
})
export class MyMainPageModule { }


Error: 1. If "bubble-list" is an Angular component, check that it is part of this module.

Says that the component must be packaged inside a module for distribution, which you did right. And then import the module instead of the component.

0


source






More articles:


All Articles