角度セレクタを使用してHtmlコンテンツがレンダリングされない

Question

角度2/4アプリを開発中で、主なindex.cshtmlページでapp.component.htmlをレンダリングする際に問題があります。しかし、私はindex.cshtmlページでハードコードされている単語の読み込みしか見ることができません。テンプレートのURLパスに問題がありますか、何か不足しています。私は、開発者向けツールをチェックしているとエラーに

app.component.ts

import { Component} from '@angular/core' 


@Component({ 

    selector: 'mrdb-app', 
    templateUrl : './app.component.html' 

}) 


export class AppComponent { 

    pageTitle: string = "Movies Review Database"; 

} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { BrowserModule } from '@angular/platform-browser'; 


@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 

} 

app.componentを見ることはできません。 html

<h1>Angular 2 : Getting Started</h1>> 

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

systemjs.cofig.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({   
     paths: { 
      // paths serve as alias 
      'npm:': '/libs/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: '/Scripts', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js', 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

index.cshtml

@{ 
    ViewBag.Title = "Home Page"; 
} 

<mrdb-app>Loading...</mrdb-app> 

Answer 1

は、相対的な使用するためにはmodule.idを追加しようあなたのパス

@Component({ 
moduleId: module.id, 
selector: 'mrdb-app', 
templateUrl: 'app.component.html', 
}) 
export class AppComponent {} 

またはより良いsystemjs-angular-loader.jsを使用して、全くmodueIdせずに相対パスを使用します。ただ、このようなコンポーネント。

Answer 2

私はこの問題を解決しました。問題は、layout.cshtmlページでmain.jsを呼び出すのではなく、直接App.Module.jsを呼び出そうとしていることでした。 main.jsは、app.moduleをブートストラップし、ロードを開始します。