Troubles to run Ionic on my local machine

GMTConseil · September 6, 2017, 1:42pm

Hello everyone,

I’m not yet friendly with both Ionic and with the angularJS programming language, I have to migrate a web project into Ionic, this project works with a web service but it’s hosted on my local machine, so, I can’t create an online application.

I found this nice tutorial, but I fail at running the application and at emulating.

I edited the page src\pages\home\home.html and I put this code :

<ion-header>
 <ion-navbar>
   <button ion-button menuToggle>
     <ion-icon name="menu"></ion-icon>
   </button>
   <ion-title>Identification page</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h3>Email address :</h3>
 <input ng-model="connection_email" type="email" />

 <h3>Password :</h3>
 <input ng-model="connection_pwd" type="password" />

 <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

By running the project via the command line ionic serve; the page isn’t updated, I still have the initial content.

By running the command line ionic cordova build android, I have the following error message :
Error: EPERM: operation not permitted, open ‘C:\IonicProjects\ESS\www\build\main.js’

Someone can help?
Thanks.

My info :

@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
Cordova CLI : 7.0.1
@ionic/app-scripts : 2.1.4
Cordova Platforms : none
Ionic Framework : ionic-angular 3.6.0
Node : v6.11.2
npm : 3.10.10
OS : Windows server 2012

Sujan12 · September 6, 2017, 4:57pm

Please post the complete output of the command that outputs the error with an added --verbose parameter.

Your problem is probably with npm, something to do with permissions and files. This happens quite often and is almost impossible to successfully debug (at least here in the forum).

One solution: Uninstall your node, install nvm (or nvm-windows when you are using Windows), install a new node with this, then install ionic and cordova again and try your command again. The problem should be gone.

GMTConseil · September 8, 2017, 10:13am

Hello, for a reason I misunderstand, everything works fine once I ran the command line ionic serve --verbose, I uninsulated nothing and installed nothing.
Many thanks

Sujan12 · September 8, 2017, 10:25am

Even better.

(Although this might only be temporary - these permission problems tend to come and go)

GMTConseil · September 11, 2017, 9:20am

I finally understood my trouble, I simply had to run command prompt as an administrator, that’s all.

My homepage is now like this :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Identification page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-item>
  <ion-label color="primary" stacked>Email address :</ion-label>
  <ion-input id="inputEmail" ng-model="connection_email" type="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label color="primary" stacked>Password :</ion-label>
  <ion-input id="inputPWD" ng-model="connection_pwd" type="password"></ion-input>
  </ion-item>
<br/>  
  <button ion-button full (Click)="DoConnection(document.getElementById('inputEmail').value, document.getElementById('inputPWD').value">Connecton</button>
 	<button ion-button full (Click)="PWDForgotten()">Password forgotten?</button>
</ion-content>

And the code of this page :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  constructor(){}
  
  DoConnection(varEmail, varPWD){
	  alert("Email = "+varEmail+ " PWD = "+varPWD);
  }
  
  PWDForgotten(){
	  
	  alert("ok");
  }
  
}

In the description of the DoConnection function, I simply want to read the 2 input fields value. I won’t make the connection for now as it will be done with a library implemented by a workmate.
With this code, the click on the Connection button doesn’t work, actually, nothing happens, I can’t see why

Sujan12 · September 11, 2017, 11:28am

This points to a deeper problem.

One solution: Uninstall your node, install nvm (or nvm-windows if you are on Windows), install a new node (which includes npm) with this, then install ionic and cordova again and try your command again. The problem should be gone.

GMTConseil · September 11, 2017, 12:29pm

nothing new, I will have to run command prompt as an administrator, here you have the versions of different components :
npm --> 5.3.0
cordova --> 7.0.1
ionic --> 3.9.2

If I run the command line ionic serve without administrator privilege, I get these messages with errors :

[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100
–livereload-port 35729 - Ctrl+C to cancel
[14:22:05] watch started …
[14:22:05] build dev started …
[14:22:05] clean started …
[14:22:05] copy started …
[14:22:05] transpile started …
[14:22:12] transpile finished in 6.39 s
[14:22:12] preprocess started …
[14:22:12] deeplinks started …
[14:22:12] deeplinks finished in 21 ms
[14:22:12] preprocess finished in 28 ms
[14:22:12] webpack started …
{ Error: Failed to clean directory C:\IonicProjects\ESS\www\build - EPERM: operation not permitted, unlink 'C:\IonicProjects\ESS\www\build\main.css’
at new BuildError (C:\IonicProjects\ESS\node_modules@ionic\app-scripts\dist\util\errors.js:16:28)
at C:\IonicProjects\ESS\node_modules@ionic\app-scripts\dist\clean.js:15:32
at Promise ()
at Object.clean (C:\IonicProjects\ESS\node_modules@ionic\app-scripts\dist\clean.js:7:12)
at buildProject (C:\IonicProjects\ESS\node_modules@ionic\app-scripts\dist\build.js:94:13)
at C:\IonicProjects\ESS\node_modules@ionic\app-scripts\dist\build.js:47:16
at hasBeenLogged: false, isFatal: false }
[14:22:12] Failed to copy C:\IonicProjects\ESS\src\index.html to C:\IonicProjects\ESS\www\index.html
{ Error: EPERM: operation not permitted, open 'C:\IonicProjects\ESS\www\index.html’
errno: -4048,
code: ‘EPERM’,
syscall: ‘open’,
path: ‘C:\IonicProjects\ESS\www\index.html’ }
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\ionic-angular\polyfills\polyfills.js to
C:\IonicProjects\ESS\www\build\polyfills.js
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\sw-toolbox\sw-toolbox.js to
C:\IonicProjects\ESS\www\build\sw-toolbox.js
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\ionicons\dist\fonts\ionicons.woff to
C:\IonicProjects\ESS\www\assets\fonts\ionicons.woff
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\ionicons\dist\fonts\ionicons.woff2 to
C:\IonicProjects\ESS\www\assets\fonts\ionicons.woff2
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\ionic-angular\fonts\ionicons.woff to
C:\IonicProjects\ESS\www\assets\fonts\ionicons.woff
[14:22:12] Failed to copy C:\IonicProjects\ESS\node_modules\ionic-angular\fonts\ionicons.woff2 to
C:\IonicProjects\ESS\www\assets\fonts\ionicons.woff2
[14:22:12] Failed to copy C:\IonicProjects\ESS\src\assets\icon\favicon.ico to
C:\IonicProjects\ESS\www\assets\icon\favicon.ico
[14:22:29] dev server running: http://localhost:8101/

[INFO] Development server running
Local: http://localhost:8101
External: http://192.168.153.183:8101

[14:22:29] watch ready in 23.77 s

Sujan12 · September 11, 2017, 12:46pm

Yes, you created a your build with an admin process before, now you have to do that all the time.
Try a new checkout of your project and build there - should probably work.

GMTConseil · September 11, 2017, 2:29pm

you are the best, right now, I don’t need to compile with administrator privilege.

Now, last thing I have to do with this page is to send the 2 input values to my DoConnection function,
I tried this code :

<button type="submit" ion-button full (click)="DoConnection((document.getElementById('inputEmail').value, document.getElementById('inputPWD').value);">Connexion</button>

By clicking the button, I encounter this error message :

co.document is undefined

Sujan12 · September 11, 2017, 3:53pm

Yeah, create a new topic for this question please.