Undefined import error Angular 2 with JsonpModule

Question

I have the following code in my app.module.ts file

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {JsonpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {WeatherComponent} from './weather-
 widget/component/weather.component';

@NgModule({
    imports: [BrowserModule, JsonpModule],
    declarations: [AppComponent, WeatherComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

When I add the import {JsonpModule} from '@angular/http';

I get the following error (without that import everything is fine):

(index):25 Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule' Error: Unexpected value 'undefined' imported by the module 'AppModule' at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14331:33) at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14311:46) at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49) at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17001:39) at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16992:23) at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6684:29) at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6666:25) at Object.eval (http://localhost:3000/app/main.js:5:10) at eval (http://localhost:3000/app/main.js:7:4) Evaluating http://localhost:3000/app/main.js Error loading http://localhost:3000/app/main.js at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14331:33) at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14311:46) at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49) at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17001:39) at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16992:23) at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6684:29) at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6666:25) at Object.eval (http://localhost:3000/app/main.js:5:10) at eval (http://localhost:3000/app/main.js:7:4) Evaluating http://localhost:3000/app/main.js Error loading http://localhost:3000/app/main.js

I have read multiple solutions on possible problems, however without any success. Any suggestions would be appreciated.

Chris Herbst Chris Herbst · Accepted Answer · 2017-08-01T13:57:44

I have found the reason. I had a mistake in the systemjs.config.js file. The @angular/http mapping had an error in the url.

Undefined import error Angular 2 with JsonpModule

1 Answers