'OpaqueToken', function calls are not supported #843

jogelin · 2017-02-27T12:52:31Z

Version info
Angular: 4.0.0-rc.1
Firebase: 3.6.9
AngularFire: 2.0.0-beta.8
Angular/cli : 1.0.0-rc.0

When I run my app using ng serve, I got this following error :

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported. Consider replacing the function or lambda with a refer
ence to an exported function, resolving symbol FirebaseUserConfig in _path_/node_modules/angularfire2/tokens.d.ts, resolving symbol AngularFireModule.initialize
App in _path_/node_modules/angularfire2/angularfire2.d.ts, resolving symbol AppModule in _path_/src/app/app.module.ts, resolving symbol A
ppModule in *path*/src/app/app.module.ts

If I modify any file which produce a reload of the build, the error disappear and my app works.

I think it's because the OpaqueToken is deprecated in the new Angular 4.x

The text was updated successfully, but these errors were encountered:

davideast · 2017-03-05T14:05:17Z

Hey @jogelin. Angular 4 is still in RC so we're not going to support it until it's in a full release. The fix is simple, but InjectionTokens do not exist in Angular 2.x.

ravivit9 · 2017-03-24T17:44:48Z

Just upgraded my code base to Angular4, got the below error similar to the above error.

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol FirebaseUserConfig in _path/node_modules/angularfire2/tokens.d.ts, resolving symbol AngularFireModule.initializeApp in _path/node_modules/angularfire2/angularfire2.d.ts, resolving symbol AppModule in _path/src/app/app.module.ts, resolving symbol AppModule in _path/ajs/src/app/app.module.ts

Appreciate any help to resolve this.

ravivit9 · 2017-03-24T18:10:11Z

Just to let you know that I have uninstalled firebase and angularfire2 and reinstalled both which fixed the app working.

npm uninstall firebase angularfire2 --save
npm install firebase angularfire2 --save

shushen · 2017-03-24T18:24:34Z

@ravivit9 thanks for the hint, reinstalling appears to solve the problem for me as well.

alexfung888 · 2017-04-02T08:10:06Z

@jogelin yes it is weird. I am running Angular 4.0 now, and gets the same error. Edit any file and recompiles ok.

hemant19 · 2017-04-06T05:32:16Z

@davideast Is there a temporary fix for this which I can use?

LanderBeeuwsaert · 2017-04-09T08:30:20Z

I've reinstalled, but I still get the error. :-/ A temp fix would be much appreciated.

Version info
Angular: 4.0.1
Firebase: 3.7.5
AngularFire: 2.0.0-beta.8
Angular/cli : 1.0.0

Seems that I cannot create a build (to /dist) in an angular-cli project because of this.

bgolyoo · 2017-04-11T17:54:31Z

+

jakehockey10 · 2017-04-12T00:48:21Z

I have also reinstalled, but still get the error as well. I'm posting this again because my versions are different:

Version info
Firebase: 3.7.6
AngularFire: 2.0.0-beta.8

$ ng version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.9.1
os: linux x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

This runs locally for me just fine, but Travis CI build fails due to error mention above.

ravivit9 · 2017-04-12T08:43:59Z

@jakehockey10, just upgraded my code base from 4.0.1 to 4.0.2 as suggested by "ncu" and did ng serve. Now I am also getting the error as stated above.
ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol FirebaseUserConfig in ...........

ravivit9 · 2017-04-12T08:46:56Z

@jakehockey10, as I posted in one of the above comment. Please do the following to resolve the issue.
npm uninstall firebase angularfire2 --save
npm install firebase angularfire2 --save

It just worked after I uninstalled and installed both firebase and angularfire2. Hope this helps.

jakehockey10 · 2017-04-12T12:02:57Z

@ravivit9, I had already tried what you are suggested and still can't get it to work

ravivit9 · 2017-04-12T13:03:49Z

As I am not sure how Travis build will work. I just managed to make to run in local site only.

