Node.js [Heroku][Angular]“模板解析错误”当我部署我的应用程序时

当我在heroku上使用express部署应用程序时，会出现以下类型的错误：

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)

网页包配置

--编辑：--

B.法律改革委员会

埃斯林特先生

埃斯林先生

bs-config.json

tslint.json

---

我怀疑这些错误是由Angular HTML解析器触发的，因为：

routerlink=/add-person 
routerlink=/faces-importer
routerlink=/analyse

解析器认为您正在使用/addPerson关闭元素。尝试添加到您的属性：

routerlink="/add-person"
routerlink="/faces-importer"
routerlink="/analyse"

您应该始终在属性中使用，这是一个很好的实践

[编辑]

在深入挖掘这个错误之后，问题似乎来自网页[html loader][1]，它缩小并清理html模板。似乎您必须配置此加载程序才能使其与角度模板一起工作：

{
            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]：有关更多详细信息，请参见

看起来像html错误，您可以发布它吗？我在开始时发布了它，您必须向右滚动。在按钮出现html错误后，它会告诉我*ngIf和[ngModel]上的错误。例如，如果我删除星号，ngif的错误会自动更正。它不再表示if条件。这只是一小段代码，本身不够有用。你能发布更多吗？我用更多配置代码编辑帖子，我认为它不是来自应用程序，因为它不会返回错误。

node_modules
webpack.config.js
public
README.md

{
  "parser": "babel-eslint",
  "extends": "airbnb-base"
}

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

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

routerlink=/add-person 
routerlink=/faces-importer
routerlink=/analyse

routerlink="/add-person"
routerlink="/faces-importer"
routerlink="/analyse"

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