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:fakepathsrcclientsrc'

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

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

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

之后：

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