Использование Razor для генерации шаблонов Angular2

Question

Я пытаюсь использовать Razor для генерации html, используемого в угловом шаблоне. Я использую Angular v 2.0.0. У меня есть Contract.cshtml, который выглядит как:

<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> 

А Contract.ts, который выглядит как

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

А contract.component.ts, который выглядит как:

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 { } 

и А contract.component.ts, который выглядит следующим образом:

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

Когда я запускаю это я получаю

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 

Я думаю, что ошибка в contract.component.ts, но я не знаю, как не указывать шаблон здесь

Answer 1

Angular2 не предназначен для использования с шаблонами, созданными Razor. Лучше разрешить Angular2 обрабатывать всю маршрутизацию, а не использовать MVC, потому что это добавляет ненужную зависимость, которая делает проект более сложным для тестирования.

Answer 2

Я использую Angular для разгрузки большого количества работы с сервера на клиентские и хост сложные веб-сайты, используя гораздо меньше ресурсов. Эти веб-сайты не являются ООПТ. В этом контексте очень полезно использовать ASP.NET-роутер и созданные бритвой шаблоны (иногда предварительно скомпилированные). Единственная проблема, с которой я столкнулся при использовании шаблонов, созданных бритвами в Угловом, был способ был настроен webpack. После удаления angular2-template-loader все работает плавно.