Encountering an issue with Angular 2 that is causing an error: Uncaught SyntaxError due to an unexpected

I'm facing an issue while trying to incorporate Angular 2 into my existing project. Here are the codes I'm using:

<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<script type="text/javascript">
    System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {app: {defaultExtension: 'ts'}} 
      });
      System.import('assets/js/angular2/app/script.js')
            .then(null, console.error.bind(console));
</script>

script.ts

import {bootstrap}    from 'angular2/platform/browser'
import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'


bootstrap(FeedComponent)

feed.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'feeds',
  template: 'assets/partials/wall/Feeds.html'
})

export class FeedComponent {

}

html

<feeds>
            loading...
          </feeds>

However, I'm encountering the following error:

core:1 Uncaught SyntaxError: Unexpected token <U @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost/v010-commonsocialnetwork/@angular/coreU @ system.src.js:4597o.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ feed.component.js:8(anonymous function) @ feed.component.js:22U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
system.src.js:4597 Uncaught Script error.
    Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/feed.component.jsU @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597s @ system.src.js:4597(anonymous function) @ system.src.js:4597(anonymous function) @ script.js:3(anonymous function) @ script.js:6U @ system.src.js:4597c.execute @ system.src.js:4597i @ system.src.js:4597n @ system.src.js:4597execute @ system.src.js:4597y @ system.src.js:4597w @ system.src.js:4597p @ system.src.js:4597h @ system.src.js:4597(anonymous function) @ system.src.js:4597run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2-polyfills.js:138 Script error.
    Evaluating http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js
    Error loading http://localhost/v010-commonsocialnetwork/assets/js/angular2/app/script.js

I would appreciate any guidance on what mistake I might be making and how to resolve this issue.

Thank you in advance :)

javascriptangularjstypescriptangular

Answer №1

What version of Angular 2 are you currently using?

It appears that there may be a mix-up between the beta and release candidate versions of Angular 2.

In the release candidate version:

import { Component } from '@angular/core';

and in the previous version:

import {bootstrap}    from 'angular2/platform/browser'

If you are working with the release candidate, you should:

In the release candidate version, avoid adding your Angular libraries through script tags; instead, configure them as modules within SystemJS.

An example of SystemJS configuration:

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    map: {
        'app': 'app',
        'rxjs': 'libraries/rxjs',
        '@angular': 'libraries/@angular',
    },
    packages: {
        'app': { main: 'main.ts', defaultExtension: 'ts'},
        'rxjs': { main: 'Rx.js' },
        '@angular/core': { main: 'index.js' },
        '@angular/common': { main: 'index.js' },
        '@angular/compiler': { main: 'index.js' },
        '@angular/router': { main: 'index.js' },
        '@angular/platform-browser': { main: 'index.js' },
        '@angular/platform-browser-dynamic': { main: 'index.js' },
        '@angular/http': { main: 'index.js' },
    }
});

Answer №2

Perhaps you could consider replacing the following:

import {FeedComponent} from 'assets/js/angular2/app/feed.component.js'

with:

import {FeedComponent} from 'assets/js/angular2/app/feed.component'

It appears that the issue may be related to specifying the default file extension as "ts" in the system js config. I recommend trying this modification first to see if it resolves the problem.

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

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

Identifying when a page-loading or reloading event has been canceled

When the Cancel button is pressed during page load/reload, the content of the page loads partially. Is there a more effective way to address this issue rather than displaying incomplete content? For instance, consider showing a message such as "Page load ...

javascripthtmljquerybrowser

What steps should be taken to resolve the Error encountered while testing Angular Js in netbeans?

After trying to implement the steps outlined in the link below I keep encountering the following error: Exception in thread "main" java.lang.NoClassDefFoundError: com/google/jstestdriver/hooks/TestListener at java.lang.Class.getDeclaredMethods0(Nativ ...

unit-testingangularjsnetbeans-7.3

Exploring the concept of the 'directive' paradigm within Angularjs

Can directives in AngularJS be compared to user controls in ASP.Net? I've been pondering this and wonder if my understanding is off. In ASP.Net, a user control allows you to package a set of functionalities into a widget that can be easily inserted i ...

angularjsdirective

Validating various Google Sheet tabs in real-time

I am currently working on a script for validating localization tests in Google Sheets and I have run into some challenges with the logic. The main goal of the script is to 1) Go through all tabs, 2) Identify the column in row 2 that contains the text "Pass ...

