Angular 和 Typescript 更新后找不到命名空间“MyApp" [英] Cannot find namespace 'MyApp' after Angular and Typescript update

问题描述

我有一个类型定义文件，其中我的应用程序的所有 dto 对象都暴露在全局范围内.

I have a type definition file where all dto objects for my app are exposed to global scope.

DtosGenerator.d.ts

DtosGenerator.d.ts

declare module MyApp.Rest.Dto {
   interface IAJsonDto {
   }
 }
 declare module MyApp.Rest.Dto.Post {
   interface ITest1PostDto extends MyApp.Rest.Dto.IAJsonDto {
    code: string;
 }
interface ITest2PostDto extends MyApp.Rest.Dto.IAJsonDto {
    id: number;
 }
interface ITest3PostDto extends MyApp.Rest.Dto.IAJsonDto {
    id: number;
}
  ....
}

并以下列方式消费.

file1.service.ts

file1.service.ts

import ITest3PostDto = MyApp.Rest.Dto.Post.ITest3PostDto;

我的应用程序是基于 Angular 框架构建的，我刚刚完成了从 Angular(8), Typescript(3.5.3) 到 Angular9,Typescript(3.6.4) 的迁移.在迁移之前，Dto 对象的消耗没有产生错误，一切似乎都很正常.迁移后，当应用程序构建在手表模式下运行

My app is build on Angular framework and I have just completed the migration from Angular(8), Typescript(3.5.3) to Angular9,Typescript(3.6.4) respectively. Before migration the consumption of the Dto objects produced no errors and everything seemed normal. After the migration, when the app is built on watch mode running the

ng build --extractCss=true --watch 命令，控制台输出'Cannot find namespace 'MyApp'.当我添加

ng build --extractCss=true --watch command, the console outputs 'Cannot find namespace 'MyApp'. When I add

/// <reference path="../../../../DtosGenerator.d.ts" /> 

在文件顶部不再产生错误.有没有办法在不添加引用路径的情况下保持我的代码在迁移之前的状态.

on top of the file the error is produced no more. Is there a way to keep my code as it was before the migration without adding the reference path.

谁能告诉我出了什么问题?

Could anybody tell me what goes wrong?

推荐答案

对于任何面临相同问题的人，我找到了解决方案.经过数小时的研究，我发现 Angular 自动更新(https://update.angular.io/)更改了 tsconfig.app.json 文件配置.

For anyone who faces of will face the same issue I found the solution. After hours of researching I found out that Angular automatic update (https://update.angular.io/) changed tsconfig.app.json file configuration.

迁移前的 tsconfig.app.json

tsconfig.app.json before migration

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
  "outDir": "../out-tsc/app",
  "types": [ "node" ],
  "typeRoots": [
     "node_modules/@types"
  ]
},
"exclude": [
  "test.ts",
  "**/*.spec.ts"
]
}

迁移后的tsconfig.app.json:

tsconfig.app.json after migration:

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
   "outDir": "../out-tsc/app",
   "types": [ "node" ],
   "typeRoots": [
     "node_modules/@types"         
   ]
},
"files": [
   "main.ts",
   "polyfills.ts"
 ],
"include": [
  "src/**/*.d.ts"
]
}

问题在于，在迁移之前，所有文件都包含在编译过程中，之后仅包含files"数组中指定的 2 个文件和 src 目录中的所有类型定义文件.'DtosGenerator.d.ts' 文件位于 src 文件夹的根目录中，因此需要进行一些修改以生成最终正确的 tsconfig.app.json 文件.

The problem is that before migration all files were included in the compilation process and after it only the 2 files specified in the "files" array and all type definition files inside src directory are included. 'DtosGenerator.d.ts' file is located in the root of src folder so some mofications needed to be done to produce the final correct tsconfig.app.json file.

tsconfig.app.json 最终版

tsconfig.app.json final

{
   "extends": "../tsconfig.json",
   "compilerOptions": {
   "outDir": "../out-tsc/app",    
   "typeRoots": [
      "node_modules/@types"      
   ]
},
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
     "*.d.ts"
  ]
}

这篇关于Angular 和 Typescript 更新后找不到命名空间“MyApp"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！