Verwenden von Razor zum Generieren von Angular2-Vorlagen

Question

Ich versuche Razor zu verwenden, um den in einer Angular-Vorlage verwendeten HTML-Code zu generieren. Ich verwende Angular v 2.0.0. Ich habe einen Contract.cshtml, die wie folgt aussieht:

<script> 
    System.import('contract.js').catch(function(err){ console.error(err); }); 
</script> 
<my-contract> 
    <h1>Hello {{name}} this is a quick starter for angular 2 app</h1> 
</my-contract> 

A Contract.ts, die wie

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { ContractModule } from './app/Contract/contract.module'; 
platformBrowserDynamic().bootstrapModule(ContractModule); 

Ein contract.component.ts sieht das wie folgt aussieht:

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ContractComponent } from './contract.component'; 
@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ContractComponent ], 
    bootstrap: [ ContractComponent ] 
}) 
export class ContractModule { } 

Und ein contract.component.ts sieht so aus:

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-contract' 
}) 
export class ContractComponent { 
    public name = 'Nigel Findlater'; 
    consturctor() {} 
} 

Wenn ich dies laufe ich bekommen

Error: Error: No template specified for component ContractComponent  
     at DirectiveNormalizer.normalizeDirective (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:13476:21)    at RuntimeCompiler._createCompiledTemplate (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16869:210) 
      at eval (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16807:43) 
      at Array.forEach (native) 
      at eval (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16805:50) 
      at Array.forEach (native) 
      at RuntimeCompiler._compileComponents (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16804:45) 
      at RuntimeCompiler._compileModuleAndComponents (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16741:39) 
      at RuntimeCompiler.compileModuleAsync (http://localhost:2600/lib/@angular/compiler/bundles/compiler.umd.js:16732:23) 
      at PlatformRef_._bootstrapModuleWithZone (http://localhost:2600/lib/@angular/core/bundles/core.umd.js:6954:29) 
     Evaluating http://localhost:2600/contract.js 
     Error loading http://localhost:2600/contract.js 

Ich denke, der Fehler in contract.component.ts ist, aber ich weiß nicht, wie keine Vorlage hier

Answer 1

Angular2 ausgelegt ist, nicht verwendet werden, angeben, mit Razor generierten Vorlagen. Es ist am besten, Angular2 zu erlauben, das gesamte Routing zu handhaben und MVC nicht zu verwenden, da dies eine unnötige Abhängigkeit hinzufügt, die das Projekt schwieriger zu testen macht.

Answer 2

Ich benutze Angular, um eine Menge Arbeit vom Server auf den Client auszulagern und komplexe Websites mit viel weniger Ressourcen zu hosten. Diese Websites sind keine SPAs. In diesem Zusammenhang kann es wirklich nützlich sein, ASP.NET Router und Rasierer generierte Vorlagen (manchmal vorkompiliert) zu verwenden. Das einzige Problem, das ich bei der Verwendung von Rasierer-generierten Vorlagen in Angular sah, war die Art, wie webpack konfiguriert wurde. Nach dem Entfernen der angular2-Template-Loader lief alles reibungslos.