我从过去 3 天开始搜索这个,一无所获。我正在使用 MVC 和 Web Api 开发 Angular 4 应用程序。
我正在尝试使用命令:模板:require('./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'; }
主文件
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 { }
应用程序组件.html
<h1>Hello {{name}}</h1>
配置文件
{
"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);
包.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": {}
}
不要使用“require”来包含您的模板,您需要使用“templateUrl”,而不是“template”。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ 'app.component.css'],
moduleId: module.id
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句