getting errors in index.html #97

Jyotsnakathuria · 2017-07-09T18:49:33Z

After installing Angular 1.3 support in my eclipse (oxygen). I am getting errors in my index.html for all the tags like for head, title etc..
getting error ts cannot identified these tags. i checked setting in preferences window also but there is n o issue in that.
Can you suggest a solution for this.

angelozerr · 2017-07-09T20:04:42Z

I think it's because of angular/language-service which is now consumed inside HTML file.

Could you share please your project (or a part of you rproject) with node_modules etc which causes problem? Thanks.

Could you try to create a new Angular project to check if you have this problem?

rubensa · 2017-07-10T07:30:41Z

I'm experiencing the same behavior.

Just created a new Angular project with latest version from http://oss.opensagres.fr/angular2-eclipse/1.3.0-SNAPSHOT/
After project creation (with Embedded node.js and Installed AngulaCLI 1.0.0) ends and a refresh issued (to update created files in Project Explorer) if I open any html file (index.html or app.component.html...) It shows errors in all html lines.

For example in index.html:

Line1: <!doctype html>
Line2: <html lang="en">
...

Line1: [ts] Cannot find type 'doctype'.
Line2: [ts] Cannot find type 'html'.
Multiple annotations found at this line:
- [ts] Cannot find tag 'lang'.
- [ts] '>' expected.
...

angelozerr · 2017-07-10T08:13:10Z

Thanks @rubensa for your info. I think the problem is because you are using AngulaCLI 1.0.0 which doesn't install @angular/language-service in your node_modules. The last version of @angular/cli is 1.1.3 and install @angular/language-service.

To fix this issue you should do

npm install @angular/language-service to have this in your Eclipse project.

at hand. After that you will not error in your HTML files and you will benefit with completion, validation, hover, hyperlink inside your HTML Angular templates

rubensa · 2017-07-10T08:49:01Z

Hello @angelozerr

I issued (version 2.3.4 installed after that):
npm install typescript

Then (version 4.2.6 installed after that):
npm install @angular/language-service

Refreshed project but same behavior as before...

Should I close and reopen Eclipse o something like that? Or is that only going to work if installed globally?

Thanks.

angelozerr · 2017-07-10T08:59:40Z

I issued (version 2.3.4 installed after that): npm install typescript

It should be 2.4.1, no?

Should I close and reopen Eclipse o something like that?

I think your tsserver is not stopped. To stop it, you can add space in your tsconfig.json and save it.

rubensa · 2017-07-10T09:21:57Z

