Angular 4 Webpack 2 & AOT: Unexpected closing tag "a"

angular 8 webpack
what is webpack in angular 6
angular 2 webpack
does angular use webpack
angular cli vs webpack
angular-webpack-starter
angular without webpack
angular-builders/custom-webpack

I am getting this weird error when I am making a build, at the time of watch or running server its not giving anything, just only at the time of build giving this error:

Unexpected closing tag "a". 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 ("ref=/user><img class="d-inline-block align-top" [src]="staticUrl + 'v4/img/intouch-logo-name.png'"/>[ERROR ->]</a> <search class="mr-auto col-sm-7 col-md-6 col-lg-5 col-xl-5 p-0"></search> <div id=settings> <div"): ng:///Users/header.html@0:192

And here is my html:

<nav class="navbar d-flex flex-row navbar-light bg-faded fixed-top">
    <a class="navbar-brand" href="/user"><img class="d-inline-block align-top" [src]="staticUrl + 'v4/img/intouch-logo-name.png'" /></a>

    <search class="mr-auto col-sm-7 col-md-6 col-lg-5 col-xl-5 p-0"></search>

    <div id="settings">
        <div class="dropdown clearfix">
            <div class="userProfile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <div class="userDetail">
                    <label>
                        {{loggedUser.icontact.name.given + ((loggedUser.icontact.name.family) ? ' '+loggedUser.icontact.name.family : '')}}
                    </label>
                    <small>
                        {{loggedUser.icontact.user_iid}}
                    </small>
                </div>
                <img class="profilePic rounded-circle" [src]="(loggedUser.icontact.photo) ? loggedUser.icontact.photo.url : staticUrl + 'images/in_img_default_profile_100px.png'" />
            </div>
            <div class="dropdown-menu" aria-labelledby="settings">
                <a class="dropdown-item" [href]="'/' + loggedUser.icontact.user_iid" target="_blank">View profile</a>
                <a class="dropdown-item" href="/user/cards/" target="_blank">
                    Edit Profile
                </a>
                <div class="dropdown-divider"
                    *ngIf="accountInfo.userStatus.currentUserType == accountInfo.userStatus.groupType"></div>
                <a class="dropdown-item" href="/user/notices/" target="_blank"
                    *ngIf="accountInfo.userStatus.currentUserType == accountInfo.userStatus.groupType">Notices</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item upgrade-link upgrade-account" href="/user/upgrade/" target="_blank" 
                    *ngIf="accountInfo.userStatus.currentPlan == '001'">Upgrade</a>
                <a class="dropdown-item" href="mailto:support@intouchid.net?Subject=Feedback%20on%20the%20new%20interface">Feedback</a>
                <a class="dropdown-item" href="/user/import/" target="_blank">Import data</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/user/">Switch to old view</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/logout/" 
                    (click)="utilsService.sendEvent('spreadsheet_view', 'logout_clicked', 'clicked on logout')">Logout</a>
            </div>
        </div>
    </div>
</nav>

And this is the script I am using to make a build: npm run cleanup && npm run ngc && webpack --config config/webpack.prod.js -p & my webpack config is:

plugins: [
    new AotPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: helpers.root('src/app/app.module#AppModule')
    }),
    new webpack.LoaderOptionsPlugin({
      debug: true,  // config.debug has to be passed this way now too!
      htmlLoader: {
        minimize: false
      }
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new CompressionPlugin()
  ]

There are implied end tags which are being implemented. You can use less end tags. Open up the console in your browser to see the error, it links this: https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

Webpack: an introduction - ts - GUIDE, 2. Transform result ugly webpack config. Refactor ugly config and make configs for local, development and production with WebpackMerge. This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using a Webpack 2 for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests. Best practices in file and application organization for Angular.

I guess something with your quotes after interpolation or with non-printable characters.

Please check those lines :

<a class="dropdown-item" href="/user/notices/" target="_blank" *ngIf="accountInfo.userStatus.currentUserType == accountInfo.userStatus.groupType">Notices</a>
   <div class="dropdown-divider"></div>

and

<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/" (click)="utilsService.sendEvent('spreadsheet_view', 'logout_clicked', 'clicked on logout')">Logout</a>

From Angular CLI to Webpack 2 and other production solutions (with , js for the main output file and to the ./dist folder for any other generated file. Loaders — At a high level, loaders have two properties in your  Updated 2018-11-07 for Angular 7.x Previous versions: 2018-10-12 for Angular 6.1.0 and webpack 4.20.2 (original post on 2016-06-01, then updated on 2017-03-14 for anglar 4.0.0.rc.3 and webpack 2.x and on 2017-12-13 for Angular 5.1.0 with Webpack 3.x) We will create a simple angular application.

In my case the error was due to the minimization of HTML. Turning it off resolved the issue. To turn it off correctly please review the docs here: https://webpack.js.org/loaders/html-loader

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: false
      }
    }],
  }]
}

How to configure Webpack 4 with Angular 7: a complete guide, Updated 2018-11-07 for Angular 7.x Previous versions: 2018-10-12 for for anglar 4.0.0.rc.3 and webpack 2.x and on 2017-12-13 for Angular  Angular 4 Seed with Webpack. Contribute to davidberetta/angular4-webpack-seed development by creating an account on GitHub.

Angular 7.x with webpack 4.20.2 Tutorial, A complete tutorial on setting up a highly scalable and configurable Angular 4 project with Duration: 46:08 Posted: Oct 25, 2017 The nice folks on the Angular team wanted to make it easier for people to start using Angular. They did this by embedding webpack in the Angular CLI. Now, as an Angular developer you don’t need to know anything about webpack. The Angular CLI hides all that webpack complexity. However, that simplicity comes at the price of flexibility.

Angular 4 Project Setup with Webpack, Clean Angular Boilerplate with webapack 2. Contribute to fabiomirandaa/​Angular4-boilerplate-webpack2 development by creating an account on GitHub. TL;DR — AngularJS was a decent idea in 2012 but in 2017, the JS ecosystem has surged past Angular in maturity, flexibility, and productivity. Thanks to webpack, NPM on the front-end, and a mature…

fabiomirandaa/Angular4-boilerplate-webpack2: Clean , TableExport + Angular 4 + Webpack 2 sample app. Contribute to clarketm/​tableexport_angular4_webpack2_app development by creating an account on  by Samuel Teboul How to configure Webpack 4 with Angular 7: a complete guide Angular & webpack logosThe Angular CLI makes it easy to create an application that already works, right out of the box. It is a great tool, but have you never thought: "How does it work? How can I build an application without the CLI?" Those questions came to my mind when Angular 7 was released. I started to look for

Comments
  • What's the <search> tag correspond to? Is that a valid HTML tag? EDIT: also, if you change the src of the <img> tag to be static, do you have the same issue?
  • <search> is another component & yes changing src doesn't help
  • Your error message is saying that your first <a> has a href without any quatation marks: ref=/user>. Check the quotation marks there - remove the href and see if that changes anything
  • Im getting the same error. both me and you have images inside anchor tags.
  • Getting the same error, when i try to bundle by webpack production, but it works fine in dev mode...
  • I can't find the problem which quotes, since in my whole project I am following same practice, but its giving error only here
  • try to remove some spaces and line-break between target="_blank" and *ngIf= in the line above. My test with just one space worked for me on jona.ca/blog/unclosed-tag-finder. Then you will have the same problem before (click) on the line <a class="dropdown-item" href="/logout/" (click)="utilsService.sendEvent(
  • I edited my answer, so you should paste my lines in places of yours to test