使用使用模板的MVC 4的角4: require()

Question

在过去的3天里，我一直在搜索这个，却一无所获。我正在用MVC和Web开发Range4应用程序。

我正在尝试使用命令: template:需要量(‘./app.Component.html’)

但是继续获取错误消息：错误: XHR错误：(404未找到)加载 http://localhost:3276/app/app.component.html.js

当我提到app.component.html.js时，我不知道它为什么要搜索app.component.html

请建议一下。以下是我的文件内容，以防万一：

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

不要使用“要求”来包含您的模板，您需要使用"templateUrl"，而不是“模板”。

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