ts-loader does not exist

[KissBalazs]

Current behavior

After a fresh install, and following th tutorial, running the npx cypress open-ct results in a big error, and even though I can see the test cases, clicking on them won't run them.

log:

npx cypress open-ct
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
ℹ ｢wds｣: Project is running at http://localhost:36041/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /__cypress/src
ℹ ｢wds｣: Content not from webpack is served from <project root>
✖ ｢wdm｣: asset main.js 8.2 KiB [emitted] (name: main)
asset index.html 339 bytes [emitted]
./node_modules/@cypress/webpack-dev-server/dist/browser.js 89 bytes [built] [code generated]
./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 872 bytes [built] [code generated]
./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js 483 bytes [built] [code generated]

WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/@cypress/webpack-dev-server/dist/browser.js (./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js) 2:30-110
Module not found: Error: Can't resolve 'ts-loader' in '<project root>'
resolve 'ts-loader' in '<project root>'
  Parsed request is a module
  using description file: <project root>/package.json (relative path: .)
    resolve as module
      looking for modules in <project root>/node_modules
        single file module
          using description file: <project root>/package.json (relative path: ./node_modules/ts-loader)
            no extension
              <project root>/node_modules/ts-loader doesn't exist
            .js
              <project root>/node_modules/ts-loader.js doesn't exist
        <project root>/node_modules/ts-loader doesn't exist
             <deleted local file folder scan data from here in the log> 

 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

ERROR in ./node_modules/@cypress/webpack-dev-server/dist/browser.js (./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js) 5:16-138
Module not found: Error: Can't resolve 'ts-loader' in '<project root>'
resolve 'ts-loader' in '<project root>'
  Parsed request is a module
  using description file: <project root>/package.json (relative path: .)
    resolve as module
      looking for modules in <project root>/node_modules
        single file module
          using description file: <project root>/package.json (relative path: ./node_modules/ts-loader)
            no extension
              <project root>/node_modules/ts-loader doesn't exist
            .js
              <project root>/node_modules/ts-loader.js doesn't exist
        <project root>/node_modules/ts-loader doesn't exist
        <deleted local file folder scan data from here in the log> 
 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

webpack 5.44.0 compiled with 2 errors and 2 warnings in 297 ms
ℹ ｢wdm｣: Failed to compile.
GET /__/ 200 4.253 ms - -
GET /__cypress/runner/cypress_runner.css 200 4.484 ms - -
GET /__cypress/runner/cypress_runner.js 200 2.149 ms - -
GET /chrome-variations/seed?osname=linux&channel=stable&milestone=92 304 571.657 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 741.219 ms - -
GET /__cypress/runner/fonts/mulish-latin-400-normal.woff2 200 2.145 ms - 31176
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 1.833 ms - 76120
GET /__cypress/runner/fonts/open-sans-latin-400-normal.woff2 200 2.429 ms - 14380
GET /__cypress/runner/fonts/mulish-latin-500-normal.woff2 200 2.448 ms - 31176
GET /v1/pages/ChRDaHJvbWUvOTIuMC40NTE1LjEwNxIeCcfYYc5uai7PEgUN3pTIUBIFDS-IPoISBQ2RYZVO?alt=proto 200 589.495 ms - -
GET /__cypress/iframes/<project root>/tests/unit/app.component.cy-spec.ts 200 6.452 ms - 339
GET /__cypress/iframes/<project root>/tests/unit/app.component.cy-spec.ts 304 4.231 ms - -
GET /__cypress/src/main.js 200 2.066 ms - -
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 0.586 ms - 13600
GET /__cypress/runner/fonts/mulish-latin-700-normal.woff2 200 0.474 ms - 31176
BROWSER EXITED SAFELY
COMPONENT TESTING STOPPED

Versions

Angular CLI: 12.1.3
Node: 16.3.0 (Unsupported)
Package Manager: npm 7.20.1
OS: linux x64

Angular: 12.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            12.1.3
@angular-devkit/schematics      12.1.3
@schematics/angular             12.1.3
rxjs                            6.6.7
typescript                      4.3.5

[KissBalazs]

Manually installing npm i -D ts-loader and npm i -D angular2-template-loader seems to solve the immediate issue with the error message.

However, my tests now produce "Expected 'styles' to be an array of strings."

I have tried to fix the issue by my webpack knowledge is quite short. changed

 {
        test: /(\.scss|\.sass)$/,
        exclude: [/node_modules/, /\.global\.scss$/],
         use: ['raw-loader', 'sass-loader'],

      },

to

{
test: /(\.scss|\.sass)$/,
exclude: [/node_modules/, /\.global\.scss$/],

use: ['to-string-loader', 'css-loader', 'sass-loader']
},

But now I have other errors ("The template specified for component AppComponent is not a string") so I gave up for now :(

My testfile is the same from the tutorial:

import { initEnv, mount } from 'cypress-angular-unit-test';
import { AppComponent } from '../../src/app/app.component';

describe('AppComponent', () => {
  it('shows the input', () => {
    // Init Angular stuff
    cy.log("start")
    initEnv(AppComponent);
    cy.log("1")
    // You can also :
    // initEnv({declarations: [AppComponent]});
    // initEnv({imports: [MyModule]});

    // component + any inputs object
    mount(AppComponent, { title: 'World' });
    // use any Cypress command afterwards
    cy.contains('Welcome to World!');
  });
});

[LeJeanbono]

Hi @KissBalazs, Keep raw-loader, you need to install v1 : "raw-loader": "1.0.0" I will improve ReadMe, thanks for your feedback !