Webpack считает, что отсутствует загрузчик

Question

Я беру приложение Angular 4, использующее webpack 2.7 и портирую на Angular 9 webpack 4.41.6.

как часть моего нового файла webpack.config. js У меня есть файл следующие правила загрузчика:

 rules: [
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'to-string-loader!css-loader' },
      { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
    ]

Я установил 5 пакетов загрузчика и на них есть ссылки в моем пакете. json файл.

Когда я запускаю ng build, я получаю следующую ошибку :

ОШИБКА в ./src/app/message/message.component.html 1: 0 Ошибка синтаксического анализа модуля: неожиданный токен (1: 0) Вам может потребоваться соответствующий загрузчик для обработки этого Тип файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders

<div> |   <button type="button" class="btn btn-warning" (click)="goBack()"><i class="f a fa-fw fa-arrow-left"></i>Go
> Back</button> | </div>

@ ./src/app/message/message.component.ts 46: 18-53
@ ./ src / app / app.routing.ts
@ ./src/app/app.module.ts @ ./src/main.ts
@ multi ./src/main.ts

Кроме того, оба в визуальной студии. Таким образом, в файле csproj решения V4 мы имеем:

<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
    <Exec Command="npm install --no-optional" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
    <ItemGroup>
      <_GeneratedFiles Include="$(GeneratedItemPatterns)" />
      <ContentWithTargetPath Include="@(_GeneratedFiles->'%(FullPath)')" RelativePath="%(_GeneratedFiles.Identity)" TargetPath="%(_GeneratedFiles.Identity)" CopyToPublishDirectory="PreserveNewest" />
    </ItemGroup>
  </Target>

, но поскольку мы используем более позднюю версию в файле csproj решения v9, мы имеем:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

в соответствии с Документация Webpack, если пользовательский файл webpack.config. js находится в root, он должен быть выбран автоматически. Я не уверен, что это происходит, что будет причиной ошибки.