[Heroku][Angular] "Template parse errors" when I deploy my app

Question

When I deploy my application with "express" on heroku I have errors of this type:

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)

Locally with "npm start" I have no error.

I think I have a configuration problem that does not include some html syntax.

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-config

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
    }
};

--- EDIT : ---

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

Screen of project folder

I posted it at the beginning you have to scroll to the right. After html errors with the "button" it tells me errors on the *ngIf and then on [(ngModel)]. For example, the error with ngif corrects itself if I remove the star (it no longer indicates the if condition) — Dimitri Sagnier
– Dimitri Sagnier, Commented May 10, 2017 at 10:29
thats only a small snippet of code which isnt useful enough on its own, can you post more? — mast3rd3mon
– mast3rd3mon, Commented May 10, 2017 at 10:33
I edit the post with more configuration code, I don't think it comes from the "app" because it doesn't return error. — Dimitri Sagnier
– Dimitri Sagnier, Commented May 10, 2017 at 10:41

Wassim Chegham · Accepted Answer · 2017-05-11 09:46:07Z

I suspect those errors are triggered by the Angular HTML parser because of this:

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

The parser thinks that you are closing the <button> element with /add-person. Try adding "" to your attributes:

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

You should always use "" in your attributes, it's a good practice.

[EDIT]

After digging deeper into this error, it seems that the issue comes from the webpack [html-loader][1] which minifies and sanitize the HTML templates. It seems that you have to configure this loader in order to make it work with Angular template:

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

see [1]: https://github.com/webpack-contrib/html-loader for more details

Collectives™ on Stack Overflow

[Heroku][Angular] "Template parse errors" when I deploy my app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related