As I try to integrate the BrowserAnimationModule into my Angular 5 project, a rather foolish error keeps popping up.
Error: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval (<anonymous>)
at Object.eval (http://localhost:56700/app/app.module.js:15:20)
at eval (http://localhost:56700/app/app.module.js:71:4)
at eval (http://localhost:56700/app/app.module.js:72:3)
Evaluating http://localhost:56700/node_modules/@angular/platform-browser/animations.js
The project functions smoothly without any issues if I exclude BroswerAnimationsModule from the imports in my NgModule.
It appears that upon loading the module, it searches for a file in an incorrect location leading to a non-existent one. Following the instructions on The official Angular site, it's observed that it fetches from a level below in the @angular/platform-browser/animations/animations. Assuming there might be an issue with my system.config but for the life of me, I just can't seem to figure it out... Any assistance would be greatly appreciated. Thanks!
system.config.js
(function (global) {
var map = {
//Comment out when publishing.
'app': '/app',
'@angular': '/node_modules/@angular',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'rxjs': '/node_modules/rxjs',
'@ng-bootstrap/ng-bootstrap': '/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
//Uncomment when publishing.
//'app' : 'app',
//'@angular': 'node_modules/@angular',
//'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
//'rxjs': 'node_modules/rxjs',
//'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
};
packages = {
'app': { main: './main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
},
ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'forms',
'animations'
];
function packUmd(pkgName) {packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };}
ngPackageNames.forEach(packUmd);
var config = {
map: map,
packages: packages
};
System.config(config);})(this);
app.module.ts
//Main folder where Angular Extras are added.
//Angular Libraries
import { NgModule, enableProdMode } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { NgbModule,NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserModule, platformBrowser } from '@angular/platform-browser';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router'
//Components
import { AppComponent } from './app.component';
import { INHome } from './Components/MainComponents/INHome/INHome';
import { LogoSection } from './Components/MainComponents/LogoSection/LogoSection';
import { NavBar } from './Components/MainComponents/NavBar/NavBar';
import { LeftNav } from './Components/MainComponents/LeftNav/LeftNav';
import { LineStatus } from './Components/MainComponents/LogoSection/LineStatus/LineStatus';
import { Favorites } from './Components/MainComponents/RightNav/Favorites/Favorites';
import { SearchableLinks } from './Components/MainComponents/RightNav/SearchableLinks/SearchableLinks';
import { DailySummary } from './Components/MainComponents/Departments/DailySummary/DailySummary';
import { NewsFeed } from './Components/MainComponents/Departments/DailySummary/NewsFeed/NewsFeed'
import { EditFavorites } from './Components/MainComponents/RightNav/Favorites/EditFavorites/EditFavorites'
import { Documents } from './Components/MainComponents/Departments/Documents/Documents'
import { TestComponent } from './Components/MainComponents/TestComponent/TestComponent';
import {Safety } from './Components/MainComponents/Departments/Safety/Safety'
//Classes
import { Branch, Leaf, UserDetails } from './Classes/FrontendClasses';
//Data Reading Services
import { StaticDRS } from './DataReadingServices/StaticDRS';
import { UserDetailsDRS } from './DataReadingServices/UserDetailsDRS';
//Pipes
import { LinkPipe } from '../app/Pipes/SearchableLinks'
//Utilities
enableProdMode();
//Routing Paths
const appRoutes: Routes = [
{ path: 'Home.aspx', redirectTo: 'INHome/DailySummary', pathMatch: 'full' },
{ path: '', redirectTo:'INHome/DailySummary', pathMatch:'full' },
{
path: 'INHome', component: INHome, children: [
{ path: 'DailySummary', component: DailySummary },
{ path: 'Documents', component: Documents },
{ path: 'Safety',component: Safety},
{ path:'', redirectTo:'DailySummary', pathMatch:'full'}
]
}
//{path:'**',component:TestComponent}
]
@NgModule({
imports: [BrowserModule, HttpModule, NgbModule.forRoot(), FormsModule, RouterModule.forRoot(appRoutes), NgbAccordionModule,BrowserAnimationsModule],
declarations: [AppComponent, TestComponent, INHome, LogoSection, NavBar, LeftNav, LineStatus, Favorites, SearchableLinks, DailySummary, NewsFeed, EditFavorites, LinkPipe, Documents, Safety],
providers: [UserDetailsDRS, StaticDRS,UserDetails],
bootstrap: [AppComponent],
})
export class AppModule { }
If you require additional files, please let me know.