Angular2 Eclipse: HTML editor in Eclipse Oxygen shows errors from TypeScript

Question

I have installed the Angular2 Eclipse plugin for Eclipse Oxygen. I have created an angular2 project with the angular CLI and then opened the project in eclipse.

I tried to convert the project to an Angular project, but when I right-click the project and go to configuration there is no such option. the only option is "Configure and detect nested projects.." which opens the import wizard.

When I open html template files in src/app/... e.g. my databinding.component.html, the HTML editor shows ugly errors:

When I hover over the errors I see that all have the format:

[ts] <error message>

some examples:

[ts] Cannot find name 'aNumber'. Did you mean 'Number'?
[ts] Cannot find name 'innerText'.
[ts] Cannot find name 'h4'.

But the errors are incorrect. I can start the app with ng-serve without problems.

How can I configure eclipse so that these false error messages disappear? Thanks :)

edit#1

here is my eclipse typescript configuration, I don't see what I could change here..

Answer 1

As @Angelo mentioned, this bug is known and there is a temporal workaround.

You need to go to this file C:\Users\MyUser\eclipse-workspace\.metadata\.plugins\ts.repository\repositories\2.4.1\node_modules\typescript\lib\tsserver.js and chage this part of code:

    Session.prototype.getDiagnosticsWorker = function (args, isSemantic, selector, includeLinePosition) {
        var _a = this.getFileAndProject(args), project = _a.project, file = _a.file;
        if (isSemantic && isDeclarationFileInJSOnlyNonConfiguredProject(project, file)) {
            return [];
        }
        var scriptInfo = project.getScriptInfoForNormalizedPath(file);
        var diagnostics = selector(project, file);
        return includeLinePosition
            ? this.convertToDiagnosticsWithLinePosition(diagnostics, scriptInfo)
            : diagnostics.map(function (d) { return formatDiag(file, project, d); });
    };

into this one:

    Session.prototype.getDiagnosticsWorker = function (args, isSemantic, selector, includeLinePosition) {
        var _a = this.getFileAndProject(args), project = _a.project, file = _a.file;
        if (isSemantic && isDeclarationFileInJSOnlyNonConfiguredProject(project, file)) {
            return [];
        }
        if (ts.fileExtensionIs(file, ".html") &&
            project.getExternalFiles && project.getExternalFiles() && project.getExternalFiles().map &&
            !ts.contains(project.getExternalFiles(), file)) {
            return [];
        }
        var scriptInfo = project.getScriptInfoForNormalizedPath(file);
        var diagnostics = selector(project, file);
        return includeLinePosition
            ? this.convertToDiagnosticsWithLinePosition(diagnostics, scriptInfo)
            : diagnostics.map(function (d) { return formatDiag(file, project, d); });
    };