Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

Tags:

angular

I have a brand new installation of Angular (rc1). I think I have just created the usual 'Hello something' app but, when I launch the app from browser, I get the following error on the browser console

Console log

Can anybody explain me what I have done wrong? I must have something wrong since other much more complex things work perfectly with rc1 on my machine.

Thanks in advance

app.component.ts

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

    @Component({
      selector: 'm2t-app',
      template: `
            Hello something
            `,
      directives: []
    })
    export class AppComponent { 
    }

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

index.html

<html>
  <head>
    <title>MEAN2 Training Class</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <m2t-app>Loading...</m2t-app>
  </body>
</html>

systemjs.confing.js

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // 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': { defaultExtension: 'js' },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);
like image 878
Picci Avatar asked May 12 '16 06:05

Picci


3 Answers

I found the reason. At the beginning of app.component.ts I had commented an earlier version of the silly AppComponent, something like

/*

import { AnotherComponent } from './anotherComponent.component'
// some other code

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

@Component({
  selector: 'm2t-app',
  template: `
        Hello something
        `,
  directives: []
})
export class AppComponent { 
}

Removing the comment at the beginning of the file has solved the problem.

like image 174
Picci Avatar answered Oct 13 '22 18:10

Picci


I found that this error appears in multiline comments with import/export statements. We'll fix the error if we transform the statement to some incorrect form or put the statement in a singleline comment.

Example:

/**
import { Component } from '@angular/core'; // generate error
export class TestClass { }; // generate error

// import { Component } from '@angular/core'; // correct
// export class TestClass { }; // correct

impot { Component } from '@angular/core'; // correct
export clas TestClass { }; // correct
*/
like image 22
DeadWoroz Avatar answered Oct 13 '22 17:10

DeadWoroz


For other people who get this error and dont have comments in their code. I encountered this error and solved this by double checking my systemjs.config.js file.

While you may not have this exact problem in your systemjs.config.js file, it does demonstrate that the /traceur 404(Not Found) error may be coming from your systemjs.config.js file.

I had

  var packages = {
'app_spa': { main: 'app.component.ts', defaultExtension: 'ts' },

and I changed it to

  var packages = {
'app_spa': { main: 'app.component.js', defaultExtension: 'js' },

and the error went away.

like image 6
Greg Netland Avatar answered Oct 13 '22 18:10

Greg Netland