Angular 4 Webpack 2 和 AOT：意外的结束标记“a”答案

【问题标题】：Angular 4 Webpack 2 & AOT: Unexpected closing tag "a"Angular 4 Webpack 2 和 AOT：意外的结束标记“a”
【发布时间】：2017-09-10 11:40:47
【问题描述】：

我在构建时遇到这个奇怪的错误，在监视或运行服务器时它没有给出任何东西，只是在构建时给出这个错误：

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

这是我的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>

这是我用来构建的脚本：npm run cleanup && npm run ngc && webpack --config config/webpack.prod.js -p & 我的 webpack 配置是：

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()
  ]

【问题讨论】：

<search> 标签对应的是什么？这是一个有效的 HTML 标记吗？编辑：另外，如果您将<img> 标记的src 更改为静态，您是否有同样的问题？
<search> 是另一个组件，是的，更改 src 没有帮助
您的错误消息是说您的第一个 <a> 有一个 href 没有任何引号：ref=/user>。检查那里的引号 - 删除 href 看看是否有任何改变
我遇到了同样的错误。我和你都有锚标签内的图像。
当我尝试通过 webpack 生产捆绑时遇到同样的错误，但它在开发模式下工作正常......

标签： angular webpack angular2-aot

【解决方案1】：

我猜想插值后的引号或不可打印的字符。

请检查这些行：

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

和

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

【讨论】：

我找不到引用的问题，因为在我的整个项目中我都遵循相同的做法，但它只在这里给出错误
尝试删除上面一行中target="_blank" 和*ngIf= 之间的一些空格和换行符。我只有一个空格的测试在jona.ca/blog/unclosed-tag-finder 上为我工作。那么你在(click)之前就会遇到同样的问题<a class="dropdown-item" href="/logout/" (click)="utilsService.sendEvent(就行了
我编辑了我的答案，所以你应该将我的行粘贴到你的地方进行测试

【解决方案2】：

正在实施隐含的结束标记。您可以使用更少的结束标签。在浏览器中打开控制台查看错误，它链接了这个：https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

【讨论】：

【解决方案3】：

在我的情况下，错误是由于 HTML 的最小化造成的。关闭它解决了这个问题。要正确关闭它，请查看此处的文档：https://webpack.js.org/loaders/html-loader

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

【讨论】：