flex-layout not compatible with Angular 5.0 because of OpaqueToken

[ajspeller]

Bug, feature request, or proposal:

Request - Approximately when will the software but updated to be compatible with Angular 5.0

What is the expected behavior?

To remove the usage of opaque tokens because it has been removed from Angular 5.0

What is the current behavior?

When attempting to build my application I see the following error.

ERROR in node_modules/@angular/flex-layout/media-query/breakpoints/break-points.d.ts(8,10): ... has no exported member 'OpaqueToken'.

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

• StackBlitz starter using latest npm nightly release:

Just install Angular 5.0 and @angular/flex-layout: 2.0.0-rc.1

What is the use-case or motivation for changing an existing behavior?

To be able to code with the most current software.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.0
Material 5.0.0-rc0
Windows 10
typescript: 2.4.2
Chrome Version 60.0.3112.90 (Official Build) (64-bit)

Is there anything else we should know?

[boulix3]

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

[ajspeller]

Okay, thanks. I will downgrade.

[joejordanbrown]

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/[email protected] --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",

[RainingNight]

+1

[jeudywr]

Using version 2.0.0-beta.10 is not working for me :-(

Other dependencies in my package.json:

    "@angular/cdk": "^5.0.0-rc0",
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/flex-layout": "2.0.0-beta.10",
    "@angular/http": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@angular/material": "^5.0.0-rc0",

[danwulff]

So after reading all this I'm still not sure if 2.0.0-beta.10-4905443 is fully compatible with Angular 5 or not. What's the status on Ver. 5.0 compatibility?

[ajspeller]

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

[danwulff]

@ajspeller fantastic, thanks for the reply.

[javahaxxor]

I still get the following error:

ERROR in node_modules/@angular/flex-layout/media-query/breakpoints/break-points.d.ts(8,10): error TS2305: Module '"/Users/adyhasch/Documents/Code/Angular/ng-core/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

Anyone got any clues? I've grinded to a halt these last weeks ..

 "dependencies": {
    "@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/router": "^5.0.1",
    "angular2-uuid": "^1.1.1",
    "angularfire2": "^5.0.0-rc.3",
    "chart.js": "^2.7.1",
    "core-js": "^2.5.1",
    "firebase": "^4.6.1",
    "hammerjs": "^2.0.8",
    "ng2-charts": "^1.6.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.2",
    "ts-helpers": "^1.1.2",
    "uuid": "^3.1.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0",
    "@angular/compiler-cli": "^5.0.1",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "^2.6.3",
    "@types/node": "^8.0.50",
    "@types/selenium-webdriver": "^3.0.8",
    "codelyzer": "^4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "~1.7.1",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "5.2.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "^2.4.2",
    "webdriver-manager": "12.0.6"
  }

[alexfung888]

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

[jhfonseca72]

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"

[CaerusKaru]

@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

[alexfung888]

@CaerusKaru Yes I understand it takes time to post a new release. I wonder if a FAQ should be a quicker means to help the people who got lost. Or even squarely placing instructions on the readme.md on the master branch.

[CaerusKaru]

@alexfung888 I don't know if @ThomasBurleson would go for adding an FAQ like that to the README, but what you can do is open up a new issue labeled something like:

FAQ: correct Flex-Layout versions

We could keep that open until the issues have been resolved with the next release, hopefully some time in the next few weeks. What do you think?

[alexfung888]

500

[CaerusKaru]

@alexfung888 Looks great! I mostly meant that if you wanted to, you could write the FAQ and store it in that issue (meaning you don't have to follow the existing ISSUE template), so that others could just look at the issue for information.

[javahaxxor]

@melton3 that did it, thanks. What's the explanation to why that worked ?

[spoilsportmotors]

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.

[mixxmac]

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

DEPRECATIONS

• OpaqueToken is now deprecated, use InjectionToken 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.

[PsyGik]

@mixxmac Pretty sure editing node_modules isn't a good approach

[nclarx]

@mixxmac thanks, that's the work around I was looking for.

@PsyGik any port in a storm. Editing packages is usually against my religion, but if it keeps the dev going then i'm a happy monkey.

[joejordanbrown]

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

[nclarx]

@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.

[tverdohleb]

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

[javahaxxor]

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

[danbilokha]

@javahaxxor how u fix that?

[ThomasBurleson]

@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.

[ThomasBurleson]

Fixed with today's 2.0.0-beta.12 release. See SHA 62457a5972 and CHANGELOG

[bostondevin]

Erg - i'm getting this still - I think it's because i'm using the CLI maybe

ERROR in node_modules/@angular/flex-layout/media-query/breakpoints/break-points.d.ts(8,10): error TS2305: Module '"/Users/bostondevin/Desktop/mgx/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

[danwulff]

@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

[ThomasBurleson]

@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

[danbilokha]

@bostondevin - This release (2.0.0-beta.12) helps me. I'm using Angular CLI too.
Check the version of ngrx/store.

My package.json file

{
  "name": "chess-comm",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --port=4200",
    "test": "karma start ./karma.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "e2e": "protractor ./protractor.conf.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngrx/store": "~4.1.1",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack-dev-server": "~2.9.3",
    "webpack": "~3.10.0",
    "autoprefixer": "^6.5.3",
    "css-loader": "^0.28.1",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.29.0",
    "less-loader": "^4.0.5",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "source-map-loader": "^0.2.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "style-loader": "^0.13.1",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.6.2",
    "circular-dependency-plugin": "^4.2.1",
    "webpack-concat-plugin": "^1.4.2",
    "copy-webpack-plugin": "^4.1.1",
    "uglifyjs-webpack-plugin": "~1.1.2"
  }
}

[nick-gaudreau]

neither "@angular/flex-layout": "~2.0.0-beta.12" or "@angular/flex-layout": "2.0.0-beta.10-4905443" worked for me.... still so chaotic

[ajspeller]

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

[nick-gaudreau]

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

[ThomasBurleson]

@nick-gaudreau - what was the approach that worked for you?

[stauvel]

@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 ^^

[ThomasBurleson]

• npm uninstall @angular/flex-layout
• delete your node_modules
• npm install
• npm install @angular/flex-layout

Do not use npm update

Then rebuild...

[PooperPig]

* EDIT *
It was the local Angular QnA library ("ambrose-qna": "file:../ambrose-qna/dist/ambrose-qna-0.1.19.tgz",) I was using that was the root cause - it was using different versions of the libraries (I honestly don't know which combination was the cause, but rebuilt both with the same versions of angular & flexbox and all was well with the world!

---

I have uninstalled flex-layout, deleted package-lock.json, deleted node_modules, npm install, npm install @angular/flex-layout --save
Still getting the error

WARNING in ./node_modules/ambrose-qna/node_modules/@angular/flex-layout/media-query/breakpoints/break-points.js
65:29-40 "export 'OpaqueToken' was not found in '@angular/core'

My package.json
"dependencies": {
"@angular/animations": "^5.1.3",
"@angular/cdk": "^5.0.3",
"@angular/common": "^5.1.3",
"@angular/compiler": "^5.1.3",
"@angular/core": "^5.1.3",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^5.1.3",
"@angular/http": "^5.1.3",
"@angular/material": "^5.0.3",
"@angular/material-moment-adapter": "^5.0.3",
"@angular/platform-browser": "^5.1.3",
"@angular/platform-browser-dynamic": "^5.1.3",
"@angular/platform-server": "^5.1.3",
"@angular/router": "^5.1.3",
"ambrose-qna": "file:../ambrose-qna/dist/ambrose-qna-0.1.19.tgz",
"core-js": "^2.4.1",
"moment": "^2.20.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},

I have also tried removing the ^ n flex-layout to force the correct install version to beta.12 (npm uninstall @angular/flex-layout, edit package.json, delete package-lock.json, npm install) but continually get the same error.

I'm now at a bit of a loss!

[ThomasBurleson]

@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].

[desmoslevin]

using angular 5.1.2 yes, this is the way:

• delete folder node_modules
• use "@angular/flex-layout": "2.0.0-beta.12" in dependecies of package.json
• run nmp install

[FirassKoubaa]

i have done all those steps :

• delete folder node_modules /package-lock.json

• use "@angular/flex-layout": "2.0.0-beta.12" in dependecies of package.json

• npm install

but still get same error

[nemeth-tibor]

I also have done all those steps and still get the same error.

[silexcode]

@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.

[lachis]

this comment fixed the issue for me!

[ghost]

Been trying this for hours, this works on angular 5.1.1, can follow this guide for the initial installation.
https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App
Later on add this to the system.js file

map:{
'hammerjs': 'npm:hammerjs/hammer.js',
/Animations */
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
/Angular Material components, must include all*/
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
'@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
'@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
'@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
'@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
'@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
'@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
'@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
'@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
'@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js'

}

[ThomasBurleson]

@goodjeans don't forget to include:

'@angular/flex-layout':'npm:@angular/flex-layout'

[pdanysz]

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 :)