I am making a simple HTTP request in my application.
I use Angular 2 Quickstart and upgrade all my angular packages to 4.3.4
This is my package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src /",
"build: watch": "tsc -p src / -w",
"build: e2e": "tsc -p e2e /",
"serve": "lite-server -c = bs-config.json",
"serve: e2e": "lite-server -c = bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \" npm run build: watch \ "\" npm run serve \ "",
"pree2e": "npm run build: e2e",
"e2e": "concurrently \" npm run serve: e2e \ "\" npm run protractor \ "--kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \" npm run build: watch \ "\" karma start karma.conf.js \ "",
"pretest: once": "npm run build",
"test: once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@ angular / common": "4.3.4",
"@ angular / compiler": "4.3.4",
"@ angular / core": "4.3.4",
"@ angular / forms": "4.3.4",
"@ angular / http": "4.3.4",
"@ angular / platform-browser": "4.3.4",
"@ angular / platform-browser-dynamic": "4.3.4",
"@ angular / platform-server": "4.3.4",
"@ angular / router": "4.3.4",
"angular-in-memory-web-api": "~ 0.3.0",
"core-js": "^ 2.4.1",
"rxjs": "^ 5.4.3",
"systemjs": "0.19.40",
"typescript": "2.4.2",
"zone.js": "^ 0.8.16"
},
"devDependencies": {
"concurrently": "^ 3.2.0",
"lite-server": "^ 2.2.2",
"typescript": "~ 2.1.0",
"canonical-path": "0.0.2",
"tslint": "^ 3.15.1",
"lodash": "^ 4.16.4",
"jasmine-core": "~ 2.4.1",
"karma": "^ 1.3.0",
"karma-chrome-launcher": "^ 2.0.0",
"karma-cli": "^ 1.0.1",
"karma-jasmine": "^ 1.0.2",
"karma-jasmine-html-reporter": "^ 0.2.2",
"protractor": "~ 4.0.14",
"rimraf": "^ 2.5.4",
"@ types / node": "^ 6.0.46",
"@ types / jasmine": "2.5.36"
},
"repository": {}
}
Here is my System.config.js
/ **
* System configuration for Angular samples
* Adjust as necessary for your application needs.
* /
(function (global) {
System.config ({
paths: {
// paths serve as alias
'npm:': 'node_modules /'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
, HttpClientModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
HttpClientModule, :
: (SystemJS) XHR (404 ) http://localhost: 3000/node_modules/@angular/common/bundles/common.umd.js/http
, , .