多项目工作区中的 Angular 库项目构建失败 - 找不到命名空间

Question

我有以下 Angular 多项目文件结构：

-AngularMultiProject
  -projects
     -mobile-app
     -shared-lib
     -web-app
  -ViewModels
     -Common
        -myviewmodel1.d.ts
        -myviewmodel2.d.ts

shared-lib 项目和 web-app 项目正在引用应用程序根文件夹中的视图模型。 我可以构建 web-app 项目，但不能构建 shared-lib 项目。我收到以下错误：

错误：...component.ts:12:27 - 错误 TS2503：找不到命名空间“Common”。

两个项目的打字稿配置是一样的：

AngularMultiProject/tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    //"downlevelIteration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom",
      "es2019"
    ],
    "paths": {
      "shared": [
        "dist/shared/shared",
        "dist/shared"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

shared-lib/tsconfig.lib.json 和 web-app/tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "types": []
  }, 
  "include": [
    "src/**/*.d.ts",
    "../../ViewModels/**/*.d.ts"
  ]
}

Answer 1

经过长时间的反复试验，我想通了：

您必须将包含所有模块/接口定义的 .ts 文件放入每个 Angular 项目文件夹中，并从您的库/项目的至少一个模块文件中引用它。

.ts 文件必须具有以下结构：

declare module Common {
    export  interface MyAVM {
            id: number;
            name:string;
        }

    export interface MyBVM {
        ...
    }
}

declare module CommonB {
    export  interface MyCVM {
            id: number;
            name:string;
        }

    export interface MyDVM {
        ...
    }
}

您必须从至少一个模块文件中引用此文件，如下所示：

/// <reference path="../viewmodels.ts" />

我们正在使用带有 AspNetCore.SpaServices 模板的 ASP.Net Core WebApplication。我们正在使用 Visual Studio 的 TypeScript 定义生成器扩展创建 typescript 定义文件。我们将 ViewModels 生成到 webapp 根目录下的 ViewModels 文件夹中。

我创建了一个 grunt 脚本来提取所有生成的 d.ts 文件并将 viewmodels.ts 创建到所有有角度的项目文件夹中：

grunt.registerMultiTask("generateModuleFiles", "Create reference ts for viewmodels", function () {
    var paths = grunt.file.expand(this.data.paths),                        
        moduleName = '',
        moduleFileContent = '',            
        completeModuleContent = '';

    paths.forEach(function (path) {
        var pathParts = path.split('/');
        if (moduleName !== pathParts[pathParts.length - 2]) {
            if (moduleName.length > 0) {
                moduleFileContent += "\n}";
                grunt.log.write(moduleName + "\n");                    
                moduleFileContent = moduleFileContent.replace(moduleName + '.', '');
                completeModuleContent += moduleFileContent;
            }                
            moduleName = pathParts[pathParts.length - 2];
            moduleFileContent = 'declare module ' + moduleName + ' {\n';
        }
        var fileContent = grunt.file.read(path)
        moduleFileContent += "export " + fileContent + "\n";
    });
    if (moduleName.length > 0) {
        moduleFileContent += "\n}";
        moduleFileContent = moduleFileContent.replace(moduleName + '.', '');
        grunt.log.write(moduleName + "\n");
        completeModuleContent += moduleFileContent;            
    }

    grunt.file.write('ClientApps/projects/shared/src/viewmodels.ts', completeModuleContent);
    grunt.file.write('ClientApps/projects/WebApp/src/viewmodels.ts', completeModuleContent);        
});

grunt.initConfig({        
    watch: {
        viewmodels: {
            files: [
                './ViewModels/**/*.d.ts'
            ],
            tasks: [
                'generateModuleFIles:all'
            ]
        }
    },
    generateModuleFiles: {
        all: {
            paths: ["ViewModels/**/*.d.ts"]
        }
    }
});

}