Error Encountered When Trying to Import BrowserAnimationsModule in Angular 5: Unexpected Token "<"

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.

Answer №1

Dealing with the same issue was a breeze once I made adjustments to my systemjs.config.js. When you've specified the npm path, be sure to incorporate these additional lines:

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

Answer №2

If you're struggling with the same issue I faced, here's some help:

The error message appeared to be a 404 error. Since my app was structured to route everything through index.html, it directed missing files to the index page which starts with a "<". To resolve this issue, I made these adjustments in my system.config.js file under the map section:

'@angular/animations': '/node_modules/@angular/animations',
'@angular/animations/browser': '/node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations':'/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the value from a concealed checkbox

I have been searching everywhere, but I can't seem to find a solution to this particular issue. There is a hidden checkbox in my field that serves as an identifier for the type of item added dynamically. Here's how I've set it up: <inpu ...

When an unrelated value is changed, the Vue 2 dynamic component experiences a loss of its values during the refresh

I've been grappling with this issue for quite some time now and I'm beginning to suspect it might be a bug. I'm currently utilizing a dynamic vue component to substitute markers in a body of text with input fields. The functionality seems t ...

Exploring the power of Vue3 with Shadow DOM in web components

I've been experimenting with web components using Vue3 and I'm curious about how the Shadow DOM works. I encountered an issue where a third party library was trying to access elements using getElementById() and it was throwing an error because th ...

javascript varying functionality between Chrome and Firefox

My Grease monkey script/Tamper monkey is designed to click on buttons that contain the word 'attach'. Although it works perfectly, I have noticed a difference in behavior between Chrome and Firefox. In Firefox, the clicks occur in the order of a ...

JavaScript: abbreviated way to selectively append an element to an array

Currently, I am in the process of creating a Mocha test for a server at my workplace. When dealing with customer information, I receive two potential phone numbers, with at least one being defined. var homePhone = result.homePhone; var altPhone = ...

When the submit button is clicked, only the last form within the function will be submitted

I currently have a submit button that is meant for 3 different forms. When submitting, I use the following approach: restaurantCreateForm = function(){ document.getElementById("restaurant-features" ).submit(); document.getElementById("information_ ...

Unable to view form data in .php file

How can I change the style of my "Submit" button when a user clicks on it to submit the form? The action attribute calls a PHP file, but the data doesn't show up until I remove the onSubmit attribute from the form. However, without it, I cannot use t ...

Incorporating HTML code within a .ts file: a basic guide

I'm relatively new to Angular, but I've been given a project that's built with Angular. As I examine the .ts file containing the list of property types, I need to wrap a span around the label text. Is this doable? Here is the current list ...

After making a RESTful call, the ngModel in Angular 2 does not reflect the

I'm experiencing an issue with my user component where it fails to update the form after making a restful call to retrieve user data. Even though the data is being fetched correctly and mapped to the model, the form does not reflect these changes. Th ...

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

Taking out the z-index from the transition code

Is there a way to restructure the code without needing to use z-index for the transition? Without z-index: https://jsfiddle.net/Legcb42d/ .container1 { position: relative; width: 100%; height: 100%; } .container1.slide { height: auto; min-heigh ...

The image being displayed is significantly wider than the corresponding HTML element

I'm attempting to display this webpage in PNG format using npm's wkhtmltox: <!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { padding: 0; width: 340px; } ...

Using Ajax on a WordPress webpage

I am currently experimenting with this piece of Ajax jQuery code within a WordPress page: 1. <script> 2. $(document).ready(function(){ 3. $("button").click(function(){ 4. $.ajax({ 5. method: 'GET', 6. ...

Is there a way to invoke a function within an Angular Service from within the same service itself?

Below is the code snippet I am working with: angular.module('admin') .factory('gridService', ['$resource', 'gridSelectService', 'localStorageService', function ($resource, gridSelectService, ...

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

Utilizing enum values in the HTML value attribute with Angular 2

I'm attempting to utilize an enum value in order to set the selected value of an HTML attribute: export enum MyEnum { FirstValue, SecondValue } export function MyEnumAware(constructor: Function) { constructor.prototype.MyEnum = MyEnum; } ...

The PhpStorm/JavaScript expression statement doesn't involve assignment or function call

I am striving to enhance the cleanliness of my method. Based on the value of an integer number, I am generating different date formats, resulting in the following: getRanges() { var currentDate = new Date(); //This can ...

How can I retrieve all element attributes in TypeScript using Protractor?

I came across this solution for fetching all attributes using protractor: Get all element attributes using protractor However, I am working with TypeScript and Angular 6 and struggling to implement the above method. This is what I have tried so far: im ...

indexing into a nodelist results in an undefined value

In my current code snippet, I am using the following: const modelInputs = document.getElementsByName('jpd-model') console.log(modelInputs) This code returns a NodeList of all the matching elements. However, if I modify the code to this: const m ...

Is it possible to utilize the OnBlur prop based on a certain condition?

To display a component when the input is focused, follow the steps below: Click here for not focused state When you click on the text input, the component should appear like this: Click here for focused state The code snippet provided works correctly. ...