Testing angular components outside of main project folder: module not found raw-loader

Question

So I want to run ng test and include tests in a folder next to the projectfolder.

mainproject/
|-- src/
|   |-- app/
|   |   |-- home/
|   |   |   |-- home.component.spec.ts  
|   |   |-- app-main.component.spec.ts
|   |-- test.ts
|   |-- tsconfig.spec.json
|-- node_modules/
|-- angular.json
|-- package.json
|-- tsconfig.json
components/
|-- common/
    |-- control-bar/
        |-- control-bar.component.ts
        |-- control-bar.component.spec.ts

When I run ng test without including the other tests in the components folder it works as intended, but when I try to include the other components ng test fails with the following error.

ERROR in ../components/common/control-bar/control-bar.component.ts
Module not found: Error: Can't resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
  Parsed request is a module
  No description file found
  resolve as module
    absolutepath\repos\components\common\control-bar\node_modules doesn't exist or is not a directory
    absolutepath\repos\components\common\node_modules doesn't exist or is not a directory
    absolutepath\repos\components\node_modules doesn't exist or is not a directory
    absolutepath\repos\node_modules doesn't exist or is not a directory
    absolutepath\node_modules doesn't exist or is not a directory
    C:\Users\user\Desktop\node_modules doesn't exist or is not a directory
    C:\Users\user\node_modules doesn't exist or is not a directory
    C:\Users\node_modules doesn't exist or is not a directory
    C:\node_modules doesn't exist or is not a directory
    looking for modules in absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules
      using description file: absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\package.json (relative path: ./node_modules)
        using description file: C:\Users\user\Desktop\folder absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\package.json (relative path: ./node_modules/raw-loader)
          no extension
            absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader doesn't exist
          .js
            absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader.js doesn't exist
          .json
            absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader.json doesn't exist
          as directory
            absolutepath\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader doesn't exist
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\package.json]
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\node_modules]
[C:\Users\user\Desktop\folder\repos\components\common\node_modules]
[C:\Users\user\Desktop\folder\repos\components\node_modules]
[C:\Users\user\Desktop\folder\repos\node_modules]
[C:\Users\user\Desktop\folder\node_modules]
[C:\Users\user\Desktop\node_modules]
[C:\Users\user\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader.js]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\@angular-devkit\build-angular\node_modules\raw-loader.json]
 @ ../components/common/control-bar/control-bar.component.ts 13:34-85
 @ ../components/common/control-bar/control-bar.component.spec.ts
 @ ./src/test.ts

So raw-loader seems to be missing or it can't find it. To be clear there is only 1 node_modules in this setup and it's inside the mainproject folder.

https://stackoverflow.com/questions/47364840/angular-cli-how-to-pick-up-spec-ts-files-outside-of-the-src-folder See if that helps — AliF50, Sep 11 '20 at 12:50

mark · Answer 1 · 2021-02-25T07:18:56.543

I'm having the exact same issue and I've abandoned the search for a proper solution. For now I'm making it work by making sure the dependencies of the library are installed separately (so having a second node_modules folder in the library).

Since there is nothing to be found on the subject and the official angular documentation for creating libraries mentions that it is required for libraries to be built:

Build the library. You cannot use a library before it is built.

I'm assuming dynamically linking to unbuilt libraries without its own node_modules is simply unsupported (even though it works fine as long as there are no component classes imported in the library).

Testing angular components outside of main project folder: module not found raw-loader

1 Answers1