如何在生产模式下发布 Angular 文件？答案

【问题标题】：How to publish angular files in production mode?如何在生产模式下发布 Angular 文件？
【发布时间】：2019-08-22 19:25:52
【问题描述】：

我一直想知道为什么我的客户总是需要为我的网站清除浏览器缓存。结果是角度文件没有正确构建。或者更准确地说，它们得到了构建，但它们的名称没有经过哈希处理，导致名称与以前的版本相同，因此浏览器认为没有任何变化。

下面是我的 .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，而我的开发服务器获得开发版本？

【问题讨论】：

标签： .net visual-studio asp.net-core angular-cli

【解决方案1】：

将命令更改为npm run build -- --prod。
这会将prod 参数传递给下级ng build 命令，因此将执行正确的命令（ng build --prod）。

【讨论】：

【解决方案2】：

如果您查看 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

【讨论】：

【解决方案3】：

执行命令ng build --prod

【讨论】：

独立于答案的正确性，花了一点时间和一些话来解释。

【解决方案4】：

我必须结合使用 Jason White 的答案和 SNIPEZ，才能让我的答案正常工作。

添加

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

package.json 的入口，以及将 .csproj 文件更改为

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

为我工作

【讨论】：