webpacker 5.x can't compile Angular 13 application

Question

After following exactly, step by step installation instructions from the https://github.com/rails/webpacker/tree/5-x-stable page I got following compilation error:

Compiling...
Compilation failed:
warning package.json: No license field
ModuleNotFoundError: Module not found: Error: Can't resolve '@angular/compiler' in '/home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/@angular/platform-browser-dynamic/fesm2015'
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/webpack/lib/Compilation.js:925:10
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/neo-async/async.js:2830:7
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/neo-async/async.js:6877:13
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/enhanced-resolve/lib/Resolver.js:285:5


$ node -v
v12.22.7
$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.0.0-rc.2
Node: 12.22.7
Package Manager: yarn 1.22.15
OS: linux x64

Angular: 13.0.0
... common, compiler, core, platform-browser
... platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.0-rc.2 (cli-only)
@angular-devkit/core         13.0.0-rc.2 (cli-only)
@angular-devkit/schematics   13.0.0-rc.2 (cli-only)
@schematics/angular          13.0.0-rc.2 (cli-only)
rxjs                         7.4.0
typescript                   4.4.4
webpack                      4.46.0

$ rails -v
Rails 5.2.6

$ ruby -v
ruby 2.7.0p0

package.json file contents is:

{
  "dependencies": {
    "@angular/common": "^13.0.0",
    "@angular/compiler": "13.0.0",
    "@angular/core": "13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@babel/preset-typescript": "^7.16.0",
    "@rails/webpacker": "5.4.3",
    "core-js": "^3.19.1",
    "rxjs": "^7.4.0",
    "typescript": "^4.4.4",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

sometimes it complaints about @angular/core module which can't be found.

ModuleNotFoundError: Module not found: Error: Can't resolve '@angular/core' in

Answer 1

Had an issue with path resolution after Angular 13 migration as well. Was getting:

Error: Module not found: Error: Can't resolve '~environments/environment.dev' in 'C:\fakepath\src\client\src'

In my case "baseUrl" in tsconfig.json was causing the problem. I suspect that is because since Angular 13, it has its own directory for inner needs, which is located in the project root at .angular folder. Therefore proper project root path matters now, in order to have proper path resolution.

Before:
(tsconfig.json config excerpt)

{
  "compilerOptions": {
     "baseUrl": "src",
     "paths": {
       "~*": [
         "*"
       ]
     }
   }
}

After:

{
  "compilerOptions": {
     "baseUrl": "./",
     "paths": {
       "~*": [
         "src/*"
       ]
     }
   }
}