Angularfire: 'OpaqueToken', function calls are not supported
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
jogelin
All 28 comments
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.
davideast
on 5 Mar 2017
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
on 24 Mar 2017
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
ravivit9
on 24 Mar 2017
@ravivit9 thanks for the hint, reinstalling appears to solve the problem for me as well.
shushen
on 24 Mar 2017
@jogelin yes it is weird. I am running Angular 4.0 now, and gets the same error. Edit any file and recompiles ok.
alexfung888
on 2 Apr 2017
@davideast Is there a temporary fix for this which I can use?
hemant19
on 6 Apr 2017
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.
LanderBeeuwsaert
on 9 Apr 2017
+
bgolyoo
on 11 Apr 2017
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.
jakehockey10
on 12 Apr 2017
@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
on 12 Apr 2017
@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.
ravivit9
on 12 Apr 2017
@ravivit9, I had already tried what you are suggested and still can't get it to work
jakehockey10
on 12 Apr 2017
As I am not sure how Travis build will work. I just managed to make to run in local site only.
ravivit9
on 12 Apr 2017
@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
on 12 Apr 2017
Except now I can't get it to work anywhere
jakehockey10
on 12 Apr 2017
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.
ravivit9
on 12 Apr 2017
@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));
}
...
}
```html
{{message.message}}
And the result:
And lastly, what my package.json looks like:
```json
"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
on 13 Apr 2017
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...
jakehockey10
on 13 Apr 2017
I am also doing pretty much the same.
@Component({ constructor(private authService: AuthService, private router: Router, af: AngularFire) { ngOnInit() {} logout() { The only line I see the difference is "implements OnInit"
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
users: FirebaseListObservable
this.users = af.database.list('/users');
}
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>
export class HomePageComponent implements OnInit {
...
...
}
ravivit9
on 13 Apr 2017
@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?
}
...
}
We are working on the change and should have a @next release to try soon.
davideast
on 13 Apr 2017
@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: '[email protected]',
message: 'hello!'
},
{
displayName: 'Bob Saget',
email: '[email protected]',
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?
jakehockey10
on 14 Apr 2017
@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
davideast
on 17 Apr 2017
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
on 23 May 2017
this error is frustrating man.
danadigun
on 23 May 2017
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
on 24 May 2017
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.
ModernWebService
on 24 May 2017
After a 2 day struggle it seems the problem in our case was having to adjust to AngularFire's modular split. See https://github.com/angular/angularfire2/issues/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!
dovk
on 1 Jun 2017
Related issues
KLiFF2606
·
3Comments
StephenFluin
·
3Comments
mypark
·
3Comments
Leanvitale
·
3Comments
cre8
·
3Comments
Most helpful comment
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