Angular 7.x升级至13.x后编译错误的正确修复方案

一、修复tsconfig.json核心配置 #

原配置缺少Angular 13编译必需的关键选项，替换为以下完整配置：

{
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "target": "es2015",
    "module": "es2020",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "typeRoots": ["node_modules/@types"],
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {
      "@shared/*": ["src/app/shared/*"],
      "@core/*": ["src/app/core/*"]
    },
    "strict": false,
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "preserveWhitespaces": true,
    "enableIvy": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

二、解决自定义库依赖错误 #

出现@my-custom-lib/ng-common依赖内部路径的错误，是因为Angular 13禁止直接引用框架内部src目录的私有API：

• 升级@my-custom-lib/ng-common和@my-custom-lib-2/ng-common到兼容Angular 13的版本，确保它们使用Angular公开API（比如从@angular/forms导入ControlValueAccessor，而非@angular/forms/src/...）
• 若暂时无法升级自定义库，可通过skipLibCheck: true临时跳过类型检查（不推荐长期使用）

三、修复CoreModule识别问题 #

提示CoreModule不是NgModule类：

1. 检查src/app/core/core.module.ts文件，确保正确导入并使用@NgModule装饰器：

import { NgModule } from '@angular/core';

@NgModule({
  imports: [],
  exports: [],
  providers: []
})
export class CoreModule { }

2. 确认路径别名@core/*指向的路径正确，确保@core/core.module对应src/app/core/core.module.ts文件（注意文件名大小写，区分大小写系统需严格匹配）

四、清理遗留依赖与升级配套库 #

1. 移除废弃的@angular/http，替换为@angular/common/http：
   • 全局替换代码中import { ... } from '@angular/http'为import { ... } from '@angular/common/http'
   • 执行命令卸载旧包：npm uninstall @angular/http
2. 升级@angular/cdk到与Angular核心版本一致的13.x：

   npm install @angular/cdk@13.3.11 --save
   

3. 清理缓存与重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   npm cache clean --force
   

五、验证修复 #

执行以下命令重新启动项目：

ng serve --open

内容的提问来源于stack exchange，提问作者Flavio