Creating a nrwl/nx workspace with Angular Universal and encountering a typing problem in Cypress configuration

TL;DR

When I run yarn webpack:server, I encounter the error message Cannot find name 'cy'.

Example repository: Branch displaying error


Error Explanation

Hello, I am currently in the process of setting up a minimal viable product project to test out Angular Universal within a Nrwl/Nx workspace.

Most of the setup has been completed using the ng CLI with Nrwl/Nx schematics:

  • create-nx-workspace nx-workspace-with-ssr --yarn
  • ng g app nx-app (jest & cypress for testing)
  • yarn update (update using the Nrwl/Nx schematic)
  • ng g universal (Nrwl/Nx schematic for setting up universal)

After completing these steps, I followed a guide on how to build and serve the SSR application.

I adjusted the paths in the example scripts to fit my Nx project.

However, when I run yarn webpack:server, it displays the error message Cannot find name 'cy'.

It seems strange to me since I do not intend to build files from the apps/nx-app-e2e/ folder. I suspect there might be an issue with some of the tsconfig* files, but I am unable to pinpoint the exact problem.

System Details

Angular CLI: 7.3.0
Node: 10.14.1
OS: win32 x64
Angular: 7.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.3.0
@angular-devkit/schematics        7.3.0
@angular/cli                      7.3.0
@ngtools/webpack                  7.1.4
@schematics/angular               7.3.0
@schematics/update                0.13.0
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.23.1

Error Logs

$ yarn webpack:server
yarn run v1.13.0
$ webpack --config webpack.server.config.js --progress --colors
Hash: d991a357a6372aad06d8
Version: webpack 4.23.1
Time: 8716ms
Built at: 02/06/2019 2:24:07 PM
 1 asset
Entrypoint server = server.js
  [1] ./node_modules/@angular/core/fesm5/core.js + 4 modules 974 KiB {0} [built] [2 warnings]
      |    5 modules
  [4] ./node_modules/rxjs/_esm5/internal/Observable.js + 2 modules 5.33 KiB {0} [built]
      |    3 modules
 [11] external "path" 42 bytes {0} [built]
 [12] ./node_modules/@ngrx/store/fesm5/store.js + 10 modules 43.8 KiB {0} [built]
      |    11 modules
 [27] external "fs" 42 bytes {0} [built]
 [47] ./node_modules/@ngrx/effects/fesm5/effects.js + 4 modules 21.7 KiB {0} [built]
      |    5 modules
 [55] external "url" 42 bytes {0} [built]
 [85] external "events" 42 bytes {0} [built]
 [86] external "crypto" 42 bytes {0} [built]
[106] ./node_modules/@angular/platform-server/fesm5/platform-server.js + 2 modules 1.24 MiB {0} [built]
      |    3 modules
[109] ./apps/nx-app/src lazy namespace object 160 bytes {0} [built]
[158] external "timers" 42 bytes {0} [optional] [built]
[245] ./dist/apps/nx-app-server/main.js 39.7 KiB {0} [built]
[261] ./node_modules/@nrwl/nx/esm5/nrwl-nx.js + 17 modules 308 KiB {0} [built]
      |    18 modules
[262] ./server.ts + 1 modules 5.38 KiB {0} [built]
      | ./server.ts 1.81 KiB [built]
      |     + 1 hidden module
    + 358 hidden modules

WARNING in ./node_modules/@angular/core/fesm5/core.js 18261:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 11:0-14

WARNING in ./node_modules/@angular/core/fesm5/core.js 18273:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 11:0-14

ERROR in C:\Development\Temp\nx-worspace-with-ssr\apps\nx-app-e2e\src\integration\app.spec.ts
[tsl] ERROR in C:\Development\Temp\nx-worspace-with-ssr\apps\nx-app-e2e\src\integration\app.spec.ts(4,20)
      TS2304: Cannot find name 'cy'.

ERROR in C:\Development\Temp\nx-worspace-with-ssr\apps\nx-app-e2e\src\support\app.po.ts
[tsl] ERROR in C:\Development\Temp\nx-worspace-with-ssr\apps\nx-app-e2e\src\support\app.po.ts(1,34)
      TS2304: Cannot find name 'cy'.
error Command failed with exit code 2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting an Axios request, the backend method cannot be accessed

I am facing an issue when using Axios request to access a method in the backend. I am constrained by pre-existing code in both frontend and backend that limits how much I can modify or add. Frontend: const response = await axiosConfig.put<IReserved&g ...

The use of async/await within an observable function

I am looking to establish an observable that can send values to my observers. The issue lies in the fact that these values are acquired through a method that returns a promise. Is it possible to use await within the observable for the promise-returning f ...

