angular 2 import of component works in VS, but gives 404 in browser

Question

I have a very simple app setup:

Index.html:

<!doctype html>
<html>
<head>
    <title>Angular 2</title>   
    <!-- Libraries -->
    <script src="/lib/js/es6-shim.js"></script>
    <script src="/lib/js/angular2-polyfills.js"></script>
    <script src="/lib/js/system.src.js"></script>
    <script src="/lib/js/rxjs/bundles/Rx.js"></script>
    <script src="/lib/js/angular2.dev.js"></script>  
    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/semantic/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/styles.css">
</head>
<body>
    <!-- Configure System.js, our module loader -->
    <script>
        System.config({

            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }

        });
        System.import('/lib/spa/app.js')
              .then(null, console.error.bind(console));
    </script>
    <!-- Menu Bar -->
    <div class="ui menu">
        <div class="ui container">
            <a href="#" class="header item">
                header
            </a>
            <div class="header item borderless">
                <h1 class="ui header">
                    Angular 2
                </h1>
            </div>
        </div>
    </div>
    <div class="ui main text container">
        <app></app>
    </div>
</body>
</html>

app.ts Here I'm importing post.component and it seems to work well.

import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import { Post } from './components/post.component';

@Component({
    selector: 'app',
    templateUrl: '/app/app.html',
    directives: [Post]
})


class App {

    constructor() {
    }

    ngOnInit() {
        console.log('app');
    }

    addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
        console.log(`adding title: ${title.value} and link: ${link.value}`);
    }
}

bootstrap(App);

post.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: 'post',
    template: '<p>test</p>'
    //templateUrl: '/app/component/post.component.html'
})

export class Post {

    constructor() {

    }

    ngOnInit() {
        console.log('post');
    }

}

All very simple, but for some reason when I run it I get:

angular2-polyfills.js:127 GET http://localhost:5000/lib/spa/components/post.component 404 error

angular2-polyfills.js:349 Error: XHR error (404 Not Found) loading http://localhost:5000/lib/spa/components/post.component(…)

Why do I get this? It seems it looks for the file http://localhost:5000/lib/spa/components/post.component

when it should apply .js to the request and get http://localhost:5000/lib/spa/components/post.component.js'

EDIT:

Solution was:

<script>
    System.config({
        packages: {
            '/lib/spa/': { defaultExtension: 'js' }
        }
    });
    System.import('/lib/spa/app.js')
          .then(null, console.error.bind(console));
</script>

The package loader system.js was not configured correctly..

Looks like http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. Try `HashLocationStrategy`. If it's working then you need to configure your server for HTML5 pushState for the `PathLocationStrategy` (default) to work. — Günter Zöchbauer, May 22 '16 at 11:29

score 1 · Accepted Answer · answered May 22 '16 at 12:09

Your configuration is wrong. You configured a package named app but your package is named lib.

Try:

<script>
    System.config({

        packages: {
            lib: {
                format: 'register',
                defaultExtension: 'js'
            }
        }

    });
    System.import('lib/spa/app')
          .then(null, console.error.bind(console));
</script>

angular 2 import of component works in VS, but gives 404 in browser

1 Answers1