Блог

Я некоторое время задавался вопросом, почему моему клиенту всегда нужно было очищать кэш своего браузера для моего веб-сайта. Оказывается, угловые файлы не получают правильную сборку. Или, если быть более точным, они получают сборку, но их имя не хэшируется, что приводит к тем же именам, что и в предыдущих версиях, и поэтому браузер думает, что ничего не изменилось.

Ниже мой файл .csproj:

     <Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules**</DefaultItemExcludes>

    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
    <UserSecretsId>c69ca95c-16a6-4f76-bb29-b4d09b2a4417</UserSecretsId>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="CsvHelper" Version="12.1.1" />
    <PackageReference Include="EPPlus" Version="4.5.3.1" />
    <PackageReference Include="Microsoft.AspNetCore.App" />
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" />
    <PackageReference Include="Sendgrid" Version="9.10.0" />
    <PackageReference Include="WindowsAzure.Storage" Version="9.3.3" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules**" />
  </ItemGroup>


  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>
  

Оказывается, «npm run build —prod» не запускается, потому что angular не находится в рабочем режиме. Как мне сделать так, чтобы мои рабочие параметры публикации в Visual studio создавали angular в рабочем режиме, в то время как мой сервер разработки получает сборку для разработки?

Измените команду на npm run build -- --prod .
Это передает prod параметр подчиненной ng build команде, и, следовательно, будет выполнена правильная команда ( ng build --prod ).

Если вы заглянете внутрь своего package.json файла, build команда выполнится ng build . Даже если вы указали --prod , параметры не переводятся в команду в package.json . Вот пара вариантов.

В вашем package.json файле вы можете создать другую команду для производственного процесса.

 "scripts": {
  ...
  "build": "ng build",
  "build-prod": "ng build --prod"
  ...  
},
  

Затем вы можете запустить npm run build-prod . Или, как второй вариант, вы могли бы просто запустить команду angular-cli ng build --prod

Выполните команду ng build —prod

Мне пришлось использовать комбинацию ответа Джейсона Уайта вместе с SNIPEZ, чтобы заставить мой работать правильно.

Добавление

 "build-prod": "ng build --prod" 
  

ввод в package.json вместе с изменением файла .csproj на

 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" />
  

у меня сработало