ganjan ganjan - 6 months ago 61
AngularJS Question

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

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..

Answer

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>