如何将子组件正确导入延迟加载的IonicPage？

时间：2017-07-18 10:19:49

标签： angular ionic3

我有这个问题，我的子组件抛出＆＃34;不是已知元素：＆＃34;错误。

这是我的模块组件 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 { }

气泡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);
  }

}

我的父模块

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 { }

在我的HTML中

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

如果我在app.module＆＃39; @NgModule()声明中声明它可行，但我想将所有子组件保留在Parent组件中。因为在其他地方不需要它们。我错过了什么？

错误是：

'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

提前致谢。

编辑：

这里是完整的错误：

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

数据结构

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

2 个答案:

答案 0 :(得分：0)

在父模块中导入BubbleListComponentModule而不是BubbleListComponent。

父模块

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 { }
  

错误：1。如果'bubble-list'是Angular组件，请验证   它是这个模块的一部分。

说组件必须打包在要分发的模块中，这是你做得正确的。然后导入模块而不是组件。

答案 1 :(得分：0)

方法1 ：保持lazyload并将子页面导入父模块。 

--prod

它在调试时工作正常但是当你用@IonicPage构建时，它会抛出错误。

方法2 ：删除延迟加载并执行与方法1相同的操作 移除bubble.component中的bubble.module并删除bubble.component。在那之后做同样的方法1.它在所有情况下都可以正常工作。 MyMainPage将在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: [ ] }) 加载的同时加载。

方法3 ：保持延迟加载并将子模块导入父模块。 

ionic serve

我只是在$ ps -o etime,pid,bsdstart,cmd ELAPSED PID START CMD 00:05 25980 18:33 bash 00:00 26019 18:33 ps -o etime,pid,bsdstart,cmd 中测试此方法，它运行正常。请在其他情况下测试： - ）

相关问题
最新问题