getting errors in index.html

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.

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?

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.
...

@rubensa

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

@angelozerr

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.

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.

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...

Save behavior using Angular CLI 1.1.3

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**.

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

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...

Ummm... confused...

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

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

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.

@lornewilson

@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?

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

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?

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

i see good news:

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

@tibistibi

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

darn it is set on milestone 2.9 now :(

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

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

should i still have code completion?

@tibistibi

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

@tibistibi

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

😄

any progress on this?

Waiting for microsoft/TypeScript#17151

even second solution also not working for me..

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

thanks for the update....

Navigation Menu

Repository navigation

getting errors in index.html #97

12 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

getting errors in index.html #97

Description

Activity

angelozerr commented on Jul 9, 2017

rubensa commented on Jul 10, 2017

angelozerr commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

angelozerr commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

angelozerr commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

rubensa commented on Jul 10, 2017

angelozerr commented on Jul 10, 2017

lornewilson commented on Jul 10, 2017

angelozerr commented on Jul 10, 2017

angelozerr commented on Jul 11, 2017

12 remaining items

wuzhen0808 commented on Jan 20, 2018

tibistibi commented on Mar 18, 2018

tibistibi commented on Mar 18, 2018

angelozerr commented on Mar 18, 2018

tibistibi commented on Mar 18, 2018

tibistibi commented on Mar 25, 2018

tibistibi commented on Mar 25, 2018

tibistibi commented on Mar 25, 2018

rubensa commented on Apr 3, 2018

zygimantus commented on Jun 4, 2018

tibistibi commented on Jun 4, 2018

angelozerr commented on Jun 4, 2018

janakiram0035 commented on Jun 20, 2018

He3F commented on Jul 9, 2018

tibistibi commented on Jul 9, 2018

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions