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

如何解决Angular 库项目构建在多项目工作区中失败 - 找不到命名空间

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

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

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

错误：...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"
  ]
}

解决方法

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

您必须将包含所有模块/接口定义的 .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 Definition Generator 扩展创建打字稿定义文件。我们将 ViewModel 生成到 webapp 根目录中的 ViewModels 文件夹中。

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

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"]
        }
    }
});

}