Twitter Bootstrap Question posted in

Twitter bootstrap – DefaultExtension not working in Angular 2 app

I’m trying to setup a basic Angular 2 app with TypeScript. But I’m stuck because SystemJS doesn’t seem to be doing anything with the defaultExtension: 'js' option.

My index.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/test/">
  <meta charset="UTF-8">
  <title>Test</title>

  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
  <script src="node_modules/angular2/bundles/router.dev.js"></script>

  <script>
    System.config({ packages: { app: { format: 'register', defaultExtension: 'js', } } });
    System.import('backend/app/boot')
        .then(null, console.error.bind(console));
  </script>
</head>
<body>
  <app>Loading</app>
</body>
</html>

But this then gives me the following error:

GET http://localhost:1122/test/backend/app/boot 404 (Not Found)

I can add the .js extension to the path in the System.import command, so that it looks like this:

System.import('backend/app/boot.js')

Then it is able to find boot.js, but then it complains that it can’t find app.component. So basically I have to add a .js extension to that import as well and for every other component that I will have in my application.

I don’t think that’s the solution I have to go for. So how can I fix this System.import problem? It looks like that it is ignoring defaultExtension: 'js' for some reason.

Tags:

3

Answers


  1. 0

    You are setting the js as the default extension for the app package, but your code is in backend/app, not app, either remove the backend folder or fix your package config.

    Login or Signup to reply.
  2. 0

    Just trying out Angular2 and had the same problem. I guess, another option could be using baseURL. E.g.:

    System.config({
        baseURL: 'backend/',
        packages: { 
                app: { 
                    format: 'register', 
                    defaultExtension: 'js', 
                } 
        } 
});

System.import('app/boot')
        .then(null, console.error.bind(console));
    Login or Signup to reply.
  3. 0

    I had the same problem, I could find the following solution.
    Use map to add your extra path to your app folder like this

        System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        map: { 'app': './backend/app' }
    });
    System.import('app/boot');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search