javascriptgoogle-sheets

Obtain a Spotify Token and showcase information in next.js

This is a Simple Next.js component designed to display the currently playing song on Spotify. Context: Utilizing app Router Due to Spotify's token requirements necessitating a server-side call, the entire request is made to fetch the song from an ...

javascripttypescriptnext.jsspotify

There seems to be a mistake in the syntax: The JSX closing tag for <a> on line 17 is missing

Ever since I started working on React.js last week, I took the initiative to provide closing tags for the anchor <a> tag in the code snippet below. function App() { return ( <div className="App"> <table> ...

javascriptreactjs

Retrieve information from a form in AngularJS without relying on two-way data binding

Utilizing two-way data binding, the code operates effectively. However, there is a stipulation - instead of using =, use <. Upon the initial launch of the application, the text inputs will contain predefined values. The objective is to enable users to ...

javascriptangularjs

Implement validation for dynamically generated input fields in JavaScript and PHP

Looking for help with dynamic text boxes in jQuery. Trying to validate them using PHP or JavaScript to prevent empty values from being stored in the database. Despite several attempts, empty values still get entered into the database when text boxes are le ...

javascriptphpjqueryhtml

Unable to locate additional elements following javascript append utilizing Chrome WebDriver

I have a simple HTML code generated from a C# dotnet core ASP application. I am working on a webdriver test to count the number of input boxes inside the colorList div. Initially, the count is two which is correct, but when I click the button labeled "+", ...

javascriptc#selenium-webdriverselenium-chromedriverxunit.net

Error encountered during React application compilation due to SCSS loading issue

I've encountered an error while trying to develop a React application with Webpack. The issue seems to be related to the main SCSS file: ERROR in ./resources/scss/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/ ...

javascriptreactjswebpacksass

Is it more advisable to implement an async iterator through an async generator function, or would it be more efficient to utilize Symbol.asyncIterator?

The following code operates as intended: function pause(time) { return new Promise(resolve => setTimeout(resolve, time)); } async function fetchAsyncData() { await pause(1000); // simulating database/network delay... return [1, 2, 3, 4, 5] ...

javascriptnode.jsasync-awaititeratorgenerator

The Ruby on Rails framework fails to clear the browser cache once the session has expired

In order to manage login and logout functionalities on my website, I am utilizing the Devise gem. For the client-side, I am incorporating AngularJS cache with DSCacheFactory. An issue has arisen regarding the persistence of cache in either browser or Angu ...

ruby-on-railsangularjsdeviseangular-cache

Finding Child Elements in JavaScript with Specific Attribute

I have an item that was obtained using this expression: const item = document.querySelector("...my selector..."); I am trying to access all child items with specific attributes. The method I currently use to retrieve all children is: const children = Ar ...

javascripthtmldom

Enhancing Javascript performance with the power of the V8 engine and Typescript

I recently came across an informative article discussing V8 engine and javascript optimization. How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code The article highlights some key recommendations: a. V8 engine utilizes hid ...

javascripttypescriptoptimizationv8

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

At the moment, I currently have this input field set up on an HTML page within my Angular 9 application: <input type="text" formControlName="amountToWithholdInput" onkeyup="this.value = this.value.replace(/[^0-9.%$]/, &ap ...

htmlregexangularcurrencypercentage

To make changes to an item, simply tap on the Catalog number

I'm currently facing a challenge in trying to implement a modal window that displays detailed information about a selected item based on the catalog number. The catalog number serves as the trigger to open the modal. Since I'm relatively new to a ...

javascriptjavajqueryajaxbootstrap-modal

Exploring the use of global variables in React

Welcome to my React learning journey! I've encountered an issue while trying to access a global variable exposed by a browser extension that I'm using. Initially, I attempted to check for the availability of the variable in the componentDidMount ...

javascriptreactjstypescript

What could be causing the failure of loading CSS images or JS in my Laravel project?

This is a continuation of my previous question where I managed to get the site up and running. Initially, all files including css, js, and images were loading properly. However, now I am encountering issues as the files are not loading and the console disp ...

javascriptphpcsslaravelimage