Angular-cli: The property "async" that you're trying to access does not exist in the class declaration.

[victornoel]

Bug Report or Feature Request (mark with an x)

- [x] bug report 

Versions.

@angular/cli: 1.1.0
node: 7.10.0
os: linux x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3

Repro steps.

Use the async pipe in templates and run ng lint.

The log given by the failure.

I get this error on html file using the async pipe:

The property "async" that you're trying to access does not exist in the class declaration.

Desired functionality.

I should not get this error.

Mention any other details that might be useful.

This was a problem for some time in the past, then it disappeared, and came back again with latest codelizer in angular-cli 1.1.0.
See https://github.com/mgechev/codelyzer/issues/190 for a discussion on the matter, but it's not clear what is the solution and now that codelizer 3.0.1 is used by default, it is now a problem for all users of angular-cli!

[victornoel]

I had trouble reproducing it with as simple ng new, but on my project it is doing it.

I'm going to make an example that reproduces the problem very soon then :)

[victornoel]

Ok, I finally managed to reproduce it, simply apply the following patch to a project created with ng new (angular cli 1.1.0) and then run ng lint:

diff --git a/src/app/app.component.html b/src/app/app.component.html
index d0322ef..dd2aeed 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,5 +7,5 @@
 </div>
 <h2>Here are some links to help you start: </h2>
-<ul>
+<ul *ngIf="(test$ | async).v">
   <li>
     <h2><a target="_blank" href="https://angular.io/docs/ts/latest/tutorial/">Tour of Heroes</a></h2>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..bd90299 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,3 +1,4 @@
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';

 @Component({
@@ -8,3 +9,5 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'app';
+
+  test$ = Observable.of({ v: true });
 }
diff --git a/src/main.ts b/src/main.ts
index a9ca1ca..027824e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,4 +5,6 @@ import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';

+import 'rxjs/add/observable/of';
+
 if (environment.production) {
   enableProdMode();

[filipesilva]

If I'm reading the Codelyzer thread right, there's isn't a fix available at the moment. Seems like the best we can do is to wait until it's fixed there and update the default version of new projects.

[victornoel]

@filipesilva ok, cool.
For the record, I never could clearly understand which combination of cli, tslint and codelyzer was exhibiting the problem.
On my side, I just disabled the no-access-missing-member rule (which applies only to templates).

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}