Winkel 2 Import von Komponente arbeitet in VS, sondern gibt 404 in Browser

Ich habe eine sehr einfache Anwendung Setup:Winkel 2 Import von Komponente arbeitet in VS, sondern gibt 404 in Browser

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 importiere post.component und es scheint gut zu funktionieren.

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'); 
    } 

}

Alles ganz einfach, aber aus irgendeinem Grund, wenn ich es laufen erhalte ich:

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

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

Warum bekomme ich das? Es scheint es für die Datei http://localhost:5000/lib/spa/components/post.component

aussieht, wenn es Js auf die Anforderung gelten sollte und http://localhost:5000/lib/spa/components/post.component.js '

EDIT erhalten:

Lösung war:

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

Das Paket loader-System .js wurde nicht richtig konfiguriert.

Quelle

2016-05-22 ganjan

Sieht aus wie http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. Versuchen Sie 'HashLocationStrategy'. Wenn es funktioniert, müssen Sie Ihren Server für HTML5 pushState konfigurieren, damit 'PathLocationStrategy' (Standard) funktioniert. –

Ihre Konfiguration ist falsch. Sie haben ein Paket mit dem Namen app konfiguriert, aber Ihr Paket heißt lib.

Versuchen:

<script> 
    System.config({ 

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

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

Quelle

2016-05-22 12:09:13 Abdulrahman

Winkel 2 Import von Komponente arbeitet in VS, sondern gibt 404 in Browser

Antwort

Verwandte Themen