After compiling it is like this

[MontyMa]

<var>pug = require("!../../../node_modules/pug-runtime/index.js");</var> <function>template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml lang=\"en\"\u003E\u003Chead\u003E\u003Cmeta charset=\"UTF-8\"\u003E\u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003E\u003Ctitle\u003E我是pug继承来的 login\u003C\u002Ftitle\u003E\u003C\u002Fhead\u003E\u003C\u002Fhtml\u003E\u003Cbody\u003E\u003Cdiv id=\"app\"\u003E\u003C\u002Fdiv\u003E\u003C\u002Fbody\u003E";;return pug_html;}; </function> <module class="exports">= template;</module>
What is the reason and how do I solve it？

[zigang93]

need more information please . how can you ask for help just like that

[Smolli]

I am facing the same problem.

I created a new Angular 8 project and added ngx-build-plus. I changed the package.json and altered the build script: "build": "ng build --extra-webpack-config extra-webpack.config.js". When running the build script, the raw content of the .pug file is added to the generated main.js. When running the build script with the --prod attribute, I get the following error:

ERROR in : Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("\u003C\u002Fh2\u003E\n\u003C\u002Fdiv\u003E";;return pug_html;};
module.exports = template;[ERROR ->]"): <project-path>/src/app/app.component.pug@4:26
Invalid ICU message. Missing '}'. ("\u003C\u002Fh2\u003E\n\u003C\u002Fdiv\u003E";;return pug_html;};
module.exports = template;[ERROR ->]"): <project-path>/src/app/app.component.pug@4:26

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <project>@0.0.0 build:prod: `ng build --prod --extra-webpack-config extra-webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <project>@0.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

My extra-webpack.config.js looks lilke this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          { loader: 'raw-loader' },
          {
            loader: 'pug-loader',
            options: {
              'doctype': 'html',
              'pretty': true,
              'plugins': [
                'pug-plugin-ng'
              ]
            }
          }
        ]
      }
    ]
  }
};

And the app.component.tslook like:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

This setup worked perfectly before Angular 8. So I guess something changed there.

[cdll]

same issue here when i config configureWebpack in vue.config.js with vue/cli ~
could anybody give some help?