html-loader: Problem with migration from webpack 4 to 5. Html-loader strange behavior with @ngtools/webpack.

Hi there, I do migration from webpack 4 to 5. For my development webpack configuration it works in the end, but for production one I have build issues. Looks like html goes out not as a string, but as a variable/module. I’ve got plenty of errors like following: Screen Shot 2021-03-12 at 8 20 59 PM

Here as a text: `src/app/layouts/support/SupportComponent.ts:21:18 21 templateUrl: ‘support.html’, ~~~~~~~~~~~~~~ Error occurs in the template of component SupportComponent. src/app/layouts/support/support.html:20:1784 - error NG5002: Unexpected closing tag “ng-container”. 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

20 var code = “<div class="settings-panel support">\n <div class="support__statuses">\n <div class="support__env-info">\n <div class="support__env-info-item">\n <span>{{ ‘i18n.settings.version-number’ | translate }}:</span> {{ version }}\n </div>\n </div>\n <div class="support__systems">\n <div *ngFor="let s of (systems$ | async)" class="support__system">\n <div class="status-circle" [ngClass]="s.statusClass || ‘’"></div>\n {{ s.name }}\n </div>\n </div>\n </div>\n\n <ng-container *ngLet="supportEmail$ | async as orgSupportEmail">\n <ng-container *ngLet=‘supportNumber$ | async as supportNumber’>\n <ng-container *ngIf="orgSupportEmail || supportNumber">\n <a *ngIf="supportNumber" class="support__link" (click)="callSupport(supportNumber)">\n <i class="zmdi zmdi-phone"> {{ supportNumber }}\n \n\n <a *ngIf="orgSupportEmail" class="support__link" [href]="‘mailto:’ + orgSupportEmail">\n <i class="zmdi zmdi-email"> {{orgSupportEmail}}\n \n\n <div class="support__header">\n {{ ‘i18n.settings.header’ | translate }}\n </div>\n\n <div class="support__org-logo">\n <img src="” + HTML_LOADER_REPLACEMENT_0 + “" alt="{{ ‘i18n.short-app-name’ | translate }}">\n </div>\n <p class="support__description">\n {{ ‘i18n.settings.our-dedicated-team’ | translate }}\n

\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n</div>\n\n”;`

Html-loader has for both config as following:

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

Why it’s like var code =?

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 23 (9 by maintainers)

Most upvoted comments

My issue after installing html loader is it gives an error that this.getOptions() is not defined. which literally not defined in or called in the file it was written on. I found a cheap solution to that i copied the function from my loader-utilities library and past it there which works fine now but it wont work on automation deploys since the node modules gets reinstalled.

NEED A PERMANENT SOLUTION FOR THIS

@alexander-akait yeah, this is approach that I mentioned in my previous comment 😃 If I will find another way to do it I will let you know.