使用 WebStorm 的 Angular 模板中未解析的变量/函数答案

【问题标题】：Unresolved variables/functions in Angular template using WebStorm使用 WebStorm 的 Angular 模板中未解析的变量/函数
【发布时间】：2022-12-23 18:50:36
【问题描述】：

我使用 WebStorm 在 Angular 中进行开发。

最近我从单项目模型切换到Angular提出的多项目模型，所以我最终得到了如下结构：

my-solution
    dist
    node_modules
    projects
        my-project
        my-library
    [multiple config files]

在我的tsconfig.json 文件中，我有以下别名：

        "paths": {
            "my-library": ["dist/my-library/my-library", "dist/my-library"],
            "@my-project/*": ["projects/my-project/src/*"]
        }

现在，我有一个组件（在我的项目中）继承自我的项目中的抽象类，它本身继承自我的库中的抽象类。比方说：

export abstract class BaseAbstractStep implements OnInit {
 public propertyA;
}

import { BaseAbstractStep } from 'my-library';

export abstract class AbstractStep extends BaseAbstractStep{
 public propertyB;
}

import { AbstractStep } from '@my-project/path/to/component';

export class Step extends AbstractStep {
 public propertyC;
}

当我在 Step with WebStorm 的 Angular 模板中时，propertyB 和 propertyC 将被正确解析，但 WebStorm 显示 propertyA 的错误无法解析。

我注意到，如果我将 AbstractStep 中的导入更改为

import { BaseAbstractStep } from "../../../../../../my-library/src/lib/modules/path/to/component";

然后 WebStorm 将能够解析模板中的所有变量和函数（但随后它将无法编译并会产生其他问题）。

有什么办法解决这个问题吗？

【问题讨论】：

您使用什么 IDE 版本？类似问题（youtrack.jetbrains.com/issue/WEB-40709）已在 2020.1 中解决。如果升级到最新版本没有帮助，请提交工单至youtrack.jetbrains.com/issues/WEB
@lena 我正在使用 WebStorm 2021.2.3 Build #WS-212.5457.55； JetBrains Toolbox 没有建议任何新版本，所以我会按照你的建议创建一张票
我有同样的问题。有没有解决的办法？在 JetBrains Rider 2022.1.2 和 WebStorm 2022.1.3 中都会发生。组件 Typescript 文件工作正常，但 HTML 模板文件无法解析另一个项目中的基类变量。有趣的是，它确实适用于我在 WebStorm 中的一些同事。

标签： angular webstorm jetbrains-ide

【解决方案1】：

我有类似的问题，IntelliJ 在某些 HTML 模板中显示“未解析的函数或方法”和“未解析的变量或类型”。

我发现它是组件类定义中的损坏引用。前导点丢失。它被定义为

@Component({
    templateUrl: '/login.component.html'
})

代替

@Component({
    templateUrl: './login.component.html'
})

它在 ng serve 运行期间以某种方式正常工作，但被 IntelliJ 显示为错误。

（Windows 10、Angular 14、节点 16、npm 8）

【讨论】：