angular-eclipse
angular-eclipse copied to clipboard
angelozerr
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. ...
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
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...
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 https://github.com/angular/vscode-ng-language-service/issues/43#issuecomment-314146422
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 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?
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;
}
......
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.
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.
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.
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...
@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.
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)
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" [email protected] 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 .
@angelozerr
Second solution you provided for tsserver.js worked. Thank you.
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); }); };
To fix with clean mean this issue, we must wait for https://github.com/Microsoft/TypeScript/issues/17151
@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.
@zsmorgan21 you can find folder where tsserver is hosted with Project / Properties:
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 without fix of https://github.com/Microsoft/TypeScript/issues/17151 I cannot do nothing
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
@tibistibi No, it seems that if you try the fix you avoid all the red underlines but you miss code completion on html files.
I am facing the same issue and I can approve that @tibistibi workaround works.
