Some errors in ionic2 serve, but the app works at all

Ionic Framework ionic-v3
1

I don’t know if i am doing something wrong in my code or the errors are wrong but i am getting this while i do ionic serve:

C:\Users\Next-Version\Desktop\rrpp2>ionic serve

∆ Compiling and bundling with Webpack…
√ Using your webpack.config.js file

∆ Compiling Sass to CSS
√ Matching patterns: app/theme/app.+(ios|md|wp).scss

∆ Copying fonts
√ Matching patterns: node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)

∆ Copying HTML
√ Matching patterns: app/**/*.html

√ HTML copied to www/build
√ Sass compilation complete
√ Fonts copied to www/build/fonts

Hash: 603e3ac45ed7bb0c9ca9
Version: webpack 1.12.11
Time: 18707ms
Asset Size Chunks Chunk Names
app.bundle.js 2.73 MB 0 [emitted] main
[0] multi main 64 bytes {0} [built]
+ 364 hidden modules

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/app.ts:27:13
Property ‘app’ does not exist on type ‘MyApp’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/app.ts:28:13
Property ‘menu’ does not exist on type ‘MyApp’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/app.ts:30:13
Property ‘pages’ does not exist on type ‘MyApp’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/app.ts:56:13
Property ‘menu’ does not exist on type ‘MyApp’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/app.ts:60:23
Property ‘app’ does not exist on type ‘MyApp’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/detail/detail.ts:9:13
Property ‘nav’ does not exist on type ‘DetailPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/detail/detail.ts:10:13
Property ‘params’ does not exist on type ‘DetailPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/detail/detail.ts:15:24
Property ‘params’ does not exist on type ‘DetailPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/detail/detail.ts:16:13
Property ‘user’ does not exist on type ‘DetailPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/home/home.ts:9:13
Property ‘nav’ does not exist on type ‘HomePage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/home/home.ts:10:13
Property ‘menu’ does not exist on type ‘HomePage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/home/home.ts:14:13
Property ‘menu’ does not exist on type ‘HomePage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/home/home.ts:15:25
Property ‘menu’ does not exist on type ‘HomePage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/home/home.ts:19:13
Property ‘nav’ does not exist on type ‘HomePage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:11:13
Property ‘nav’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:12:13
Property ‘http’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:17:13
Property ‘http’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:18:17
Property ‘users’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:19:29
Property ‘users’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/app/pages/list/list.ts:26:13
Property ‘nav’ does not exist on type ‘ListPage’.

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/node_modules/angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.

√ Webpack complete

∆ Starting dev server.

√ Running live reload server: http://localhost:35729
√ Running dev server: http://localhost:8100
√ Watching: 0=www/build//*.html, 1=www/build//.js, 2=www/build/**/.css
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

ionic $

The app is working perfect, but the errors persists. Here is my list.ts for example:

import {Page, NavController} from 'ionic-angular';
import {Http} from 'angular2/http';
import {DetailPage} from '../detail/detail';

@Page({
  templateUrl: 'build/pages/list/list.html',
})
export class ListPage {

    constructor(nav : NavController, http : Http) {
        this.nav = nav;
        this.http = http;
        this.reqApi();
    }
    
    reqApi() {
        this.http.get("http://api.randomuser.me/?results=20&nat=es").subscribe(data => {
            this.users = data.json().results;
            console.log(this.users);
    }, error => {
            console.log(error);
        });
    }
    
    goDetailPage(user) {
        this.nav.push(DetailPage, {user: user});
    }
}

I am doing something wrong or what?

Thanks

2

AFAIK, in TypeScript you should declare the members of the class before using them.

Either explicitly:

export class ListPage {
    private nav: NavController; // <- Declare the property explicitly as private.
    http: Http; // Declare the property explicitly (the access defaults to public).

    constructor(nav: NavController, http: Http) {
        this.nav = nav;
        this.http = http;
        this.reqApi();
    }

Or implicitly:

export class ListPage {
    // Implicit declaration of private/public members in the constructor.
    constructor(private nav: NavController, public http: Http) {
        // this.nav = nav; <- This is not needed anymore.
        // this.http = http;
        this.reqApi();
    }
2 Likes
4

Thanks @iignatov maybe i should read more about typescript. The errors are solved, except this:

ERROR in [default] C:/Users/Next-Version/Desktop/rrpp2/node_modules/angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.

What this mean? Thanks

5

This error is caused by incompatibility between TypeScript and Angular (see angular issue #6468, tl;dr: TypeScript 1.8 requires angular2 beta.7 or higher). Check in your package.json file which version of TypeScript is used (most probably 1.8+). This error will be resolved with the next Ionic2 release (beta.4) because the master is already updated to Angular2 beta.8.

The TypeScript syntax is a bit more verbose than JS but offers some nice features.

I’ll recommend you to start with this article: Top 10 Things to Know about TypeScript.

1 Like