Ok, started again from clean Eclipse Oxigen JEE version.
Installed all plugins from http://oss.opensagres.fr/angular2-eclipse/1.3.0-SNAPSHOT/.
From Angular perspective --> New --> Angular project
Embedded Node.js (node-v694-linux-x64)
Install Angular CLI (1.2.0 which I think is the latest stable, isn't it?)
Let's the project finish download dependencies, refresh project, open index.html and... same error on all lines, as before...

rubensa · 2017-07-10T09:32:52Z

Save behavior using Angular CLI 1.1.3

rubensa · 2017-07-10T10:08:19Z

Some extra info on this...

I tried changing TypeScript preferences.

Preferences --> JavaScript --> TypeScript --> Runtime:
Checked "Emulate load of tserver plugin?" and "Trace tsserver request/response on console?"

When I open index.html I get an error telling me that tsserver-plugins can't be found.

As I can see, there is no tsserver-plugins folder under **workspace/.metadata/.plugins/ts.respository

/repositories/2.4.1**.

angelozerr · 2017-07-10T10:15:31Z

tsconfig.json must b eupdated too with :

{
  "compilerOptions": {
...
    "plugins": [
      { "name": "@angular/language-service"},
    ]
  }
}

But it seems that problem comes from the @angular/language-service When HTML file is not an Angular Template, this plugin seems delegate validation to the TypeScript validation and we have this problem.

But for your HTML Angular template it should work, no?

I must study more if problem comes from my integration of @angular/language-service or if it's a bug of @angular/language-service

rubensa · 2017-07-10T10:38:50Z

Ok, think I'm missing something...

I checked https://github.com/angelozerr/tsserver-plugins , so done a:

npm install tsserver-plugins

then added to tsconfig.json:

"plugins": [
  	{ "name": "tslint-language-service"}, 
  	{ "name": "@angular/language-service"}
  ],

And from terminal run:

tsserver-plugins

Now It seems that there are no more error on app.comonent.html (still errors on index.html -think those are what you are talking about-).

So... I thought that I didn't need to do any of this steps to have intellisense and autocompletion... thought It was available by default only by installing the plugins in Eclipse...

rubensa · 2017-07-10T10:49:09Z

Ummm... confused...

Stopped tsserver-plugins, keept tsconfig.json modifications and seems that app.component.html still validates...

angelozerr · 2017-07-10T16:35:22Z

For the moment none solution. We must wait for angular/vscode-ng-language-service#43 (comment)

lornewilson · 2017-07-10T22:11:32Z

Two comments:

I'm seeing this same issue on that latest Spring Tool Suite (3.9.0.RELEASE) that was released today. It is based on Eclipse Oxygen (4.7.0)
Is this actually two problems? One for non-attached html files and one for those attached to a component?

I have attempted the above comments from rubensa with no success getting my component html to validate.

angelozerr · 2017-07-10T23:26:25Z

@lornewilson please see angular/vscode-ng-language-service#43 (comment)

I'm waiting for work of TypeScript to fix this problem, or perhaps we should disable language service for HTML for the moment?

angelozerr · 2017-07-11T00:07:32Z

An ugly fix I have found is to edit the typescript/lib/tsserver.js and update at hand ProjectService.prototype.openClientFileWithNormalizedPath by checking on open file to ignore the project if it's an HTML file which is not an HTML angular template after the project was getted:

 if (ts.fileExtensionIs(fileName, ".html") && !project.getExternalFiles().contains(fileName)) {
  return;
}

In other words, add this previous code like this:

ProjectService.prototype.openClientFileWithNormalizedPath = function (fileName, fileContent, scriptKind, hasMixedContent, projectRootPath) {
                var configFileName;
                var configFileErrors;
                var project = this.findContainingExternalProject(fileName);
                if (!project) {
                    (_a = this.openOrUpdateConfiguredProjectForFile(fileName, projectRootPath), configFileName = _a.configFileName, configFileErrors = _a.configFileErrors);
                    if (configFileName) {
                        project = this.findConfiguredProjectByProjectName(configFileName);
                    }
                }
                if (ts.fileExtensionIs(fileName, ".html") && !project.getExternalFiles().contains(fileName)) {
                    return;
                }
......

rubensa · 2017-07-11T07:17:12Z

Hi @angelozerr

I tried your workaround and it worked.

A side note to newcomers (like me): Please note that if using Embedded TypeScript runtime you must modify tsserver.js from workspace/.metadata/.plugins/ts.respository/repositories/2.4.1/node_modules/typescript/lib/tsserver.js, not from project node_modules.

lesaber · 2017-07-11T20:52:49Z

Hi @angelozerr, I think you meant typescript/lib/tsserver.js ? - but yes, it worked and index.html only has a unknown-tag warning now.

Hi @rubensa - that was helpful. I used Embedded and your suggestion worked.

angelozerr · 2017-07-12T07:47:08Z

It seems that fix I have given, breaks the completion, validation etc for HTML Angular template.

Here a new fix which is should work:

Update Session.prototype.getDiagnosticsWorker by adding:

                if (ts.fileExtensionIs(file, ".html") &&
                    project.getExternalFiles && project.getExternalFiles() && project.getExternalFiles().map &&
                    !ts.contains(project.getExternalFiles(), file)) {
                    return [];

like this:

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

A side note to newcomers (like me): Please note that if using Embedded TypeScript runtime you must modify tsserver.js from workspace/.metadata/.plugins/ts.respository/repositories/2.4.1/node_modules/typescript/lib/tsserver.js, not from project node_modules.

Thanks @rubensa for your comment.

Hi @angelozerr, I think you meant typescript/lib/tsserver.js ?

Yes it is that.

rubensa · 2017-07-12T09:03:00Z

Hello @angelozerr

I think that you are right and the provided solution didn't work (as simple disabled TypeScript for all .html files).

I tried the new fix (un-doing the previous) and code completion seems to be working.

But, why I'm getting "Unknown template directive event 'ngif'" warning (among other "Undefined attribute name (attributename)" or "Undefined ng property binding 'propertyname'") , in the following html file, on lines 9 and 10?

O the "Unknown tag (tagname)" on lines 9, 13 and 17 in this html file?

NOTE: The application in the screen-shots is working as expected (so I think that It's not a codding problem).

Sorry if this is a very "basic" question...

probert94 · 2017-07-12T13:10:28Z

@rubensa Did you try to do a AOT-Build using ng build --prod ?
If I remember it correctly, I got similar errors/warnings when executing an AOT-Build.
If thats the case, then there is probably something wrong with your project, allthought it works with JIT.
If AOT-Build works, then we need to investigate a bit more.

angelozerr · 2017-07-12T14:14:29Z

But, why I'm getting "Unknown template directive event 'ngif'" warning (among other "Undefined attribute name (attributename)" or "Undefined ng property binding 'propertyname'") , in the following html file, on lines 9 and 10?

Yes it's normal. Thoses errors comes from my Angular validator that I have developed and WTP Validator (Undefined attribute name (attributename)) but I would like desactivate it when Angular Language Service is activated. My big problem is I don't know on client side if HTML file is an angular template or not (it's the TypeScript plugin of Angular language service which know that)

Jyotsnakathuria · 2017-07-12T18:31:55Z

Can you tell which fix you have tried that worked. It will be very helpful for me too.

…

On Jul 12, 2017 2:33 PM, "rubensa" ***@***.***> wrote: Hello @angelozerr <https://github.com/angelozerr> I think that you are right and the provided solution didn't work (as simple disabled TypeScript for all .html files). I tried the new fix (un-doing the previous) and code completion seems to be working. But, why I'm getting "*Unknown template directive event 'ngif'*" warning (among other "*Undefined attribute name (attributename)*" or "*Undefined ng property binding 'propertyname'*") , in the following html file, on lines 9 and 10? [image: screenshot from 2017-07-12 10-44-57] <https://user-images.githubusercontent.com/1469340/28109742-71786d86-66f0-11e7-8221-78b4e68efd85.png> O the "*Unknown tag (tagname)*" on lines 9, 13 and 17 in this html file? [image: screenshot from 2017-07-12 10-58-38] <https://user-images.githubusercontent.com/1469340/28109939-13af87f6-66f1-11e7-823f-317c1faf800f.png> *NOTE*: The application in the screen-shots is working as expected (so I think that It's not a codding problem). Sorry if this is a very "basic" question... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#97 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AcotI7_WJ9Uyy_dRRk6I8c8zpfatthSAks5sNIvFgaJpZM4OSJgI> .

lesaber · 2017-07-12T19:58:03Z

@angelozerr

Second solution you provided for tsserver.js worked. Thank you.

rubensa · 2017-07-13T07:25:59Z

Hi @Springrbua

@rubensa Did you try to do a AOT-Build using ng build --prod ?
If I remember it correctly, I got similar errors/warnings when executing an AOT-Build.
If thats the case, then there is probably something wrong with your project, allthought it works with JIT.
If AOT-Build works, then we need to investigate a bit more.

Just tried ng build --prod and works as expected (so no code problem). Seen @angelozerr comment:

Yes it's normal. Thoses errors comes from my Angular validator that I have developed and WTP Validator (Undefined attribute name (attributename)) but I would like desactivate it when Angular Language Service is activated. My big problem is I don't know on client side if HTML file is an angular template or not (it's the TypeScript plugin of Angular language service which know that)

seems that It's a known issue not yet solved.

To @Jyotsnakathuria

Can you tell which fix you have tried that worked. It will be very helpful for me too.

The second solution provided by @angelozerr :

Update Session.prototype.getDiagnosticsWorker by adding:

                if (ts.fileExtensionIs(file, ".html") &&
                    project.getExternalFiles && project.getExternalFiles() && project.getExternalFiles().map &&
                    !ts.contains(project.getExternalFiles(), file)) {
                    return [];

like this:

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

angelozerr · 2017-07-31T09:55:08Z

To fix with clean mean this issue, we must wait for microsoft/TypeScript#17151

sir-captainmorgan21 · 2017-11-01T13:01:25Z

@angelozerr I am looking at trying your second solution, but I dont have the path you mentioned in my workspace directory. I can only find the file in the following path.

angelozerr · 2017-11-01T16:00:40Z

@zsmorgan21 you can find folder where tsserver is hosted with Project / Properties:

wuzhen0808 · 2018-01-20T12:44:49Z

To avoid seeing those red underlines and red marks, is there any way to ignore all the errors? Any option to disable the validation of html files?

tibistibi · 2018-03-18T17:51:54Z

its a discussion of a year. and the error still seems to be here. what is the latest/best solution i should use?

tibistibi · 2018-03-18T17:54:17Z

i see good news:

TypeScript 2.7 is now available. Download our latest version today!

angelozerr · 2018-03-18T21:53:09Z

@tibistibi without fix of microsoft/TypeScript#17151 I cannot do nothing

tibistibi · 2018-03-18T22:02:44Z

darn it is set on milestone 2.9 now :(

tibistibi · 2018-03-25T13:14:39Z

the errors seems the be gone after i did this:

edit this file:
/workspace/.metadata/.plugins/ts.repository/repositories/2.4.1/node_modules/typescript/lib/tsserver.js

            if (ts.fileExtensionIs(file, ".html") &&
                project.getExternalFiles && project.getExternalFiles() && project.getExternalFiles().map &&
                !ts.contains(project.getExternalFiles(), file)) {
                return [];
            }

as mentioned above making this:

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

tibistibi · 2018-03-25T13:15:27Z

i could not find from eclipse which tsserver.js file was used so i tried a couple of them this last one seems to have done the trick

tibistibi · 2018-03-25T13:17:20Z

should i still have code completion?

rubensa · 2018-04-03T09:11:09Z

@tibistibi
No, it seems that if you try the fix you avoid all the red underlines but you miss code completion on html files.

zygimantus · 2018-06-04T14:08:12Z

I am facing the same issue and I can approve that @tibistibi workaround works.

tibistibi · 2018-06-04T15:12:24Z

😄

any progress on this?

angelozerr · 2018-06-04T15:20:47Z

Waiting for microsoft/TypeScript#17151

janakiram0035 · 2018-06-20T05:35:38Z

even second solution also not working for me..

He3F · 2018-07-09T20:03:37Z

They just keep moving the fix to the next release, and then the next again :(

tibistibi · 2018-07-09T20:08:27Z

thanks for the update....

angelozerr mentioned this issue Aug 4, 2017

HTML Editor shows Typescript errors #105

Closed

angelozerr mentioned this issue Aug 16, 2017

Angular template editor doesn't work on linux #109

Closed

angelozerr mentioned this issue Oct 2, 2017

Getting [ts] errors on all of my HTML files #112

Open

angelozerr mentioned this issue Mar 4, 2019

Add Angular support in editor (done in TypeScript files, TODO in HTML files) eclipse-wildwebdeveloper/wildwebdeveloper#138

Closed

getting errors in index.html #97

getting errors in index.html #97

Comments

Jyotsnakathuria commented Jul 9, 2017

angelozerr commented Jul 9, 2017 • edited Loading

rubensa commented Jul 10, 2017

angelozerr commented Jul 10, 2017 • edited Loading

rubensa commented Jul 10, 2017

angelozerr commented Jul 10, 2017 • edited Loading

rubensa commented Jul 10, 2017

rubensa commented Jul 10, 2017

rubensa commented Jul 10, 2017

angelozerr commented Jul 10, 2017 • edited Loading

rubensa commented Jul 10, 2017

rubensa commented Jul 10, 2017

angelozerr commented Jul 10, 2017

lornewilson commented Jul 10, 2017

angelozerr commented Jul 10, 2017 • edited Loading

angelozerr commented Jul 11, 2017 • edited Loading

rubensa commented Jul 11, 2017

lesaber commented Jul 11, 2017

angelozerr commented Jul 12, 2017

rubensa commented Jul 12, 2017

probert94 commented Jul 12, 2017

angelozerr commented Jul 12, 2017 • edited Loading

Jyotsnakathuria commented Jul 12, 2017 via email

lesaber commented Jul 12, 2017

rubensa commented Jul 13, 2017

angelozerr commented Jul 31, 2017

sir-captainmorgan21 commented Nov 1, 2017

angelozerr commented Nov 1, 2017

wuzhen0808 commented Jan 20, 2018

tibistibi commented Mar 18, 2018

tibistibi commented Mar 18, 2018

angelozerr commented Mar 18, 2018

tibistibi commented Mar 18, 2018

tibistibi commented Mar 25, 2018

tibistibi commented Mar 25, 2018

tibistibi commented Mar 25, 2018

rubensa commented Apr 3, 2018

zygimantus commented Jun 4, 2018

tibistibi commented Jun 4, 2018

angelozerr commented Jun 4, 2018

janakiram0035 commented Jun 20, 2018

He3F commented Jul 9, 2018

tibistibi commented Jul 9, 2018

angelozerr commented Jul 9, 2017 •

edited

Loading

angelozerr commented Jul 10, 2017 •

edited

Loading

angelozerr commented Jul 10, 2017 •

edited

Loading

angelozerr commented Jul 10, 2017 •

edited

Loading

angelozerr commented Jul 10, 2017 •

edited

Loading

angelozerr commented Jul 11, 2017 •

edited

Loading

angelozerr commented Jul 12, 2017 •

edited

Loading