Angular / Material2 - Unexpected token <

Question

So I'm following this tutorial - https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part?fid=1920478&df=90&mpp=50&sort=Position&spc=Relaxed&select=5432277&prof=True&view=Thread

Every has worked great up to this point. I'm trying to add in Material 2.

The verisons I have in my package.json are:

"@angular/common": "4.4.1",
"@angular/compiler": "~4.4.1",
"@angular/core": "~4.4.1",
"@angular/forms": "~4.4.0",
"@angular/http": "~4.4.1",
"@angular/platform-browser": "~4.4.1",
"@angular/platform-browser-dynamic": "~4.4.1",
"@angular/router": "~4.4.1",
"@angular/material": "^2.0.0-beta.6",
"@angular/animations": "^4.3.0",
"@angular/cdk": "^2.0.0-beta.6",

With this I then created the mappings in the systemjs.config.js like so:

        '@angular/material':                    'npm:@angular/material/bundles/material.umd.js',
        '@angular/cdk':                         'npm:@angular/cdk/bundles/cdk.umd.js',
        '@angular/animations':                  'npm:@angular/animations/bundles/animations.umd.js',

After I created the mappings all types were resolved with no problems. I then load up all the material components into one module called material-component.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
    MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule, MdDatepickerModule, MdDialogModule,
    MdGridListModule, MdIconModule, MdInputModule, MdListModule,
    MdMenuModule, MdNativeDateModule, MdProgressBarModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule, MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule
} from '@angular/material';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [],
    exports: [
        MdInputModule,
        MdTabsModule,
        MdIconModule,
        MdListModule,
        MdButtonModule,
        MdToolbarModule,
        MdDialogModule,
        MdMenuModule,
        MdGridListModule,
        MdCardModule,
        MdSnackBarModule,
        MdTooltipModule,
        MdSliderModule,
        MdAutocompleteModule,
        MdDatepickerModule,
        MdSlideToggleModule,
        MdSidenavModule,
        MdCheckboxModule,
        MdNativeDateModule,
        MdProgressBarModule,
        MdProgressSpinnerModule,
        MdSelectModule,
        MdRippleModule
    ]
})
export class MaterialComponentsModule { }

then I finally load that module into my app.module.ts. Everything loads okay as seen here:

However when trying to load up the actual page to display the HTML I get this error:

(index):17 Error: Unexpected token <
Evaluating 
http://localhost:30815/node_modules/@angular/cdk/bundles/cdk.umd.js/a11y
Evaluating http://localhost:30815/app/core/material-components.module.js
Evaluating http://localhost:30815/app/app.module.js
Evaluating http://localhost:30815/app/main.js
Loading app
at eval (<anonymous>)
at evaluate (system.src.js:2822)
at system.src.js:3625
at dynamicExecute (system.src.js:1145)
at doEvaluate (system.src.js:1092)
at ensureEvaluate (system.src.js:1000)
at system.src.js:1018
at doEvaluate (system.src.js:1090)
at ensureEvaluate (system.src.js:1000)
at system.src.js:1018

I cannot for the life of my figure this out. Any help would be greatly appreciated - if there is anything else you need please say!

Answer 1

Make sure that you import all the modules that are required by your application:

@NgModule([
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        // And your other modules
    ]
]
export class AppModule {}