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

Question

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

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

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

3. 用这个扩展了脚手架 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 测试？

Answer 1

我找到了一种方法。这不是很方便，因为在angular.json中似乎没有重用配置，但它可以工作。

angular.json的步骤：

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

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