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:
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)
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.