Angular 5 HttpClientModule console error when imported - asp.net-mvc

Question

I've begun a project using Angular5 inside a ASP.NET MVC project. I've been following the official tutorial on the Angular site, just to get my feet wet, and it's been great until now.
I've gotten to the end of the tutorial, using the Http module, but I can't get the module imported. When I add the HttpClientModule into the the imports list I get this console error:
Error: Unexpected token <
Evaluating http://localhost:54129/node_modules/#angular/common/bundles/common.umd.js/http
Evaluating http://localhost:54129/app/app.module.js
Evaluating http://localhost:54129/app/main.js
Loading app/main.js
at eval ()
at evaluate (evaluate.js:106)
at instantiate.js:394
at dynamicExecute (register-loader.js:665)
at doEvaluate (register-loader.js:612)
at ensureEvaluate (register-loader.js:520)
at register-loader.js:538
at Object.eval (:54129/app/app.module.js:12)
at eval (:54129/app/app.module.js:34)
at eval (:54129/app/app.module.js:35)
(anonymous) # localhost/:20
With some searching I found that I maybe needed to include:
'#angular/common/http': 'npm:#angular/common/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js'
into my systemjs.config.js file, which I have done, but it hasn't resolved the error.
Here's my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountInfoComponent } from './AccountInfo/AccountInfoComponent';
import { VehicleComponent } from './Vehicle/VehicleComponent';
import { UserService } from './Services/UserService';
import { CustomerService } from './Services/CustomerService';
#NgModule({
imports: [BrowserModule, FormsModule, AppRoutingModule, HttpClientModule],
declarations: [AppComponent, AccountInfoComponent, VehicleComponent],
bootstrap: [AppComponent],
providers: [UserService, CustomerService]
})
export class AppModule { }
And my systemjs.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/common/http': 'npm:#angular/common/bundles/common-http.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
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// 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);
Any idea what I'm missing or what I'm doing wrong?

Answer 1

This error could be caused how it's being built (with, I assume, the angular CLI(. What flags are you using on ng build? Check out the file names in the angular CLI destination directory. In the dev build, the files are called "inline.bundle.js"; in the production build, cache busting is implemented, so they have funky names like "inline.d78byc79tcnuasdf.bundle.js".
Something like this should work:
ng build --prod --ec=false --oh=media
This keeps the scripts and styles in the same format as in development.
The diferent flags for prod and dev builds are discussed in the docs here: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds