CODEWITHSUNDEEP
angularangular-httpangular-cli
Emu
Emu

Reputation: 5905

angular2 CLI HTTP not found error

I've created a new angular2 application using the angular-cli. Now I was trying to get the data from an API using HTTP. The code I've written:

movies.service.ts

import { Injectable } from '@angular/core';
import { Movie } from './movie';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

My atom editor gives error on @angular/http line. So, I've manually installed angular2 using npm install angular2 on my project folder and then modify that error generated line like this:

import { Http, Response } from 'angular2/http';

BUt now my console is showing:

"NetworkError: 404 Not Found - http://localhost:4200/angular2/http/index.js"

I've added in my index.html page the following script:

<script src="https://code.angularjs.org/2.0.0-beta.17/http.dev.js"></script>

and in my package.json files dependencies "angular2": "2.0.0-beta.17",. still the same error.

Anyone have any clue? I'm a newbie in angular2. So, any help or suggestion is highly appreciated.

Upvotes: 3

Views: 2460

Answers (3)

Dinistro
Dinistro

Reputation: 5730

You need to use the RC version of angular2 and not the beta.17.As far as I know, The import from @angular is introduced in the RC version.

In this version, they splited the angular2 in multiple packages. This means that, you need to add multiple packages in your package.json.

"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "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",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1"

NOTE

I have not tested it, but it's working fine to me.

Upvotes: 1

pd farhad
pd farhad

Reputation: 6432

I guess you are not using beta version of angular2 So open package.json and add this line under the dependencies

"@angular/http": "2.0.0-rc.1",

Then open the terminal and type 

npm install

It will update your system-config.ts with 

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

where it was 

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

So now you can use 

'@angular/http'

instead of 

 'angular2/http'

Upvotes: 2

Thierry Templier
Thierry Templier

Reputation: 202216

I think that you mixed beta version and rc version.

In beta versions, there are some bundled JS files that preregisters modules by name. Something like that:

<script src="node_modules/angular2/bundles/angular2.min.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>

In this case, there is no need for custom configuration for Angular2 modules in SystemJS:

<script>
  System.config({
    packages: {      
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
</script>

With rc version, Angular2 don't provide this (yet) and you need to configure explicitly SystemJS for Angular2 modules:

var map = {
  'app':                        'app', // 'dist',
  'rxjs':                       'node_modules/rxjs',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  '@angular':                   'node_modules/@angular'
};

var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
  map: map,
  packages: packages
}

if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

Upvotes: 2

Related Questions