Ionic-framework: NoComponentFactoryError

Created on 28 Sep 2016  路  7Comments  路  Source: ionic-team/ionic-framework

I create new project use

ionic start sidemenu --v2 sidemenu

I try to add another page,page3 in the project.Copy the page2's code and change page2 to page3,
but i got error when i run commond

ionic serve

error_handler.js:51 Error: No component factory found for Page3
at NoComponentFactoryError.Error (native)
at NoComponentFactoryError.BaseError as constructor
at new NoComponentFactoryError (http://localhost:8100/build/main.js:6300:16)
at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:8100/build/main.js:6309:15)
at NgModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:8100/build/main.js:6334:35)
at NavControllerBase._viewInit (http://localhost:8100/build/main.js:46699:42)
at NavControllerBase._transition (http://localhost:8100/build/main.js:46686:18)
at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:46648:18)
at NavControllerBase._queueTrns (http://localhost:8100/build/main.js:46548:14)
at NavControllerBase._setPages (http://localhost:8100/build/main.js:46492:21)

my code page3.ts

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

import { NavController, NavParams } from 'ionic-angular';

@Component({
templateUrl: 'page3.html'
})
export class Page3 {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;

constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');

// Let's populate this page with some filler content for funzies
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];

this.items = [];
for (let i = 1; i < 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}

itemTapped(event, item) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(Page3, {
item: item
});
}
}

and my system information

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v4.4.7

when i use the previous version,it's all right.

what's wrong with my code ?

Thanks for your help.

May be i should have sent this to ionic forum,but my account can't login ,so sorry

Most helpful comment

did you add the pages to app.module.ts?

All 7 comments

What version of ionic-angular do you have installed in your packages.json?

@mbakker96
2.0.0-rc.0

{
"name": "ionic-app-base",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"dependencies": {
"ionic-angular": "^2.0.0-rc.0",
"ionicons" : "^3.0.0",
"@ionic/storage": "^1.0.3",
"ionic-native": "^2.0.3"
},
"devDependencies": {
"@ionic/app-scripts": "^0.0.23",
"typescript": "^2.0.3"
}
}

did you add the pages to app.module.ts?

Hi!

I've also problems with the latest ionic update. I'm working on it to get it working but until now i've still errors :(

Martijn

@herbzi I add the page to app.module.js,it worked,thanks very mach.

@mbakker96 I change my app.module.ts,it worked

i will give it a try ;)

Was this page helpful?
0 / 5 - 0 ratings