Ionic 2: 'ioni-compiler' plugin typescript errors


#1

i just run my app with “ionic serve” command and i get this error

ionic-hello-world@ watch C:\Users\adirz\myapps\eventapp
ionic-app-scripts watch
[14:39:48] ionic-app-scripts 0.0.30
[14:39:48] watch started …
[14:39:48] build dev started …
[14:39:48] clean started …
[14:39:48] clean finished in 10 ms
[14:39:48] copy started …
[14:39:48] bundle dev started …
I’m the Hulk
[14:39:49] lint started …
[14:39:49] copy finished in 253 ms
[14:39:49] lint finished in 590 ms
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(26,11): error TS1005: ‘;’ expected.

[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(26,18): error TS1144: ‘{’ or ‘;’ expected.
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(26,38): error TS1138: Parameter declaration expected.
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(34,4): error TS1005: ‘;’ expected.
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(35,23): error TS1005: ‘,’ expected.
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(35,35): error TS1005: ‘;’ expected.
[14:39:52] C:/Users/adirz/myapps/eventapp/src/app/app.component.ts(43,1): error TS1128: Declaration or statement expected.

[14:39:52] bundle dev failed: Error transforming C:/Users/adirz/myapps/eventapp/src/app/app.component.ts with ‘ion-compiler’ plugin: There were TypeScript errors transpiling

[14:39:52] Error: Error transforming C:/Users/adirz/myapps/eventapp/src/app/app.component.ts with ‘ion-compiler’ plugin: There were TypeScript errors transpiling
at Object.transpile (C:\Users\adirz\myapps\eventapp\node_modules@ionic\app-scripts\dist\transpile.js:39:15)
at Object.transform (C:\Users\adirz\myapps\eventapp\node_modules@ionic\app-scripts\dist\plugins\ion-compiler.js:26:36)
at C:\Users\adirz\myapps\eventapp\node_modules\rollup\dist\rollup.js:8270:35

Running live reload server: http://localhost:35729
Watching: www//*, !www/lib//, !www/**/.map
√ Running dev server: http://localhost:8100
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 $

this is my app.module.ts- i don’t see any something missing like the cmd shows the errors

import { NgModule } from ‘@angular/core’;
import { IonicApp, IonicModule } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;

// Import pages
import { HomePage } from ‘…/pages/home/home’;
import { LoginPage } from ‘…/pages/login/login’;
import { ResetPasswordPage } from ‘…/pages/reset-password/reset-password’;
import { SignupPage } from ‘…/pages/signup/signup’;

// Import providers
import { AuthData } from ‘…/providers/auth-data’;

@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
ResetPasswordPage,
SignupPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
ResetPasswordPage,
SignupPage
],
providers: [
AuthData,
]
})
export class AppModule {}


#2

I am also getting an error regarding the ion-complier. The error I get when running the ionic serve cmd:

bundle dev failed: Error transforming //src/app/app.component.ts with ‘ion-compiler’ plugin: rollup-plugin-typescript: Cannot read property ‘0’ of null; when processing: '//src/app/app.component.ts’


#3

@Hellinga i solved this issue, just check your app.component.ts
i did a mistake in my constructor. maybe share yours and i can help u


#4

This is my app.component.ts code:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

//pages
import {TabsPage} from '../pages/tabs/tabs';
import {WelcomePage} from '../pages/welcome/welcome';
//provider
import {Appuser} from '../providers/appuser/appuser';

@Component({
  templateUrl: 'app.html',
})
export class MyApp {

  public rootPage: any = TabsPage;
  public welcomePage: any = WelcomePage;

  constructor(
    platform: Platform,
    public user: Appuser
  ){

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}
}

Here is my app.module.ts code:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
//pages
import { MyApp } from './app.component';
import {ClientPage} from '../pages/client/client';
import {DashboardPage} from '../pages/dashboard/dashboard';
import {EditexercisesPage} from '../pages/editexercises/editexercises';
import {NewClientPage} from '../pages/newclient/newclient';
import {SettingsPage} from '../pages/settings-page/settings-page';
import {TabsPage} from '../pages/tabs/tabs';
import {WelcomePage} from '../pages/welcome/welcome';
//providers
import {Appuser} from '../providers/appuser/appuser';
import {ClientProvider} from '../providers/clientprovider/clientprovider';
import {CurrentClient} from '../providers/currentclient/currentclient';
import {Exerciseprovider} from '../providers/exerciseprovider/exerciseprovider';
import {ImageProvider} from '../providers/image/image';
import {Config} from '../providers/config';
//components
import {ExerciseDataModel} from '../components/ExerciseDataModel';
//pipes
// import {SearchClientFilter} from '../pipes/searchClientFilter';
// import {SearchExerciseFilter} from '../pipes/searchExerciseFilter';

@NgModule({
  declarations: [
    MyApp,
    ClientPage,
    DashboardPage,
    EditexercisesPage,
    NewClientPage,
    SettingsPage,
    TabsPage,
    WelcomePage,
    ExerciseDataModel
    // SearchClientFilter,
    // SearchExerciseFilter
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ClientPage,
    DashboardPage,
    EditexercisesPage,
    NewClientPage,
    SettingsPage,
    TabsPage,
    WelcomePage
  ],
  providers: [
    Exerciseprovider,
    ClientProvider,
    CurrentClient,
    Appuser,
    Config,
    ImageProvider
  ]
})
export class AppModule {}

Let me know if you see the error :slight_smile:


#5

@adirzoari:: here the full error message:

bundle dev failed: Error transforming //src/app/app.component.ts with ‘ion-compiler’ plugin: rollup-plugin-typescript: Cannot read property ‘0’ of null; when processing: '//src/app/app.component.ts’

[16:33:25]  Error: Error transforming /**/src/app/app.component.ts with 'ion-compiler' plugin: rollup-plugin-typescript: Cannot read property '0' of null; when processing: '/**/src/app/app.component.ts'
    at getErasedCode (/**/node_modules/@ionic/app-scripts/dist/util/typescript-helpers.js:68:15)
    at Object.fixExportClass (/**/node_modules/@ionic/app-scripts/dist/util/typescript-helpers.js:43:21)
    at Object.transpile (**p/node_modules/@ionic/app-scripts/dist/transpile.js:17:63)
    at Object.transform (**/node_modules/@ionic/app-scripts/dist/plugins/ion-compiler.js:26:36)
    at **/node_modules/rollup/dist/rollup.js:8270:35

#6

Did you find a solution for this problem? I am having the same issue.


#7

Hey, I received the same error while doing the syntax error!

I noticed you closed two times in app.component.ts. So check you closing brases at the end of the file


#8

There were more than one problem with my project :grin: The one probably causing this issue was that I noticed that my html pages used variables like client.firstname but they were not correctly (?) defined in the .ts file (client: any[] = []). By adding *ngIf=client in my html file I overcome this problem.

Hope this helps