webpacker 5.x 无法编译 Angular 13 应用程序

Question

完全按照https://github.com/rails/webpacker/tree/5-x-stable页面上的分步安装说明进行操作后，出现以下编译错误：

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 文件内容为：

{
  "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"
  }
}

有时它会抱怨找不到 @angular/core 模块。

ModuleNotFoundError：未找到模块：错误：无法解析“@angular/core”

Answer 1

在 Angular 13 迁移后也遇到了路径解析问题。 得到：

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

在我的情况下，"baseUrl" 中的 tsconfig.json 导致了问题。我怀疑这是因为从 Angular 13 开始，它有自己的目录来满足内部需求，该目录位于项目根目录中的 .angular 文件夹中。因此，正确的项目根路径现在很重要，以便获得正确的路径解析。

之前：
(tsconfig.json 配置摘录)

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

之后：

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