I have implemented a basic router in my application to accommodate a URL structure like www.myhost.com/mission/myguid. I have reviewed the tutorials on the Angular site, but I haven't found any discrepancies. The "normal" routes such as www.myhost.com/home are functioning correctly.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './general/home/home.component';
import {MissionComponent} from './map/mission/mission.component';
// Route configuration to map routes to components
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
},
{
path: 'mission/:guid',
component: MissionComponent
},
{
path: '',
redirectTo: '/home,',
pathMatch: 'full'
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
When using this setup, I encounter the following errors:
Uncaught ReferenceError: System is not defined
and
Uncaught SyntaxError: Unexpected token <
Does anyone have an idea of what I might be doing wrong?
UPDATE: App Module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routes';
import { AppComponent } from './app.component';
import {HomeComponent} from './general/home/home.component';
import {MissionComponent} from './map/mission/mission.component';
@NgModule({
imports: [BrowserModule, AppRoutingModule, FormsModule, HttpModule],
declarations: [AppComponent, HomeComponent,
MissionComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Main component:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
APP Component:
UPDATE 2: systemjs.config.js
index.html: