angular2 CLI HTTP not found error

Question

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.

Thierry Templier · Accepted Answer · 2016-05-09 07:46:43Z

2

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);

answered May 9, 2016 at 7:46

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Emu Over a year ago

I've added the packageNames manually on my system-config.ts file. also edited my app and packages variable according to your answer. But now the error is Cannot GET /main

Thierry Templier Over a year ago

main is the module you initially import? If so you need to have this: System.import('app/main'). And the main.ts file located under the app folder...

Emu Over a year ago

Sorry, i didn't get your last comment properly.

Thierry Templier Over a year ago

No worries! With the configuration above, you need to have your TypeScript files under the app folder. See 'app': { main: 'main.js', defaultExtension: 'js' },. Otherwise SystemJS doesn't apply the defaultExtension configuration and try to use /main instead of /app/main.js to load your module... Hope it's clearer ;-)

Emu Over a year ago

Sorry to disturb you again. postimg.org/image/m8rnj1u4h from this image you can see my ts files are under my app folder and my system-config.ts file contents. based on this config the error is: "NetworkError: 404 Not Found - http://localhost:4200/app/main.js"

pd farhad · Accepted Answer · 2016-05-09 17:38:20Z

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'

Basavaraj Hadimani · Accepted Answer · 2019-01-27 14:40:52Z

1

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.

edited Jan 27, 2019 at 14:40

Basavaraj Hadimani

1,10412 silver badges23 bronze badges

answered May 9, 2016 at 7:42

Dinistro

5,7301 gold badge33 silver badges39 bronze badges

2 Comments

Emu Over a year ago

I've changed the package.json file as you told me. but same result. Then I tried to install the version 2.0.0-rc.1 using npm install [email protected], then it gave me No compatible version found: [email protected]

Dinistro Over a year ago

@Emu Take a look at my note. I'm sorry, but I didn't had time to upgrade my own application so far.

Collectives™ on Stack Overflow

angular2 CLI HTTP not found error

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related