问题描述
-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"]
}
}
});
}