search

angelozerr / angular-eclipse

Angular Eclipse Plugin
https://angular.io/
Eclipse Public License 1.0
69 stars 12 forks source link

getting errors in index.html #97

Open Jyotsnakathuria opened 7 years ago

Jyotsnakathuria commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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:

angelozerr commented 7 years ago

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

htmlangulardemo

rubensa commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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... screenshot from 2017-07-10 11-20-50

rubensa commented 7 years ago

Save behavior using Angular CLI 1.1.3

rubensa commented 7 years ago

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?" screenshot from 2017-07-10 12-07-01

When I open index.html I get an error telling me that tsserver-plugins can't be found. screenshot from 2017-07-10 11-57-17

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

/repositories/2.4.1**. screenshot from 2017-07-10 12-05-03

angelozerr commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Ummm... confused...

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

angelozerr commented 7 years ago

For the moment none solution. We must wait for https://github.com/angular/vscode-ng-language-service/issues/43#issuecomment-314146422

lornewilson commented 7 years ago

Two comments:

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

  2. 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 commented 7 years ago

@lornewilson please see https://github.com/angular/vscode-ng-language-service/issues/43#issuecomment-314146422

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

angelozerr commented 7 years ago

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 commented 7 years ago

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/nodemodules/typescript/lib/tsserver.js, not from project _nodemodules.

lesaber commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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? screenshot from 2017-07-12 10-44-57

O the "Unknown tag (tagname)" on lines 9, 13 and 17 in this html file? screenshot from 2017-07-12 10-58-38

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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" notifications@github.com 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 https://github.com/angelozerr/angular-eclipse/issues/97#issuecomment-314701540, or mute the thread https://github.com/notifications/unsubscribe-auth/AcotI7_WJ9Uyy_dRRk6I8c8zpfatthSAks5sNIvFgaJpZM4OSJgI .

lesaber commented 7 years ago

@angelozerr

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

rubensa commented 7 years ago

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 commented 7 years ago

To fix with clean mean this issue, we must wait for https://github.com/Microsoft/TypeScript/issues/17151

sir-captainmorgan21 commented 7 years ago

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

image

angelozerr commented 7 years ago

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

image

wuzhen0808 commented 6 years ago

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 commented 6 years ago

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

tibistibi commented 6 years ago

i see good news:

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

angelozerr commented 6 years ago

@tibistibi without fix of https://github.com/Microsoft/TypeScript/issues/17151 I cannot do nothing

tibistibi commented 6 years ago

darn it is set on milestone 2.9 now :(

tibistibi commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

should i still have code completion?

rubensa commented 6 years ago

@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 commented 6 years ago

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

tibistibi commented 6 years ago

:smile:

any progress on this?

angelozerr commented 6 years ago

Waiting for https://github.com/Microsoft/TypeScript/issues/17151

janakiram0035 commented 6 years ago

even second solution also not working for me..

He3F commented 6 years ago

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

tibistibi commented 6 years ago

thanks for the update....