Encountered the same issue too.

The problem in my situation was due to incorrectly naming the tsconfig.json file. Once I corrected it to be tsconfig.json, re-ran npm install, followed by running npm start, everything started functioning properly again.

If you're looking to make some changes to the map in the configuration file, consider this example:

System.config({
    transpiler: 'babel',
    babelOptions: { presets: ['@babel/preset-env'] },
    packages: {'components': {defaultExtension: 'js'}},
    map: { 'components': './src/components' }
  });

In this setup, '/src/components' is where all the JavaScript components are located.

Is the reference to app/main in your index.html pointing to a main.ts file located in the app folder or in the root directory?

Ensure that the file named tsconfig.js is renamed to tsconfig.json for compatibility.

It seems like the issue stemmed from the system.config section, particularly with the map value being set to './angular2/src/app'. This was incorrect and caused problems. The solution that worked for me involved updating the code as follows:

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}},
    map: { 'app': './app' }
  });
  System.import('app/hello_world_main')
        .then(null, console.error.bind(console));
</script>

By setting the map value to { 'app': './app' }, it ensures that the components are properly located under the app folder of the application.

Make sure to check if you have typings and lite-server globally installed on your command line interface. To do so, type typings. If both are not installed, use the command

npm install -g typings lite-server

Furthermore, include the following code snippet at the beginning of the main.ts file located in the app directory:

/// <reference path="../typings/browser.d.ts" />

Lastly, execute the command npm install && npm run

When running the command

npm start

The main.ts file is transpiled to a .js file and the word "app" is prepended to each file name. However, in the systemjs.configs.js, it references main.js instead of app.main.js.

In my situation, I made the following adjustment:

'app': { main: 'app.main.js', defaultExtension: 'js' },

(as suggested on the official Angular page / angular-2-quickstart)

This change successfully resolved the issue for me. Feedback is welcome on whether this is the best solution.

To update your systemjs.config.js, adjust the app mapping to accurately reflect the path of your files by modifying the line:

'app': 'app', // 'dist',

Update it to:

'app': 'enter your path here', or leave blank for a relative path.

Here are a few suggestions for you to consider:
1. Ensure that you have a file named main.ts in your project. If not, create one.
2. It's possible that your starting project isn't compiling TypeScript files. Try running the command:
npm run tsc
This will generate a main.js file in the TypeScript output folder, usually located in the same directory as the .ts file.
3. Finally, make sure that your start command includes the regular tsc command. It's recommended to start your project (in package.json) with:

npm run tsc && concurrently \"npm run tsc:w\" ...

Update the tsconfig.json file to:

{

  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }

}

After updating the file, proceed to run npm install and then npm start to ensure everything is functioning correctly.

After realizing that the file mentioned as tscoding.json was a mistake, I found that updating both my npm and node to the latest versions resolved the issue.

Everything worked smoothly once I had npm version 3.10.3 and node version v6.5.0 installed.

You might want to consider updating your node and npm versions for better compatibility.

Make sure Node.js and npm are installed on your machine if they aren't already. Our examples work best with node v5.x.x or newer and npm 3.x.x or higher. To check your current versions, simply run node -v and npm -v in a terminal window.

This information can be found in the prerequisites section of the quick start guide.

Include the following code snippet:

// IMPORTANT: THIS IS A DEMO AND SHOULD NOT BE USED IN PRODUCTION
  transpiler: 'ts',
  typescriptOptions: {
    tsconfig: true
  },
  meta: {
    'typescript': {
      "exports": "ts"
    }
  },

in the systemjs.config.js file in order to compile the main.ts.

If you have included the following line in your tsconfig.json:

"outDir":"yourOutDir" 

You will also need to update the mapping location in system.config.js:

// Our application is located within the app folder
app: 'yourOutDir/app',

It may appear unconventional, but by including the

    <base href='/'>

tag at the beginning of the index.html file before loading any additional JavaScript resolved the problem.

It is evident that

modify the systemjs.config.js document

Change it from

'app': 'app',

To

'app': './app',

subsequent to this change

(function (global) {
  System.config({
    paths: {
      // paths act as shortcuts
      'npm:': 'node_modules/'
    },
    // map defines where the System loader should search for items
    map: {
      // our application is located within the app directory

...

I encountered this issue on a Windows operating system.

For example, consider a project folder named "tmp".

Modifying tsconfig.json as shown below:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir":"tmp"
  }
}

Update systemjs.config.js to include the following configurations:

  // our app is within the app folder
  app: 'app', 


// packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: 'main.js',
        defaultExtension: 'js'
      },  

Upon implementation, the solution functions correctly.

Solution found by eliminating the line "outDir": "js" in the tsconfig.js file. As a result, all compiled .js files for the application are now saved within the app directory instead of the js directory.

For better performance, consider manually compiling the typescript files by running tsc -p src. After that, launch the development server.