テンプレートを使用したMVC 4の角4：require（）

Question

私は過去3日間でこれを探しています。 MVCとWeb ApiでAngular 4アプリケーションを開発しています。

私はコマンドを使用しようとしています：テンプレート：（ './ app.component.html'）

を必要としますが、エラーメッセージの取得維持： エラー：XHRエラー：（404が見つかりません）読み込みをhttp://localhost:3276/app/app.component.html.js

私はapp.component.html

示唆してくださいに言及しているとき、それはapp.component.html.jsを探している理由を私は知りません。下記の場合は、私のファイルの内容が必要とされている：
app.component.ts：

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

@Component({ 
    selector: 'my-app', 
    template: require('./app.component.html'), 
    styleUrls: [ 'app.component.css'], 
    moduleId: module.id 
}) 
export class AppComponent { name = 'Angular 2'; } 

main.tsを

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

app.module.ts

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

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

app.com ponent.html

<h1>Hello {{name}}</h1> 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015", "dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    } 
} 

Systemjs.config.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 

      // 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: { 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

Package.json

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi", 
    "scripts": { 
    "start": "webpack-dev-server --inline --progress --port 3276 && tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail && ncp dist ../Podcasts.Web/static", 
    "lint": "tslint ./app/**/*.ts -t verbose", 
    "lite": "lite-server", 
    "pree2e": "webdriver-manager update", 
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
    "test-once": "tsc && karma start karma.conf.js --single-run", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "@angular/cli": "^1.4.9", 
    "@angular/common": "~4.4.6", 
    "@angular/compiler": "~4.4.6", 
    "@angular/core": "~4.4.6", 
    "@angular/forms": "~4.4.6", 
    "@angular/http": "~4.4.6", 
    "@angular/platform-browser": "~4.4.6", 
    "@angular/platform-browser-dynamic": "~4.4.6", 
    "@angular/router": "~4.4.6", 
    "ajv": "^5.3.0", 
    "angular-in-memory-web-api": "~0.5.1", 
    "core-js": "^2.4.1", 
    "http-server": "^0.10.0", 
    "rxjs": "5.5.2", 
    "systemjs": "0.20.19", 
    "zone.js": "^0.8.18" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "2.6.2", 
    "@types/node": "^8.0.47", 
    "canonical-path": "0.0.2", 
    "concurrently": "^3.2.0", 
    "html-webpack-plugin": "^2.30.1", 
    "jasmine-core": "~2.8.0", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "lite-server": "^2.2.2", 
    "lodash": "^4.16.4", 
    "protractor": "~5.2.0", 
    "raw-loader": "^0.5.1", 
    "rimraf": "^2.5.4", 
    "ts-loader": "^3.1.0", 
    "tslint": "^5.8.0", 
    "tslint-loader": "^3.5.3", 
    "typescript": "~2.5.3", 
    "webpack": "^3.8.1", 
    "webpack-config": "^7.5.0", 
    "webpack-dev-server": "^2.9.3", 
    "webpack-merge": "^4.1.0" 
    }, 
    "repository": {} 
} 

Answer 1

テンプレートを含めるには「require」を使用せず、「template」ではなく「templateUrl」を使用する必要があります。

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ 'app.component.css'], 
    moduleId: module.id 
})