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 项目。我收到以下错误：

EROR: ...component.ts:12:27 - error TS2503: Cannot find namespace 'Common'.

两个项目的 typescript 配置相同：

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 核心 WebApplication。我们正在为 visual studio 创建带有 TypeScript 定义生成器扩展的 TypeScript 定义文件。我们将 ViewModels 生成到 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"]
        }
    }
});

}

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

Angular library project build fails in multi-project workspace - cannot find namespace

angular

typescript

typescript-typings

multi-project