Flex-layout: Import error when running example from custom breakpoints documentation

[BovineEnthusiast]

The Custom Breakpoints documentation describes using the following code to create custom @media query ranges:

import { NgModule } from '@angular/core';
import { DEFAULT_BREAKPOINTS, BreakPoint } from '@angular/flex-layout'
import { validateSuffixes } from '@angular/flex-layout/utils';

/**
 * For mobile and tablet, reset ranges
 */
function updateBreakpoints(bp:BreakPoint) {
  switch(bp.alias) {
    case 'xs' : bp.mediaQuery =  '(max-width: 470px)';   break;
    case 'sm' : bp.mediaQuery =  '(min-width: 471px) and (max-width: 820px)'; break;
  }
  return bp;
}

@NgModule({
  providers: [
    // register a Custom BREAKPOINT Provider
    {
      provide : BREAKPOINTS,
      useFactory : function customizeBreakPoints() {
        return validateSuffixes(DEFAULT_BREAKPOINTS.map( updateBreakpoints ));
      }
    }
  ]
})
export class MyBreakPointsModule { }

However, trying to compile this, will result in the following errors:

ERROR in path/to/some.module.ts (2,10): Module '"path/to/some.module.ts/node_modules/@angular/flex-layout/index"' has no exported member 'DEFAULT_BREAKPOINTS'.

ERROR in path/to/some.module.ts (3,10): Module '"path/to/project/node_modules/@angular/flex-layout/utils/index"' has no exported member 'validateSuffixes'.

ERROR in path/to/some.module.ts (20,17): Cannot find name 'BREAKPOINTS'.

All Angular packages are at the latest version at the time of writing:

"@angular/animations": "^4.4.5",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.4.5",
"@angular/compiler": "^4.4.5",
"@angular/core": "^4.4.5",
"@angular/flex-layout": "^2.0.0-rc.1",
"@angular/forms": "^4.4.5",
"@angular/http": "^4.4.5",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.4.5",
"@angular/platform-browser-dynamic": "^4.4.5",
"@angular/router": "^4.4.5",

[demisx]

Same error here on the latest "^2.0.0-rc.1":

[alexfung888]

2.0.0-rc.1 is not the latest. It was a beta.6 that use RAW_DEFAULTS. To use DEFAULT_BREAKPOINTS as in the document, upgrade to 2.0.0-beta.8 or above

[demisx]

@alexfung888 Thank you so much for chiming in. This indeed fixed the error. Didn't occur to me that beta was newer than a release candidate. Usually, it's the other way around. npm out should've given the clue, of course, but I've somehow overlooked it.

[alexfung888]

@demisx I heard the rc was a mistake. You can't see it listed on the change log.
It also led to problems in upgrades, because npm keeps thinking that you should go to rc.1
To quiet npm I hard coded the full version into package.json
"@angular/flex-layout": "2.0.0-beta.9",
and modify it manually when a new beta appear.

[demisx]

@alexeagle Gotcha. Makes sense. Wondering if there is a good reason for the team not to unpublish the bad rc.1 from npm.

[BovineEnthusiast]

Hmm, whilst upgrading to 2.0.0-beta.9 has fixed the reference to DEFAULT_BREAKPOINTS, I still get errors for the following:

ERROR in path/to/some.module.ts (3,10): Module '"path/to/project/node_modules/@angular/flex-layout/utils/index"' has no exported member 'validateSuffixes'.

ERROR in path/to/some.module.ts (20,17): Cannot find name 'BREAKPOINTS'.

Anything else you'd advise to try? Thanks.

[BovineEnthusiast]

Never mind, I just had to import both of them from the base flex-layout path.

[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._}