jakehockey10 · 2017-04-12T13:05:13Z

@ravivit, that would be consistent with what I am seeing. I believe there is a version incomparability and it is very difficult to narrow down what the issue is

jakehockey10 · 2017-04-12T13:23:40Z

Except now I can't get it to work anywhere

ravivit9 · 2017-04-12T14:07:53Z

Sorry to hear that, I would suggest remove node_modules directory and then
npm clean cache
npm install

hopefully the above would fix local version at least. But I am not sure about Travis Cli as I never used it myself.

Please make sure the global modules are same as the local e.g. firebase, @angular/cli.

This is my configuration.
"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.2",
"@angular/compiler": "^4.0.2",
"@angular/core": "^4.0.2",
"@angular/forms": "^4.0.2",
"@angular/http": "^4.0.2",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "^4.0.2",
"@angular/platform-browser-dynamic": "^4.0.2",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.2",
"angularfire2": "^2.0.0-beta.8",
"core-js": "^2.4.1",
"firebase": "^3.7.6",
"hammerjs": "^2.0.8",
"ng2-flex-layout": "^0.1.5",
"rxjs": "^5.3.0",
"typescript": "^2.2.2",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^4.0.2",
"@types/jasmine": "2.5.47",
"@types/node": "~7.0.12",
"codelyzer": "~3.0.0-beta.4",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.6.0",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.1.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.1",
"ts-node": "~3.0.2",
"tslint": "~5.1.0"
}

Hopefully you will get over this issue.

jakehockey10 · 2017-04-12T23:41:48Z

@ravivit9 thanks for continuing to look at this with me. I'm still banging my head over here. I've used your setup, removed node_modules in my project directory, installed the latest npm packages globally, ran npm cache clean, then npm install and I'm still seeing the same behavior. I even threw out the node_modules and tried everything through yarn. Running ng serve after installing dependencies with yarn rendered the app not even compilable locally. So I cleaned again, and used npm one more time.

I'm just baffled. No errors from anything showing up anywhere. If I subscribe to the observable that I'm trying to display in the UI, Firebase is WORKING. It is giving me my messages. I can't print them to the console. It is just the template refusing to show them in the ui...

Here is what I have in a nutshell:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  public newMessage: string;
  public messages: FirebaseListObservable<any[]>;

  constructor(public authService: AuthenticationService) {
    this.messages = this.authService.messages;
    this.messages.subscribe(response => console.log(response));
  }
...
}

<div id="messages">
  <div *ngFor="let message of messages | async">
    <p>{{message.message}}</p>
    <div class="author">
      {{message.displayName }} | {{ message.timestamp | date:"MM/dd/yy hh:mm a"}}
    </div>
  </div>
</div>
<figure class="highlight">
  <input type="textarea" class="message-text" [(ngModel)]="newMessage" (keyup.enter)="sendMessage()">
  <button md-button class="send-message" (click)="sendMessage()">SEND</button>
</figure>

And the result:

And lastly, what my package.json looks like:

"dependencies": {
    "@angular/animations":               "^4.0.2",
    "@angular/common":                   "^4.0.2",
    "@angular/compiler":                 "^4.0.2",
    "@angular/core":                     "^4.0.2",
    "@angular/forms":                    "^4.0.2",
    "@angular/http":                     "^4.0.2",
    "@angular/material":                 "^2.0.0-beta.3",
    "@angular/platform-browser":         "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/router":                   "^4.0.2",
    "angularfire2":                      "^2.0.0-beta.8",
    "core-js":                           "^2.4.1",
    "firebase":                          "^3.7.6",
    "hammerjs":                          "^2.0.8",
    "rxjs":                              "^5.3.0",
    "zone.js":                           "^0.8.5"
  },
  "devDependencies": {
    "@angular/cli":                     "^1.0.0",
    "@angular/compiler-cli":            "^4.0.2",
    "@types/jasmine":                   "^2.5.47",
    "@types/node":                      "^7.0.12",
    "codelyzer":                        "^3.0.0-beta.4",
    "jasmine-core":                     "~2.5.2",
    "jasmine-spec-reporter":            "~3.2.0",
    "karma":                            "^1.6.0",
    "karma-chrome-launcher":            "~2.0.0",
    "karma-cli":                        "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.1.0",
    "karma-jasmine":                    "~1.1.0",
    "karma-jasmine-html-reporter":      "^0.2.2",
    "protractor":                       "~5.1.1",
    "ts-node":                          "^3.0.2",
    "tslint":                           "^5.1.0",
    "typescript":                       "^2.2.2"
  }

