import of bowser and moment broken with 1.6.2

[timodufour]

I use moment and bowser in a component in my project. The import of these libraries worked before upgrading from angular 5.1.1 and angular-cli 1.6.1 to angular 5.1.2 and angular-cli 1.6.2.

Versions

Angular CLI: 1.6.2
Node: 8.1.0
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2
@angular/cli: 1.6.2
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Other versions

    "bowser": "1.9.0",
    "moment": "2.20.1",
    "moment-es6": "1.0.0",

Repro steps

• This is a reduced version of my component:

import {Component} from "@angular/core";
import moment from "moment-es6";
import bowser from "bowser";

@Component({
  selector: "dc-date",
  templateUrl: "./dc-date.component.html"
})
export class DcDateComponent {
  touchUi = bowser.mobile || bowser.tablet;
}

• ng serve
• error in browser while opening the app

Observed behavior

ERROR TypeError: Cannot read property 'mobile' of undefined
    at new DcDateComponent (dc-date.component.ts:72)
    at createClass (core.js:12470)
    at createDirectiveInstance (core.js:12315)
    at createViewNodes (core.js:13776)
    at callViewAction (core.js:14210)
    at execComponentViewsAction (core.js:14119)
    at createViewNodes (core.js:13804)
    at callViewAction (core.js:14210)
    at execComponentViewsAction (core.js:14119)
    at createViewNodes (core.js:13804)

Desired behavior

The bowser import no longer seems to work. The component is part of a custom library we maintain that is packaged with rollup. We had some issues using import statements with the following form:
import * as bowser from bowser
They worked as long as the app wasn't packaged as a library. If our applications imported the library, the imports caused issues. Switching to the imports in this form fixed that issue:
import bowser from bowser

But now, the latest version of angular-cli seems to have issues with these import statements.

[clydin]

When you upgraded the project did the bowser package get updated as well? From looking at the project’s change log, it looks like the latest minor version made changes to its typings.

[timodufour]

I already checked that option. The version of Bowser changed from 1.8.1 to 1.9.0. But I was able to upgrade this single dep without code changes, while staying on angular 5.1.1.

[clydin]

1.9.1 just came out (today) and the only item in the change log is “fixed” typings.d.ts

[timodufour]

Thanks, I will check it out and keep you posted.

[timodufour]

I'm not able to get 1.9.1 yet with npm, since it's still so new. But I rolled back to version 1.8.1 and I still get the same error. I also looked at the changes to the typings and they only added a property.

[clydin]

import bowser from 'bowser'; shouldn't work. There's no default import defined. import * as bowser from 'bowser'; is correct per the typings.

Also, for information related to packaging an angular library, please see here: https://goo.gl/jB3GVv

[AntonisFK]

I had a similar issue when using js-cookie. import Cookies from 'js-cookie'; Cookies returned undefined on angular 5.1.2 and angular-cli 1.6.2. downgrading cli to 1.6.1 fixed the problem.

[timodufour]

Downgrading angular-cli to 1.6.1 temporarily fixes the problem for me as well. I also tested 1.6.3, but this didn't help.

[clydin]

This appears to be a duplicate of #9058. Please follow that issue for further updates.

[angular-automatic-lock-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.}