ng serve display error of my angular project

Question

this is my app.component.html file:

   <div class="navbar navbar-default ">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand">Navigation-Angular</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li>
              <a routerLink="help">Help</a>
            </li>
             <li>
              <a routerLink="about">About</a>
            </li> <li>
              <a routerLink="services">Services</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="container">
  <router-outlet></router-outlet>
  </div>

this is services.component.ts file

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})
export class ServicesComponent  {

  constructor(private http:Http) { }

  ngOnInit() {
  }

  uploadFile(event)
  {
    let elem=event.target;
    if(elem.files.length>0)
  {
    console.log(elem.files[0]);
    let formData = new FormData();
    formData.append('file',elem.files[0]);
    this.http.post('http://localhost/php_for_angular/returnIt.php',formData).subscribe((data)=>{

      console.log('return data ',data);

    },(error)=>{
       console.log('error! ',error);
    });

  }
  }
}

This is app.router.ts file

import {ModuleWithProviders} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';

import {AppComponent} from './app.component';
import {AboutComponent} from './about/about.component';
import {ServicesComponent} from './services/services.component';
import {HelpComponent} from './help/help.component';
export const router: Routes=[

{path:'',redirectTo:'about',pathMatch:'full'},
{path:'help',component:HelpComponent},
{path:'about',component:AboutComponent},
{path:'services',component:ServicesComponent}
];

export const routes:ModuleWithProviders=RouterModule.forRoot(router);

This is the error that i am getting during ng serve command:

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,14): ',' expected.   
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,25): ',' expected.   
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,31): ';' expected.   
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,37): ';' expected.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,5): Cannot find name 'post'.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,10): Cannot find name 'arg0'.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,16): Cannot find name 'any'.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,21): Cannot find name 'arg1'.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,27): Cannot find name 'any'.  
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,33): Cannot find name 'any'.   
ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (24,16): Cannot find name 'any'.
webpack: Failed to compile.

** After updating typscript and npm , it still causes error!**

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,16): 'any' only refers to a type, but i s being used as a value here.

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,21): Cannot find name 'arg1'.

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,27): 'any' only refers to a type, but i s being used as a value here.

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (22,33): 'any' only refers to a type, but i s being used as a value here.

ERROR in C:/angular_project/route-project/node_modules/@angular/http/src/http_module.d.ts (24,16): 'any' only refers to a type, but i s being used as a value here.

That is a syntax error coming from third party code. Update all of your dependencies including TypeScript and your TypeScript loader. — Aluan Haddad, Oct 01 '17 at 11:37
`npm install --save-dev typescript` and so on. Look in your package.json file for dependencies. — Aluan Haddad, Oct 01 '17 at 11:57
angular-cli: 1.0.0-beta.28.3 node: 6.10.3 os: win32 x64 @angular/common: 2.4.10 @angular/compiler: 2.4.10 @angular/core: 2.4.10 @angular/forms: 2.4.10 @angular/http: 2.4.10 @angular/platform-browser: 2.4.10 @angular/platform-browser-dynamic: 2.4.10 @angular/router: 3.4.10 @angular/compiler-cli: 2.4.10 — Mr. Aniket, Oct 01 '17 at 12:51
Those versions are rather old. I assume this is a new project so upgrade. — Aluan Haddad, Oct 01 '17 at 12:51
Find out what the latest stable version is and install it. You can update the versions in you `package.json` file and then run `npm install` or simple run `npm install` for each package like you did for typescript. — Aluan Haddad, Oct 01 '17 at 12:57
actually i am following this steps! Is it correct? npm uninstall -g angular-cli npm cache clean npm install -g @angular/cli@latest https://stackoverflow.com/questions/43931986/how-to-upgrade-angular-cli-to-the-latest-version — Mr. Aniket, Oct 01 '17 at 13:01
Why are you asking me if another set of steps is correct? Just update your dependencies. Cleaning the cache won't hurt but I see nothing that indicates that you have a npm caching problem, you dependencies are just very out of date. Make sure you update Webpack as well. — Aluan Haddad, Oct 01 '17 at 13:03

ng serve display error of my angular project

0 Answers0