Running "npm start" is causing a "SyntaxError: Unexpected token import" error to appear on a typical Angular 2 project when I try to run it

After attempting npm update, npm start then install, I encountered an error right at the beginning of loading the app.

It's puzzling that it doesn't recognize "import", which is the first word in the standard bootstrapping file.

The stacktrace provided is as follows:

C:\Users\Andreas\Project>npm start

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6c636a78616c7f207c78646e667e796c7f794d3c233d233d">[email protected]</a> start C:\Users\Andreas\Project
> node ./app/main.ts

C:\Users\Andreas\Project\app\main.ts:1
(function (exports, require, module, __filename, __dirname) { import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a3aca5b7aea3b0efb3b7aba1a9b1b6a3b0b682f3ecf2ecf2">[email protected]</a> start: `node ./app/main.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76171811031a17045b07031f151d0502170402364758465846">[email protected]</a> start script 'node ./app/main.ts'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./app/main.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Andreas\Project\npm-debug.log

C:\Users\Andreas\Project>npm start

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8c838a98818c9fc09c98848e869e998c9f99addcc3ddc3dd">[email protected]</a> start C:\Users\Andreas\Project
> node ./app/main.ts

C:\Users\Andreas\Project\app\main.ts:1
(function (exports, require, module, __filename, __dirname) { import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5c535a48515c4f104c48545e564e495c4f497d0c130d130d">[email protected]</a> start: `node ./app/main.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67060900120b06154a16120e040c1413061513275649574957">[email protected]</a> start script 'node ./app/main.ts'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./app/main.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Andreas\Project\npm-debug.log
angulartypescriptnpmsyntax-error

Answer №1

Angular has recently made some changes to its architecture, resulting in a shift towards having many components housed within a "src" directory.

This adjustment caused confusion with npm, prompting me to realign my project structure according to the updated layout of the "quickstart project." While there was some migration work involved, the main task was simply relocating code files to their correct positions.

The process was frustrating, especially considering the less-than-helpful error messages provided. Nonetheless, I must admit that Angular 2 shows promise, and the improved structure is a positive change overall.

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

What causes the error message when attempting to assign an argument of type 'any[]' to a parameter expecting type 'never'?

I encountered the following error in this code: Argument of type 'any[]' is not assignable to parameter of type 'never' var markers: []; this.Getlapoints(this.map.getCenter(), 500000).then(data => { for (var key in data) { ...

javascripttypescriptleaflet

What is the best way to integrate cross-env and nodemon for seamless functionality?

This is a snippet from my package.json file. "scripts": { "build": "react-scripts build", "dev": "cross-env NODE_ENV=development run-p server start", "eject": "react-scripts eject ...

npmpackage.json

Jest identifies active handles when executing synchronous scrypt operations in the crypto module of Node.js

During the execution of a unit test using the scryptSync function from the crypto package, I am encountering error messages and warnings that are unfamiliar to me. For instance, here is an example of a unit test I am running in Jest: it('Should match ...

node.jstypescriptjestjsnestjs

Global.styles.css not applying background-color in Angular

I decided to enhance the appearance of my website by adding some code to the global styles.css file in order to change the background color to light blue. html, body{ background-color: lightblue ; } However, after refreshing the home.component page, I n ...

angular

Arranging a collection of objects in alphabetical order

My current challenge involves sorting an array of objects alphabetically, and to simplify things, I have provided the example below. In my TypeScript code, I utilize splice to add and remove items from the object array. Array cars = [{ id: 1, ...

arraysangulartypescriptsorting

My worker threads seem to be flying under the radar

Currently, I am working on implementing worker threads into my Node.js/Typescript application. I have made significant progress, but it appears that my worker threads are not being executed as expected. Despite adding loggers inside the function intended f ...

node.jstypescriptmultithreading

associating an enum with a specific key value using generics

Imagine having a basic enum enum MyEnum { a, b, c } Converting the enum into key-value pairs is straightforward: type A<V> = { [k in MyEnum]: V }; const testA: A<string> = { [MyEnum.a]: '', [MyEnum.b]: '', [My ...

typescriptenums

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

An error occurred while running the ng serve command: C:\Mysystem\Programs\myfwms>ng serve The serve command needs to be executed within an Angular project, but a project definition could not be found. I encounter this error when ...

javascriptnode.jsangulartypescriptangular8

Error encountered in jquery.d.ts file: Unresolved syntax issue

I am currently in the process of transitioning my jQuery project into a Typescript project. I encountered an issue when attempting to include the jQuery typings from the DefinitelyTyped Github by using the following method: ///<reference path="../../ty ...

javascriptjquerytypescriptwebstormtypescript-typings

Manipulating a DOM element in Angular 2 to alter its class attribute

I am a beginner in angular2. Here is my code: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'main', template: ` <div class="current"> </div> ` }) export class MainComponent impl ...

javascriptangulardom

Error: Failed to execute close function in inappbrowser for Ionic application

Working on integrating the "in-app-browser" plugin with my Ionic project. Check out the code snippet below: const browser = this.iab.create(mylink, '_blank'); browser.on('loadstop').subscribe( data => { if ...

angulartypescriptcordovaionic-frameworkcordova-plugins

I encountered a fatal error while trying to run `npm install orientjs`. It seems to be looking

I would like to utilize orientjs in the following environment: Windows 10 Pro 64bit Node v6.9.2 Node-gyp v3.4.0 Orientjs 2.2.4 1) Install "windows-build-tools" $ npm install --global --production windows-build-tools ...Alright... 2) Install "orientjs ...

node.jsnpmorientdborientjs

Ways to display Div contents based on selected options in an Angular 2/4 list

"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items. Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, ...

javascriptjqueryhtmlcssangular

Troubleshooting: Ionic Cordova's Post Functionality Fails to

I am a newcomer to Hybrid application development, currently utilizing Ionic Cordova for my project. My aim is to implement a POST method within the application. var url = "http://XXXXXXXXXXXXX.com/XXXX"; var headers = new Headers(); headers.append("Acce ...

angularcordovatypescriptionic2visual-studio-code

Bringing in information from a TypeScript document

I'm having trouble importing an object from one TypeScript file to another. Here is the code I am working with: import mongoose from "mongoose"; import Note from './models/notes'; import User from './models/users'; import ...

node.jstypescriptimportimporterrornodejs-server

Implementing Angular 8 with Apache: Configuring htaccess for main domain and subdomain applications

I have encountered a perplexing issue with my 2 Angular applications. Both apps function flawlessly when placed in the root directory of a domain on an Apache webserver (hoster). However, I am now facing a challenge as I attempt to relocate them to: App1 ...

angularapache.htaccesssubdomain

Encountered an issue during the expo init process when trying to download and extract files, resulting

I recently installed expo-cli on my Ubuntu system using the command npm install --global expo-cli. Although it was successfully installed, I encountered some warnings during the installation process. npm WARN deprecated Warning message 1 npm WARN deprecate ...

node.jsreact-nativeubuntunpmexpo

❴eslint_d❵ [eslint] Oops! It looks like there was an issue loading the 'import' plugin declared in your .eslintrc.js file

Recently, while using neovim for TypeScript development, I decided to upgrade eslint to version 8.28.0. However, upon opening neovim, I encountered an error. Despite several attempts to troubleshoot the issue, I have been unsuccessful in resolving it on my ...

typescripteslintneovimeslintrc

Despite using Enzyme to locate a component again, the expected prop value is still not being returned

Two components are involved here - a modal and a button that is meant to open the modal by setting its isOpen prop to true. The initial state of the modal is set to false, but when the button is clicked, it should change to true. While everything works fi ...

reactjstypescripttestingjestjsenzyme

Combine individual websites that have been deployed separately into a single website and display them using a uniform base URL

I have multiple website projects deployed on separate subdomains with their specific resources. I want to create a launch/landing subdomain website that allows users to access each website in different subdomains through the menu, without changing the subd ...

angularazureasp.net-coreroutesazure-active-directory