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

Question

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

我试图让这个工作在一个最小的repro，但没有看到我如何能做到这一点。 我首先创建了一个包含所有默认值的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和生产版本则没有。