I wish I knew how to diagnose these types of issues better. I would like to know what kinds of things this is an indication of and how to dig deeper. But to the point where I'm just trying to change the versions of various packages minimally. But even if I revert back to when I had a successful build on Travis CI, I still can't get it to work locally anymore. I don't know what to point my finger at?

jakehockey10 · 2017-04-13T00:05:43Z

Also, just a further point, data binding in general is working. It is only data that I (oddly successfully) get from firebase, whether I'm asynchronously letting an observable fill out the ui with the async pipe or I subscribe to the observable and populate the component's property with the result, the data bind does not show...

ravivit9 · 2017-04-13T13:16:52Z

I am also doing pretty much the same.

@component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
users: FirebaseListObservable<any[]>;

constructor(private authService: AuthService, private router: Router, af: AngularFire) {
this.users = af.database.list('/users');
}

ngOnInit() {}

logout() {
this.authService.logout();
this.router.navigate(['login']);
}
}

      <md-card>
        <md-list>
          <md-list-item *ngFor="let user of users | async">
            <h3 md-line>{{user.displayName}}</h3>
          </md-list-item>
        </md-list>
      </md-card>

The only line I see the difference is "implements OnInit"
export class HomePageComponent implements OnInit {
...
...
}

jakehockey10 · 2017-04-13T17:20:51Z

@ravivit9 okay making progress. Check out this change:

export class HomeComponent implements AfterViewChecked {
  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
  public newMessage: string;
  public messages: FirebaseListObservable<any>;

  constructor(
    public authService: AuthenticationService,
    private snackBar: MdSnackBar,
    private changeDetector: ChangeDetectorRef // longshot, but I'm getting desperate
  ) {
    this.messages = this.authService.messages;
    this.messages.subscribe(response => this.changeDetector.detectChanges());
    // That actually friggin' made it work.  Why isn't change detection running on its own?  Where 
    // should I look for how I've configured change detection that differs from default behavior?
  }
...
}

davideast · 2017-04-13T17:52:51Z

We are working on the change and should have a @next release to try soon.

jakehockey10 · 2017-04-13T22:13:36Z

@davideast If you have the time, could you explain to me what's going on? I'm just trying to learn this stuff and I think it would help me diagnose these issues in the future.

A FirebaseListObservable extends an Observable, which isn't an Angular concept, just one that Angular takes advantage of internally, correct? The fact that I can subscribe to the FirebaseListObservable just like an Observable and see those results in the console just fine seems to indicate that this isn't an issue with angularfire2 but an issue with the Angular change detection mechanism. Is that a correct assumption?

What change are you referring to in your last comment? What does that change address? Or are you referring to the compatibility with Angular 4.0.x in general?

Update

To further understand what's going on, I tried to write a test that repeated the behavior I was seeing. Here is what I came up with:

