当我使用＆＃34; express＆＃34;部署我的应用程序时在heroku上我有这种类型的错误：
Uncaught Error: Template parse errors:
Unexpected closing tag "button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("lass="btn btn-default" routerlink=/add-person [routerlinkactive]="['router-link-active']">Add Person[ERROR ->]</button> </div> <div class=btn-group role=group> <button type=button class="btn btn-default" routerl"): ng:///t/t.html@0:866
Unexpected closing tag "button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("btn btn-default" routerlink=/faces-importer [routerlinkactive]="['router-link-active']">Import Faces[ERROR ->]</button> </div> <div class=btn-group role=group> <button type=button class="btn btn-default" routerl"): ng:///t/t.html@0:1043
Unexpected closing tag "button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("tton class="btn btn-default" routerlink=/analyse [routerlinkactive]="['router-link-active']">Analyse[ERROR ->]</button> </div> </div> </div> <div [hidden]=!displayOptions.showWebcam> <div class=span12> <video #v"): ng:///t/t.html@0:1208
at f (https://face-recognition-angular2.herokuapp.com/js/bundle.js:627:3464)
at t.normalizeLoadedTemplate (https://face-recognition-angular2.herokuapp.com/js/bundle.js:718:1969)
at t.normalizeTemplateSync (https://face-recognition-angular2.herokuapp.com/js/bundle.js:718:1467)
at t.normalizeTemplate (https://face-recognition-angular2.herokuapp.com/js/bundle.js:718:957)
at t._loadDirectiveMetadata (https://face-recognition-angular2.herokuapp.com/js/bundle.js:739:3470)
at https://face-recognition-angular2.herokuapp.com/js/bundle.js:739:6675
at Array.forEach (native)
at t.loadNgModuleDirectiveAndPipeMetadata (https://face-recognition-angular2.herokuapp.com/js/bundle.js:739:6647)
at https://face-recognition-angular2.herokuapp.com/js/bundle.js:760:59780
at Array.forEach (native)
本地与＆＃34; npm start＆＃34;我没有错误。
我认为我的配置问题不包含某些html语法。
app.js
var express = require('express');
var basicAuth = require('basic-auth-connect');
var app = express();
app.use(basicAuth('xxxx', 'xxxxxxxx'));
app.use(express.static('face-recognition/public'));
app.use("/public", express.static('public'));
var port = process.env.PORT || 3000;
app.listen(port, function () {
console.log(`Example app listening on port ${port} !`);
});
的WebPack-配置
var helpers = require('./config/helpers');
module.exports = {
entry: "./app/main.ts",
output: {
path: helpers.root('public/js'),
filename: "bundle.js",
publicPath: '/js/'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('app', 'tsconfig.json') }
},
{
loader: 'angular2-template-loader'
}
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
devServer: {
historyApiFallback: true
}
};
---编辑：---
.babelrc
{
"presets": ["es2015", {"modules": false}],
"plugins": ["transform-class-properties"],
}
.eslintignore
node_modules
webpack.config.js
public
README.md
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb-base"
}
BS-config.json
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
}
}
}
tslint.json
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
"static-before-instance",
"variables-before-functions"
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-unreachable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
答案 0 :(得分：1)
我怀疑这些错误是由Angular HTML解析器触发的，因为：
routerlink=/add-person
routerlink=/faces-importer
routerlink=/analyse
解析器认为您正在使用<button>关闭/add-person元素。尝试将""添加到您的属性中：
routerlink="/add-person"
routerlink="/faces-importer"
routerlink="/analyse"
你应该始终在你的属性中使用""，这是一个很好的做法。
[编辑]
在深入研究此错误后，似乎问题来自webpack [html-loader][1]，它会缩小和清理HTML模板。您似乎必须配置此加载程序才能使其与Angular模板一起使用：
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
collapseWhitespace: true,
// angular templates break if these are omitted
removeAttributeQuotes: false,
keepClosingSlash: true,
caseSensitive: true,
conservativeCollapse: true,
}
},
请参阅[1]：https://github.com/webpack-contrib/html-loader了解更多详情