flex-layout: flex-layout not compatible with Angular 5.0 because of OpaqueToken

I’ve just had the problem it was due to using ^2.0.0-beta.10 and the incorrectly published RC version being seen as the higher/newer version. So make sure you are not using ^ the latest version is 2.0.0-beta.10-4905443 so you should use npm install @angular/flex-layout@2.0.0-beta.10-4905443 --save.

To be clear your package.json should not be…

"@angular/flex-layout": "^2.0.0-beta.10-4905443",

this will actually install version 2.0.0-rc.1, which was meant to be released as 2.0.0-beta.6 so it is actually older than >= 2.0.0-beta.7 <= 2.0.0-beta.10-4905443.

Until that is fixed, you should use fixed versioning…

"@angular/flex-layout": "2.0.0-beta.10-4905443",

2.0.0-beta.10-4905443 is working for me with Angular 5.

Got this error and saw this deprecation notice in angular/core…

DEPRECATIONS

• OpaqueToken is now deprecated, use InjectionToken<T> instead.

Was able to get rid of error by editing…

• node_modules/@angular/flex-layout/media-query/breakpoints/break-points.d.ts

and changing OpaqueToken to InjectionToken…

import { InjectionToken } from '@angular/core';
import { BreakPoint } from '../breakpoints/break-point';
export declare const RESPONSIVE_ALIASES: string[];
export declare const RAW_DEFAULTS: BreakPoint[];
/**
 *  Opaque Token unique to the flex-layout library.
 *  Use this token when build a custom provider (see below).
 */
export declare const BREAKPOINTS: InjectionToken<BreakPoint>;
/**
 *  Provider to return observable to ALL known BreakPoint(s)
 *  Developers should build custom providers to override
 *  this default BreakPointRegistry dataset provider
 *  NOTE: !! custom breakpoints lists MUST contain the following aliases & suffixes:
 *        [xs, gt-xs, sm, gt-sm, md, gt-md, lg, gt-lg, xl]
 */
export declare const BreakPointsProvider: {
    provide: InjectionToken<BreakPoint>;
    useValue: BreakPoint[];
};

I’m not sure if this has been fixed in the source already, but not released yet… so just using this fix temporarily until the fix is released.

@bostondevin - Here are some tips:

• run npm uninstall @angular/flex-layout
• delete your node_modules directory
• delete your package-lock.json (if any)
• run npm install
• run npm install @angular/flex-layout

You should use use beta.10 instead of rc.1. I had the same problem. I believe rc.1 was released by mistake.

In russian we have an expression “podgoráet pukán” which means that we need version with this issue resolved…

@ajspeller thanks for the extremely quick reply 😃 I found another way

@bostondevin What does your package JSON look like? Make sure you’re using an exact import.

Do this: "@angular/flex-layout": "2.0.0-beta.12"

not this: "@angular/flex-layout": "^2.0.0-beta.12" or this: "@angular/flex-layout": "~2.0.0-beta.12"

You can read more about Carat and Tilde ranges here: https://docs.npmjs.com/misc/semver

@ajspeller - OpaqueToken is no longer used in this library. The latest builds (nightly) now support Angular 5.1.x and RxJS 5.5.x. Peer Dependencies have been updated. And we hope to release @angular/flex-layout v2.0.0-beta.12 today.

This release should also fix deployment glitches with Beta.10 and Beta.11 releases.

this configuration is working for me, I use the following command npm install @angular/flex-layout@latest --save

"@angular/animations": "^5.0.1", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "^5.0.1", "@angular/compiler": "^5.0.1", "@angular/core": "^5.0.1", "@angular/flex-layout": "^2.0.0-beta.10-4905443", "@angular/forms": "^5.0.1", "@angular/http": "^5.0.1", "@angular/material": "^5.0.0-rc0", "@angular/platform-browser": "^5.0.1", "@angular/platform-browser-dynamic": "^5.0.1", "@angular/platform-server": "^5.0.1", "@angular/router": "^5.0.1", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "rxjs": "^5.4.2", "zone.js": "^0.8.14"

I think we need a FAQ on flex-layout versions. There are uncountably many questions arising from the chaotic version numbers.

Related: is there an intent to follow the lead of Angular Material and declare the major version of this to be “5” when it’s fully compatible with Angular 5? I get that this breaks all kinds of semver intentions, but I think it’s either keep the major version number consistent with the compatible version of Angular, or there’s going to need to be a compatibility table as part of the README.

I honestly don’t know which is preferable, or less distasteful. Considering that @ThomasBurleson works with both projects, I suspect he has strong opinions here on version numbers/compatibility.

Hello 😃

Maybe this will help someone. I update my angular project to the latest angular version PLUS I set Flex to also latest release: 5.0.0.beta.13

“dependencies”: { “@angular/animations”: “^5.2.7”, “@angular/cdk”: “^5.2.3”, “@angular/common”: “^5.2.7”, “@angular/compiler”: “^5.2.7”, “@angular/core”: “^5.2.7”, “@angular/flex-layout”: “^5.0.0-beta.13”, “@angular/forms”: “^5.2.7”, “@angular/http”: “^5.2.7”, “@angular/material”: “^5.2.3”, “@angular/platform-browser”: “^5.2.7”, “@angular/platform-browser-dynamic”: “^5.2.7”, “@angular/router”: “^5.2.7”, “angular2-moment”: “^1.7.0”, “angular2-notifications”: “^0.9.6”, “core-js”: “^2.5.3”, “rxjs”: “^5.5.6”, “zone.js”: “^0.8.20” },

Works like a charm 😃

In English we have another expression: “I can’t make head nor tail of that” , and I might not be the only one

@joejordanbrown totally, it made me feel very naughty. I tried what the comment mentioned again and it worked. Must’ve had something sticking in my node_modules.

@alexfung888 Believe me, the team understands your frustrations, and it’s been a sore spot since the rollback from rc.1 to beta.7. The solution that the team is working on is posting the next release to 2.0.1 instead of 2.0.0 to make all new versions point to that instead. I don’t know if there’s an ETA on this fix, but it’s in the works, currently tracked by #484

cc @ThomasBurleson

@nemeth-tibor @FirassKoubaa I was getting same error after following the steps above. Try removing "@ngrx/store" dependency from package.json, remove package-lock.json file, and then run npm i @ngrx/store --save This should install latest @ngrx, which in my case was 5.0.0 and that is going to let you move forward. Hope this helps.

@PooperPig - Here is the build / deployed JS for @angular/flex-layout: https://github.com/angular/flex-layout-builds. You will see that nowhere in that code is the use of the OpaqueToken. Something is going wrong with your npm installs [obviously].

@ajspeller @angular/flex-layout": "^2.0.0-beta.12 installed silently the 2.0.0-rc1 for me (I had this version before). It works with @angular/flex-layout": "2.0.0-beta.12 but I will have to manually check next releases. $ npm show @angular/flex-layout version 2.0.0-beta.12 May this help someone else ^^

This is what I have in my package.json and it is working for me …

“@angular/flex-layout”: “^2.0.0-beta.12”

Try deleting the node_modules folder and then running

npm install

You really shouldn’t be changing the source, if you had read any of the comments above you will see the solution many people have mentioned.

For example https://github.com/angular/flex-layout/issues/494#issuecomment-342891068

#500