CODEWITHSUNDEEP
angularjs
Erick
Erick

Reputation: 1246

AngularJS 2 quickstart "GET /app/app.main.js" Error (404): "Not found"

I'm trying to work my way through the angular 2 quickstart and I'm running into this error message.

    Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.17.12.201:8080
Hit CTRL-C to stop the server
[Thu Aug 11 2016 16:27:57 GMT+0000 (UTC)] "GET /app/app.main.js" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36"
[Thu Aug 11 2016 16:27:57 GMT+0000 (UTC)] "GET /app/app.main.js" Error (404): "Not found"

The systemjs.config.js is setup exactly as they have it:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

The main.js gets transpiled as app/main.js. So what would be causing the server to try and route to app/app/main.js? I've searched and searched and nothing seems to be out of line and no one else seems to have this issue. Is there somewhere else that the routes are laid out?

UPDATE: Per a request from @Jayesh I'm adding a picture of the file structure. Everything is where is should be. :)

file structure

Upvotes: 1

Views: 2379

Answers (2)

Erick
Erick

Reputation: 1246

Okay, the problem is that the tutorial specifies main.ts, which transpiles to main.js. The server is looking for app.main.js. So once I changed the file to app.main.ts, it worked. I didn't see the error message properly until I read the comment by @Jayesh since it was red on blue and looked like it said app/app/main.js. So, thanks for checking it out. :)

Upvotes: 0

Jayesh
Jayesh

Reputation: 110

I followed the latest tutorial and it works perfectly fine. I presume you have made the file with the wrong name. Instead of creating file main.ts inside app folder ie: app/main.ts you might have created a file called app/app.main.ts which might be resulting in the error you are facing.

If not, then a small snippet of folder structure might help to identify the root cause.

Upvotes: 3

Related Questions