// src/app/home/home.component.spec.ts
describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [HomeComponent],
      providers: [
        { provide: AuthenticationService, useClass: AuthenticationServiceStub },
        ...
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  ...

  it('should have messages', async(() => {
    // Arrange
    const de = fixture.debugElement.query(By.css('#messages'));
    const el = de.nativeElement;

    // Act
    fixture.whenStable().then(() => {

      // Assert
      expect(el.children.length).toBeGreaterThan(0);
      expect(el.children[0].innerText).toContain('hello!');
      expect(el.children[0].innerText).toContain('Jake Smith');
      expect(el.children[1].innerText).toContain('goodbye!');
      expect(el.children[1].innerText).toContain('Bob Saget');
    });
  }));

// src/testing/app.stubs.ts
import { Observable } from 'rxjs/Rx';

export class AuthenticationServiceStub {
  public messages: Observable<any> = Observable.of([
    {
      displayName: 'Jake Smith',
      email: 'jakehockey10@gmail.com',
      message: 'hello!'
    },
    {
      displayName: 'Bob Saget',
      email: 'bob@saget.com',
      message: 'goodbye!'
    }
  ])
  ...
}

But I wasn't able to reproduce the problem because it was too difficult for me to mock the firebase service in terms of using a FirebaseListObservable. If anyone knows how to change this test to replicate the problem, I'd be interested in seeing what needs to change. This test passes, so it seems like normal Observables show up in the view. Does this mean that FirebaseListObservables somehow don't kick off change detection like Observables do?

davideast · 2017-04-17T18:19:02Z

@jogelin @jakehockey10 @ravivit9 @LanderBeeuwsaert @zero19

The next release should fix this, but it also contains breaking changes from issue #854.

npm i angularfire2@next --save

danadigun · 2017-05-23T15:11:58Z

for me works locally when i do ng Serve but fails in travis CI build with the above error. here's my dependencies:
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@greg-md/ng-lazy-load": "^1.0.4",
"angularfire2": "^2.0.0-beta.8",
"core-js": "^2.4.1",
"firebase": "^4.0.0",
"firebase-tools": "^3.9.0",
"ng-lazyload-image": "^3.1.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},

danadigun · 2017-05-23T17:42:34Z

this error is frustrating man.

ModernWebService · 2017-05-23T22:59:30Z

I have tried reinstalling cleaning and still getting errors stating there is no export, module not found, cant resolve promise-polufill in node_module/firebase/app. Was working about an hour ago and now all the errors keep coming up, causing a potential jump ship to another framework. :/

UPDATE: Was trying an older project and was given this error

Unable to find "@angular/cli" in devDependencies.

The package "angular-cli" has been deprecated and renamed to "@angular/cli".

Please take the following steps to avoid issues:
"npm uninstall --save-dev angular-cli"

ModernWebService · 2017-05-23T23:47:50Z

Ok so after following what the instructions said in my update. I am able to create a new project and serve it and build. However, I am not able to serve any of the previous projects because there is an issue with firebase and angularfire2.

Along with that there the firebase login seems to be broken since you are not able to do Authmethods and AuthProvider.

dovk · 2017-06-01T16:00:01Z

After a 2 day struggle it seems the problem in our case was having to adjust to AngularFire's modular split. See #854 and https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic3-Angular4.md
After a few more hours it finally got back to working.
As you will see in the links, these are some of things you may have to do:

Firebase database access - in app.module.ts add import {AngularFireDatabaseModule} from 'angularfire2/database' and add import * as firebase from 'firebase/app'
(as well as keeping import {AngularFireModule} from 'angularfire2')
Firebase Authentication - in app.module.ts remove import {AuthProviders, AuthMethods} from 'angularfire2' and replace with import { AngularFireAuthModule } from 'angularfire2/auth'
In app.module.ts place under imports: [
AngularFireModule.initializeApp(Config),
AngularFireDatabaseModule,
AngularFireAuthModule...
In components and services, replace import {AngularFire} from 'angularfire2'
with import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'
In the constructor you will now have something like public afdb: AngularFireDatabase and when getting data you will change it to this.afdb.list instead of this.af.database.list
For authentication it is similiar - replace import {AngularFire} from 'angularfire2' with
import {AngularFireAuth} from 'angularfire2/auth' and add import * as firebase from 'firebase/app'
For example, instead of something like
login(newEmail: string, newPassword: string): firebase.Promise {
return this.af.auth.login({ email: newEmail,password: newPassword })
you now do
login(newEmail: string, newPassword: string): firebase.Promise {
return this.afAuth.auth.signInWithEmailAndPassword(newEmail,newPassword),
And other things like logout is now signOut and so on...
It's all in the 2 links. Good luck!

davideast mentioned this issue Apr 5, 2017

Support Angular 4 #887

Closed

AlexZhidkov mentioned this issue Apr 11, 2017

Upgrade to Angular 4 LegalX/PartWays#101

Open

davideast mentioned this issue Apr 13, 2017

Angular v4 + angularfire2 + "yarn install" => ng build --prod => ERROR #899

Closed

davideast mentioned this issue Apr 16, 2017

chore(upgrade): Upgrade to Angular 4 #906

Merged

This was referenced Apr 25, 2017

Angular4 support #921

Closed

angularfire2 v2.0.0-beta.8 is not compatible with @angular/cli v1.0.1. #927

Closed

prestonvanloon mentioned this issue Apr 30, 2017

Ionic build --prod problem with AOT compile #931

Closed

davideast closed this as completed May 4, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'OpaqueToken', function calls are not supported #843

'OpaqueToken', function calls are not supported #843

jogelin commented Feb 27, 2017

davideast commented Mar 5, 2017

ravivit9 commented Mar 24, 2017

ravivit9 commented Mar 24, 2017

shushen commented Mar 24, 2017

alexfung888 commented Apr 2, 2017

hemant19 commented Apr 6, 2017

LanderBeeuwsaert commented Apr 9, 2017 •

edited

bgolyoo commented Apr 11, 2017 •

edited

jakehockey10 commented Apr 12, 2017 •

edited

ravivit9 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

jakehockey10 commented Apr 13, 2017

ravivit9 commented Apr 13, 2017 •

edited

jakehockey10 commented Apr 13, 2017

davideast commented Apr 13, 2017

jakehockey10 commented Apr 13, 2017 •

edited

davideast commented Apr 17, 2017

danadigun commented May 23, 2017 •

edited

danadigun commented May 23, 2017

ModernWebService commented May 23, 2017 •

edited

ModernWebService commented May 23, 2017

dovk commented Jun 1, 2017 •

edited

'OpaqueToken', function calls are not supported #843

'OpaqueToken', function calls are not supported #843

Comments

jogelin commented Feb 27, 2017

davideast commented Mar 5, 2017

ravivit9 commented Mar 24, 2017

ravivit9 commented Mar 24, 2017

shushen commented Mar 24, 2017

alexfung888 commented Apr 2, 2017

hemant19 commented Apr 6, 2017

LanderBeeuwsaert commented Apr 9, 2017 • edited

bgolyoo commented Apr 11, 2017 • edited

jakehockey10 commented Apr 12, 2017 • edited

ravivit9 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

ravivit9 commented Apr 12, 2017

jakehockey10 commented Apr 12, 2017

jakehockey10 commented Apr 13, 2017

ravivit9 commented Apr 13, 2017 • edited

jakehockey10 commented Apr 13, 2017

davideast commented Apr 13, 2017

jakehockey10 commented Apr 13, 2017 • edited

Update

davideast commented Apr 17, 2017

danadigun commented May 23, 2017 • edited

danadigun commented May 23, 2017

ModernWebService commented May 23, 2017 • edited

ModernWebService commented May 23, 2017

dovk commented Jun 1, 2017 • edited

LanderBeeuwsaert commented Apr 9, 2017 •

edited

bgolyoo commented Apr 11, 2017 •

edited

jakehockey10 commented Apr 12, 2017 •

edited

ravivit9 commented Apr 13, 2017 •

edited

jakehockey10 commented Apr 13, 2017 •

edited

danadigun commented May 23, 2017 •

edited

ModernWebService commented May 23, 2017 •

edited

dovk commented Jun 1, 2017 •

edited