Laden von angular2 templateUrl in mvc 5

Question

Ich habe ein Problem beim Laden von Vorlagen in angular2-Anwendung.

system.config.js:

(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', 
      '@angular/material': 'npm:@angular/material/bundles/material.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
     }, 
     // 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' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

boot.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AccountsAppComponent } from './Accounts/app'; 
import { LoginComponent } from './Accounts/Login/Login.component'; 
import { RegisterComponent } from './Accounts/Register/Register.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ 
     AccountsAppComponent, 
     LoginComponent, 
     RegisterComponent 
     ], 
    bootstrap: [AccountsAppComponent] 
}) 
export class AppModule { } 

app.ts:

import { Component } from '@angular/core'; 
import { LoginComponent } from './Login/Login.component'; 
import { RegisterComponent } from './Register/Register.component'; 

@Component({ 
    selector: 'my-app', 
    template: `<login-form></login-form> <register-form></register-form>` 
}) 
export class AccountsAppComponent { 
    title = 'ASP.NET MVC 5 with Angular 2'; 
    skills = ['MVC 5', 'Angular 2', 'TypeScript', 'Visual Studio 2015']; 
    myskills = this.skills[1]; 
} 

Register.component.ts:

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

@Component({ 
    selector: 'register-form', 
    templateUrl: './Accounts/Register/Register.component.html' 
}) 
export class RegisterComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { } 
} 

Ich habe verschiedene Wege ausprobiert, wie:

'./Accounts/Register/Register.component.html' 
'./Register/Register.component.html' 
'./Register.component.html' 

Wenn ich template: Tag bin mit kann ich erfolgreich meinen HTML-Code laden, aber wenn ich templateUrl: bin mit es funktioniert nicht. Zuerst dachte ich, dass etwas mit dem Pfad nicht stimmt, aber als ich verschiedene Wege ausprobierte, erkannte ich, dass das etwas anderes ist. Und ich frage mich, was diese Probleme verursachen kann.

Answer 1

Der relative Pfad Ihres templateUrl ist falsch. Die ./ ist relativ zum aktuellen Ordner, so dass es nach <root>/Accounts/Register/Accounts/Register/Register.component.html sucht.

Ändern Sie Ihre Pfade relativ zum Speicherort der Datei. Höchstwahrscheinlich wird der Dateiname der Vorlage oder seine Position nicht übereinstimmt, aber der richtige Weg sein sollte:

'./Register.component.html' 

Ihre Projektstruktur Unter der Annahme:

<root> 
    boot.ts 
    <Accounts> 
     app.ts 
     <Register> 
      Register.component.html 
      Register.component.ts 
     <Login> 
      Login.component.ts