Angular2 and express - traceur 404 (Not Found) from system.src.js

Question

In my express, I have the following config to serve static js files.

app.use('/scripts', express.static(__dirname + '/node_modules'));

and the link I am at is http://localhost:3000/user/

user.ejs

<!DOCTYPE html>
<html lang="en" ng-app="acApp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Responsive Onepage HTML Template | Multi</title>
    <!-- core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/userpage.css" rel="stylesheet">
    <link href="/css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/images/ico/apple-touch-icon-57-precomposed.png">
    <!-- Angular 2 starts -->
        <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="/scripts/es6-shim/es6-shim.min.js"></script>
    <script src="/scripts/systemjs/dist/system-polyfills.js"></script>
    <script src="/scripts/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="/scripts/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/scripts/systemjs/dist/system.src.js"></script>
    <script src="/scripts/rxjs/bundles/Rx.js"></script>
    <script src="/scripts/angular2/bundles/angular2.dev.js"></script> 
    <!-- 2. Configure SystemJS -->
    <script>
      console.log('reach system.config');
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('../js/acApp/main.ts')
            .then(null, console.error.bind(console));
    </script>
</head>

<body ng-app="acApp">

    <div class="container-fluid">
    <mainRouter></mainRouter>
    </div>
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/mousescroll.js"></script>
    <script src="/js/smoothscroll.js"></script>
</body>

</html>

it throws error

system.src.js:1085 GET http://localhost:3000/user/traceur 404 (Not Found)

In chrome developer tool, the GET is fired by system.src.js as an ajax call,

  xhr.open("GET", url, true);

  if (xhr.setRequestHeader) {
    xhr.setRequestHeader('Accept', 'application/x-es-module, */*');
    // can set "authorization: true" to enable withCredentials only
    if (authorization) {
      if (typeof authorization == 'string')
        xhr.setRequestHeader('Authorization', authorization);
      xhr.withCredentials = true;
    }
  }

  if (doTimeout) {
    setTimeout(function() {
      xhr.send();
    }, 0);
  } else {
    xhr.send(null);
  }

When I am doing the debugging, the first time it is to get

http://localhost:3000/js/acApp/main.ts

which is the correct path. Any idea why for traceur, it is 404?

UPDATE

Folder structure:

-node_modules
-public
--js
---acApp
----main.ts
----app.component.js
-views
--user.ejs
-routes
--user.js
-server.js

Inside of server.js

app.use(express.static(path.join(__dirname, 'public')));
app.use('/scripts', express.static(__dirname + '/node_modules'));

Thierry Templier · Accepted Answer · 2016-03-23 08:11:18Z

2

In fact, your SystemJS configuration doesn't seem to be correct. You configured a app root folder for your module files. This means that the specified configuration only applies when module names start with app.

In your case, it seems that such files are located under the js folder. So I would update this configuration this way:

System.config({
  map: {
    acApp: '../js/acApp'
  },
  packages: {        
    acApp: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('acApp/main')
   .then(null, console.error.bind(console));

If your user folder is located under the acApp, this should work. Otherwise you need to configure another entry for this folder into the packages block...

answered Mar 23, 2016 at 8:11

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Hammer Over a year ago

Thanks Thierry. I have updated with my folder structure. Now the 404 errors happen for system.src.js:1085 GET localhost:3000/node_modules/angular2/platform/browser 404 (Not Found) and system.src.js:1085 GET localhost:3000/user/angular2/router 404 (Not Found)

Thierry Templier Over a year ago

For angular2/router, you need to include the router.dev.js file in addition to the angular2.dev.js one.

Thierry Templier Over a year ago

For angular2/platform/browser including the angular2.dev.js should be enough? Do you have a 404 when loading it?

Thierry Templier Over a year ago

Great! Could you provide the content of main.ts and the new content of the user.ejs file?

Hammer Over a year ago

After changing back to import {bootstrap} from 'angular2/platform/browser' in main.ts, it is working now. Thanks Thierry.

|

Collectives™ on Stack Overflow

Angular2 and express - traceur 404 (Not Found) from system.src.js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related