Ion-navbar broken after beta 8 updtes


I have setup a ionic2 project with “ionic start MyIonic2Project tutorial --v2 --ts” maybe on beta 6.

I went directly to Beta 10, having missed Beta 8. I adopted the Beta 8 breaking changes on Beta 10.

after the changes, I switched to webpack + ts-loader for ionic-gulp tasks (the browserify+tsify gave me a lot of headaches handling external ts modules), and this was successful. because I can bring up apps by “ionic serve --lab”.

however, while playing around, I found that the ion-navbar stopped working. see snapshot below

I did another “ionic start MyIonic2Project tutorial --v2 --ts” , in the same environment. and it works fines.

I compared the codes file by file. and found out that the code are almost the same, the only difference is that “@Page” was still there (these should have been replace by @Component).

I am not sure if the “@Page” was just a heedless or on purpose

my “ionic info” :

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS
Node Version: v6.2.2

my “package.json” :

“dependencies”: {
@angular/common”: “^2.0.0-rc.1”,
@angular/compiler”: “^2.0.0-rc.1”,
@angular/core”: “^2.0.0-rc.1”,
@angular/http”: “^2.0.0-rc.1”,
@angular/platform-browser”: “^2.0.0-rc.1”,
@angular/platform-browser-dynamic”: “^2.0.0-rc.1”,
@angular/router”: “^2.0.0-rc.1”,
“es6-shim”: “^0.35.1”,
“fbsts”: “^1.0.17”,
“ionic-angular”: “2.0.0-beta.10”,
“ionic-native”: “^1.3.2”,
“ionicons”: “3.0.0”,
“node-uuid”: “^1.4.7”,
“reflect-metadata”: “^0.1.3”,
“rxjs”: “^5.0.0-beta.6”,
“zone.js”: “^0.6.12”
“devDependencies”: {
“del”: “2.2.1”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.8”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“ionic-gulp-webpack”: “^2.0.0”,
“run-sequence”: “1.2.1”,
“ts-loader”: “^0.8.2”,
“typescript”: “1.8.10”,
“typings”: “1.3.1”
“cordovaPlugins”: [
“cordovaPlatforms”: [
“name”: “tsender”,
“description”: “tsender: An Ionic project”,
“license”: “ISC”,
“repository”: {
“type”: “git”,
“url”: ""

my “tsconfig.json”:

“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“moduleResolution”: “node”,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“noImplicitAny”: false,
“sourceMap”: true,
“removeComments”: false

“filesGlob”: [
“exclude”: [
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false


and my “webpack.config.json”;

var path = require(‘path’);

module.exports = {
entry: [
output: {
path: path.resolve(‘www/build/js’),
filename: ‘app.bundle.js’

devtool: 'source-map',
resolve: {
    extensions: ['', '.js', '.ts', '.webpack.js', '.web.js']
module: {
    loaders: [
            test: /\.ts(x?)$/,
            loader: 'ts-loader'



Same problem for me no more ion-navbar !

All you should need to do is put an <ion-header> tag around your <ion-navbar> and remove the *navbar decorator - this is a change that was added in beta 10

I tried the solution, and it works
thanks very much.