Determining the location of the cursor within 'ng2-ckeditor'

I'm a beginner with Angular 2 and I'm using 'ng2-ckeditor 1.0.7' in my Angular 2 application. The editor is functioning well within the app. However, I am now faced with the challenge of appending text at the cursor position. Unfortunat ...

Troubleshooting CORS problem: Angular 2 and AspNetCore WebApi encounter error with preflight response having invalid HTTP status code 401

Hello there! I am currently working on implementing a straightforward token based authentication method in an Angular 2 RC6 application against an AspNetCore WebApi project that I developed using Visual Studio 2015. If you're interested, I have uploa ...

Is there a way to merge my local store with Firestore using ngrx entity?

Currently, I'm facing a challenge while using NgRx and Firestore as I attempt to keep the local store in sync with a firestore collection. I have set up an observable that triggers when the firestore collection is updated. However, in my reducer, I am ...

Executing multiple service calls in Angular2

Is there a way to optimize the number of requests made to a service? I need to retrieve data from my database in batches of 1000 entries each time. Currently, I have a loop set up like this: while (!done) { ... } This approach results in unnecessary re ...

Troubleshooting the Hide/Show feature in React Native

As a newcomer to React Native development, I am attempting something simple. Within a React Class extending Component, I have 4 components <TouchableOpacity>. In the render function, my goal is to hide three of these components while pressing on one ...

What is the method for comparing fields within an input type in type graphql with the assistance of class validator decorators?

I am working with the following example input type: @InputType() class ExampleInputType { @Field(() => Number) @IsInt() fromAge: number @Field(() => Number) @IsInt() toAge: number } Can I validate and compare the toAge and fromAge fields in th ...

Type of tuple without a specific order

Exploring Typescript typings has led me to ponder how to create a type that is a tuple with unordered element types. For example: type SimpleTuple = [number, string]; const tup1: SimpleTuple = [7, `7`]; // Valid const tup2: SimpleTuple = [`7`, 7]; // &ap ...

Discovering a method to detect clicks outside of a React functional component

Looking to identify when a click occurs outside of a React functional component. After stumbling upon an article, I followed the provided code but unfortunately, it didn't work as expected. Despite identifying the issue, I am still searching for a so ...

Executing an observable only when a certain variable is in a specific state at the class level

Is there a way to conditionally return an observable in a clean manner, based on a predefined condition? Let's look at the scenario below: isEditing = false; // <---- Variable defined at class level return this.usersService.fetchInitialCreateDat ...

Lazy loaded modules do not have access to singleton services

After breaking my initial AppModule into multiple modules, I decided to lazy-load one of the modules while using singleton services from a shared module. Following the instructions provided in the official Angular documentation (link here) and in a tutori ...

Experiencing migraines while integrating Firebase 9, Redux Toolkit, and Typescript in a React project. Encountering a peculiar issue where 'dispatch' is unexpectedly identified as type 'never'?

I am currently in the process of upgrading an old project to newer technologies, specifically focusing on Typescript, redux-toolkit, and Firebase v9 for modularity. While I have limited experience with Typescript and none with redux-toolkit, I have been us ...

How to extract the first initials from a full name using Angular TypeScript and *ngFor

I am new to Angular and still learning about its functionalities. Currently, I am developing an Angular app where I need to display a list of people. In case there is no picture available for a person, I want to show the first letters of their first name a ...

javascript identify dissimilarities within arrays

Working on an Angular 2 application and attempting to identify the difference between two arrays (last seven days and missing dates within the last seven days). Everything works fine when initializing the array through a string, like in example code 1. How ...

brings fulfillment except for categories

The new satisfies operator in TypeScript 4.9 is incredibly useful for creating narrowly typed values that still align with broader definitions. type WideType = Record<string, number>; const narrowValues = { hello: number, world: number, } sa ...

Creating a fresh ngx-translate pipeline (comparing pure and impure methods)

Edit: I am looking to enhance the functionality of ngx-translate's pipe by extending it. Here is an example of how I achieved this: import { Pipe, PipeTransform } from '@angular/core'; import { TranslatePipe } from "@ngx-translate/core"; @ ...

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

Displaying nested objects within an object using React

Behold this interesting item: const [object, setObject] = useState ({ item1: "Greetings, World!", item2: "Salutations!", }); I aim to retrieve all the children from it. I have a snippet of code here, but for some reason, i ...

Error with Firebase authentication on a Next.js project using TypeScript

I recently started a personal project using Next.js, Typescript, and Firebase for authentication and database management. While working on a sign-in page with Google integration, I encountered an error labeled as auth/argument-error. According to the Fireb ...