javascript - 如何在 Visual Studio 2017 中使用 Web 应用程序发布独立的 Angular 组件 (njsproj)

标签 javascript node.js angular npm single-page-application

我们有一个要求,我们需要发布我们的网站以在本地进行测试(sitecore)。我们有一个特殊的组件,称为 webapp。

我们现在引入了一个新组件(njsproj 文件),其中包含我们的 Angular 应用程序。当我发布 web 应用程序时,显然 Angular 代码未编译(npm install build 等)并复制到 web 应用程序的工件并发布。

在我的 CI CD 管道中,我已经将其映射出来并正在工作...构建步骤:使用 Nodejs、npm install Angular cli、npm install、ng build。

如何正确设置才能在本地进行发布?有任何想法吗?

最佳答案

您可以打开 njsproj 内容并添加此设置

<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>

该命令取自package.json

您会看到我在 package.json 中添加了另一个命令来运行测试

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Angular8:server:dev",
    "test": "ng test", // run this command
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

不过我觉得你可以看看microsoft的这篇文章创建 Angular 应用程序

关于javascript - 如何在 Visual Studio 2017 中使用 Web 应用程序发布独立的 Angular 组件 (njsproj),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57059045/

相关文章:

javascript - Uncaught Error : Google Plus response

javascript - 如何在 Javascript 中创建 Scramble 函数

ios - 带有 EACCES 和 ENOENT 的 OS X 上的 Cordova Build 失败

angular - 预检响应在 Angular 上没有 HTTP ok 状态

css - 在 ionic4 的网格单元格中用一个字母居中圆圈

javascript - 阻止 URL 漏洞

javascript - onClick 不适用于移动设备(触摸)

javascript - gulp-stylus 不编译文件,处理内存不足

javascript - Node.js 编译我不需要的文件。它在幕后是如何工作的?

jquery - 如何在 Angular 4 或 4+ 应用程序中导入 Bootstrap 4 主题