仅在 e2e 测试中使用 Angular CLI 应用程序包含静态 html 文件答案

【问题标题】：Include static html file with Angular CLI application only in e2e tests仅在 e2e 测试中使用 Angular CLI 应用程序包含静态 html 文件
【发布时间】：2019-06-24 14:58:01
【问题描述】：

我想要一个特定的静态（非 Angular）html 文件，该文件仅在 Angular CLI 应用程序中运行我的 e2e 测试时构建和提供。在生产应用程序中，该静态文件不应该可用。

我试图让它在最小的复制中工作，但看不到我能做到这一点。我首先创建了一个具有所有默认值的ng new (Angular CLI 7.3.9) 应用程序。然后我这样做了：

在我的angular.json 文件中的projects 主条目下添加"src/production-static-page.html", 到"assets"。
仅使用 <p id="foo">bar</p> 作为内容创建了该文件。

用这个扩展了脚手架的 e2e 测试：

it('can navigate to e2e-only html', () => {
  browser.waitForAngularEnabled(false);
  browser.get('/e2e-only-static-page.html');
  const text = element(by.css('#foo')).getText();
  expect(text).toEqual('bar');
  browser.waitForAngularEnabled(true);
});

这很有效，因为该 html 文件只是一个普通的生产文件，因此在我将应用程序部署到生产时也可以使用。

我看不到应该如何在angular.json 文件中配置"foo-bar-e2e" 项目，以使另一个html 文件（比如e2e-only-static-page.html）仅用于e2e 测试？

【问题讨论】：

标签： angular jasmine protractor angular-cli

【解决方案1】：

我找到了办法。这不是很方便，因为那里有seems to be no reuse of configs in angular.json，但它可以工作。

angular.json中的步骤：

复制"build"部分，将其命名为"build-e2e"
在该构建中包含您的仅 e2e 资产
复制"serve" 部分，将其命名为"serve-e2e"
重新配置该部分以使用"browserTarget": "my-project:build-e2e"
将"my-project-e2e" > "architect" > "e2e" > "configurations" > "production" > "devServerTarget" 更改为 "my-project:serve-e2e:production"（您在步骤 3 和 4 中创建的元素。
将 "my-project-e2e" > "architect" > "e2e" > "options" > "devServerTarget" 更改为 "my-project:serve-e2e"（您在步骤 3 和 4 中创建的元素。

完成了！现在ng e2e 可以访问该html 文件，而ng serve 和生产版本则不能。

【讨论】：