Komponenten laden nicht innerhalb der Vorlage einer anderen Komponente

Question

Ich benutze RC5 und aus irgendeinem Grund, egal was ich tue, kann ich nicht eine meiner Komponenten aus der Vorlage einer anderen Komponente laden. Ich habe alle meine Komponenten in meinem app.module.ts und sie sind alle in meinen Erklärungen von @NgModule. Ich habe mein Element innerhalb von app.html, das in 3 anderen Komponenten geladen wird, die auf der URL gut sind. Aber wenn ich versuche, eine andere Komponente innerhalb der zu haben, die vom Router geladen wird, wenn ich es inspiziere, zeigt nur den HTML, den ich in die Schablone einsetzte, anstatt die andere Komponente zu laden. Ich habe die letzten vielleicht 15 Stunden damit verbracht, das herauszufinden, und ich sehe keinen Grund, warum es nicht funktioniert. Bitte helfen Sie.

Hier ist meine app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { routing, appRoutingProviders } from './app.routing'; 
import {Home} from './home.component'; 
import {Login} from './login.component'; 
import {Rating} from './rating.component'; 
import {Profile} from './profile.component'; 
import {Subordinates} from './subordinates.component'; 
import {RateEmployee} from './rate-employee.component'; 
import {LocalStorageService, LOCAL_STORAGE_SERVICE_CONFIG} from 'angular-2-local-storage'; 

let localStorageServiceConfig = { 
    prefix: 'my-app', 
    storageType: 'sessionStorage' 
}; 

@NgModule({ 
    imports:  [ 
    BrowserModule, 
    routing 
    ], 
    declarations: [ 
    AppComponent, 
    Home, 
    Login, 
    Rating, 
    Profile, 
    Subordinates, 
    RateEmployee 
    ], 
    providers: [ 
    appRoutingProviders, 
    LocalStorageService, 
    { provide: LOCAL_STORAGE_SERVICE_CONFIG, useValue: localStorageServiceConfig } 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Hier mein app.html

<header id="framework-header"> 
    <!--<div id="logo"><span class="icon-star"></span> Ranky</div>--> 
    <div id="logo"><img src="images/logo.svg" alt="Ranky"></div> 
    <!--<div id="mobile-menu-buttton"><a href="#menu"><span class="icon-th-menu"></span></a></div>--> 


    <nav id="framework-nav"> 
    <ul> 
     <li><a routerLink="/profile" routerLinkActive="active">Profile</a></li> 
     <li><a routerLink="/subordinates" routerLinkActive="active">Subordinates</a></li> 
     <li><a routerLink="/login" routerLinkActive="active">Logout</a></li> 
    </ul> 
    </nav> 

</header> 

<section id="main"> 
    <router-outlet></router-outlet> 
</section> 

<footer id="framework-footer"> 
    <small>&copy; Ranky 2016, All Rights Reserved.</small> 
</footer> 

dann profile.html

<h2>My Self Ranking</h2> 

      <rating></rating> 

      <div class="form-row field"> 
      <label for="confirm-password">Provide self evaluation</label> 
      <textarea name="self-comments" id="self-comments"></textarea> 
      </div> 

rating.component.ts

ist

import {Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'rating', 
    templateUrl: 'templates/rating.html', 
}) 

export class Rating {} 

und schließlich rating.html

<div class="label">Click on a star to rank your performance:</div> 

Answer 1

Das Problem erwies sich mit Gulp-uglify in meinem Gulp Prozess mit SystemJS zum Bündeln verwandt zu sein. Anscheinend macht das die Dinge nicht funktioniert und gibt keine Fehler ...