@petebacondarwin I’m the author of ag-grid-angular - please let me know if I can help with this

and @swimlane/ngx-datatable’

We have not yet implemented CommonJS/UMD support, which is the common issue here. I will post an update here when that happens.

I’m having the same issue with latest versions of ag-grid-angular and ngx-cookie-service packages. @CunningFatalist @seanlandsman

Confirming retrieving a recent build fixes the issue for angular2-signaturepad (https://github.com/wulfsolter/angular2-signaturepad/issues/78) I hope you can get #30591 merged in a proper release soon 😃

It seems that angular2-text-mask suffers from this too. I’ve opened an issue on that repo: https://github.com/text-mask/text-mask/issues/930

Tracking these packges here: https://hackmd.io/EgzwJ8Q3QaKIO1bWh1yrvA

@petebacondarwin nevermind. I think I figured it out. I came across https://github.com/ng-packagr/ng-packagr which seems to fix my npm package format.

@wottpal you issue does indeed appear to have the same cause as #31394. Please follow that issue for a resolution.

@kschwidder - please can you create a new issue for you problem, providing steps to reproduce the error.

I am closing this issue as it is becoming a catch-all for ngcc related issues and that makes it difficult to track what is broken and what is fixed. Please create new issues for failures when trying out ivy/ngcc (after searching for duplicate issues first!).

These runtime errors might be related to #31394.

@petebacondarwin Yes, I can confirm that as well. Error and Warning are gone.

Update: Even though it compiles now I get a Runtime-Error in Chrome (also from ng-inline-svg). Seems related:

(If you are wondering experimentalDecorators is set to true in my tsconfig.json, of course)

I’ve tried Ivy a few minutes ago (it failed to compile):

My environment:

My original problem was angular2-text-mask: https://github.com/angular/angular/issues/29564#issuecomment-492248090. This time it passed, but with some warnings:

The main problem was @angular/flex-layout, but it’s already being tracked by another opened issue: https://github.com/angular/angular/issues/30114

+1: with 8.2.0-next.0 it is fixed !!! The decrease of the bundle size is amazing ! Awesome work. Well done. Thx a lot

@wottpal - This should be fixed. Can you confirm which version of Angular you are testing against? The ngcc fixes are only in the next versions, which currently is 8.2.0-next.0 (released yesterday).

@kschwidder - the version to use for testing ivy is 8.1.0-rc.0 and higher.

Running the latest release 8.0.3

ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/extended.js 133:578 Module parse failed: Unexpected token (133:578) You may need an appropriate loader to handle this file type. | } | }

DefaultImgSrcDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultImgSrcDirective, selectors: [[“img”, “src.xs”, “”], [“img”, “src.sm”, “”], [“img”, “src.md”, “”], [“img”, “src.lg”, “”], [“img”, “src.xl”, “”], [“img”, “src.lt-sm”, “”], [“img”, “src.lt-md”, “”], [“img”, “src.lt-lg”, “”], [“img”, “src.lt-xl”, “”], [“img”, “src.gt-xs”, “”], [“img”, “src.gt-sm”, “”], [“img”, “src.gt-md”, “”], [“img”, “src.gt-lg”, “”]], factory: function DefaultImgSrcDirective_Factory(t) { return ɵDefaultImgSrcDirective_BaseFactory((t || DefaultImgSrcDirective)); }, inputs: { src.xs: “src.xs”, src.sm: “src.sm”, src.md: “src.md”, src.lg: “src.lg”, src.xl: “src.xl”, “src.lt-sm”: “src.lt-sm”, “src.lt-md”: “src.lt-md”, “src.lt-lg”: “src.lt-lg”, “src.lt-xl”: “src.lt-xl”, “src.gt-xs”: “src.gt-xs”, “src.gt-sm”: “src.gt-sm”, “src.gt-md”: “src.gt-md”, “src.gt-lg”: “src.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultImgSrcDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultImgSrcDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultImgSrcDirective, [{ ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/flex.js 192:653 Module parse failed: Unexpected token (192:653) You may need an appropriate loader to handle this file type. | } | } DefaultLayoutDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultLayoutDirective, selectors: [[“”, “fxLayout”, “”], [“”, “fxLayout.xs”, “”], [“”, “fxLayout.sm”, “”], [“”, “fxLayout.md”, “”], [“”, “fxLayout.lg”, “”], [“”, “fxLayout.xl”, “”], [“”, “fxLayout.lt-sm”, “”], [“”, “fxLayout.lt-md”, “”], [“”, “fxLayout.lt-lg”, “”], [“”, “fxLayout.lt-xl”, “”], [“”, “fxLayout.gt-xs”, “”], [“”, “fxLayout.gt-sm”, “”], [“”, “fxLayout.gt-md”, “”], [“”, “fxLayout.gt-lg”, “”]], factory: function DefaultLayoutDirective_Factory(t) { return ɵDefaultLayoutDirective_BaseFactory((t || DefaultLayoutDirective)); }, inputs: { fxLayout: “fxLayout”, fxLayout.xs: “fxLayout.xs”, fxLayout.sm: “fxLayout.sm”, fxLayout.md: “fxLayout.md”, fxLayout.lg: “fxLayout.lg”, fxLayout.xl: “fxLayout.xl”, “fxLayout.lt-sm”: “fxLayout.lt-sm”, “fxLayout.lt-md”: “fxLayout.lt-md”, “fxLayout.lt-lg”: “fxLayout.lt-lg”, “fxLayout.lt-xl”: “fxLayout.lt-xl”, “fxLayout.gt-xs”: “fxLayout.gt-xs”, “fxLayout.gt-sm”: “fxLayout.gt-sm”, “fxLayout.gt-md”: “fxLayout.gt-md”, “fxLayout.gt-lg”: “fxLayout.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultLayoutDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultLayoutDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultLayoutDirective, [{ ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/grid.js 92:719 Module parse failed: Unexpected token (92:719) You may need an appropriate loader to handle this file type. | } | } DefaultGridAlignDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultGridAlignDirective, selectors: [[“”, “gdGridAlign”, “”], [“”, “gdGridAlign.xs”, “”], [“”, “gdGridAlign.sm”, “”], [“”, “gdGridAlign.md”, “”], [“”, “gdGridAlign.lg”, “”], [“”, “gdGridAlign.xl”, “”], [“”, “gdGridAlign.lt-sm”, “”], [“”, “gdGridAlign.lt-md”, “”], [“”, “gdGridAlign.lt-lg”, “”], [“”, “gdGridAlign.lt-xl”, “”], [“”, “gdGridAlign.gt-xs”, “”], [“”, “gdGridAlign.gt-sm”, “”], [“”, “gdGridAlign.gt-md”, “”], [“”, “gdGridAlign.gt-lg”, “”]], factory: function DefaultGridAlignDirective_Factory(t) { return ɵDefaultGridAlignDirective_BaseFactory((t || DefaultGridAlignDirective)); }, inputs: { gdGridAlign: “gdGridAlign”, gdGridAlign.xs: “gdGridAlign.xs”, gdGridAlign.sm: “gdGridAlign.sm”, gdGridAlign.md: “gdGridAlign.md”, gdGridAlign.lg: “gdGridAlign.lg”, gdGridAlign.xl: “gdGridAlign.xl”, “gdGridAlign.lt-sm”: “gdGridAlign.lt-sm”, “gdGridAlign.lt-md”: “gdGridAlign.lt-md”, “gdGridAlign.lt-lg”: “gdGridAlign.lt-lg”, “gdGridAlign.lt-xl”: “gdGridAlign.lt-xl”, “gdGridAlign.gt-xs”: “gdGridAlign.gt-xs”, “gdGridAlign.gt-sm”: “gdGridAlign.gt-sm”, “gdGridAlign.gt-md”: “gdGridAlign.gt-md”, “gdGridAlign.gt-lg”: “gdGridAlign.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultGridAlignDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultGridAlignDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultGridAlignDirective, [{ ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ℹ ｢wdm｣: Failed to compile. ℹ ｢wdm｣: Compiling… r Date: 2019-06-27T15:12:30.731Z - Hash: ec287296550544a1ddcb - Time: 2475ms 8 unchanged chunks

ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/extended.js 133:578 Module parse failed: Unexpected token (133:578) You may need an appropriate loader to handle this file type. | } | }

DefaultImgSrcDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultImgSrcDirective, selectors: [[“img”, “src.xs”, “”], [“img”, “src.sm”, “”], [“img”, “src.md”, “”], [“img”, “src.lg”, “”], [“img”, “src.xl”, “”], [“img”, “src.lt-sm”, “”], [“img”, “src.lt-md”, “”], [“img”, “src.lt-lg”, “”], [“img”, “src.lt-xl”, “”], [“img”, “src.gt-xs”, “”], [“img”, “src.gt-sm”, “”], [“img”, “src.gt-md”, “”], [“img”, “src.gt-lg”, “”]], factory: function DefaultImgSrcDirective_Factory(t) { return ɵDefaultImgSrcDirective_BaseFactory((t || DefaultImgSrcDirective)); }, inputs: { src.xs: “src.xs”, src.sm: “src.sm”, src.md: “src.md”, src.lg: “src.lg”, src.xl: “src.xl”, “src.lt-sm”: “src.lt-sm”, “src.lt-md”: “src.lt-md”, “src.lt-lg”: “src.lt-lg”, “src.lt-xl”: “src.lt-xl”, “src.gt-xs”: “src.gt-xs”, “src.gt-sm”: “src.gt-sm”, “src.gt-md”: “src.gt-md”, “src.gt-lg”: “src.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultImgSrcDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultImgSrcDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultImgSrcDirective, [{ ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/flex.js 192:653 Module parse failed: Unexpected token (192:653) You may need an appropriate loader to handle this file type. | } | } DefaultLayoutDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultLayoutDirective, selectors: [[“”, “fxLayout”, “”], [“”, “fxLayout.xs”, “”], [“”, “fxLayout.sm”, “”], [“”, “fxLayout.md”, “”], [“”, “fxLayout.lg”, “”], [“”, “fxLayout.xl”, “”], [“”, “fxLayout.lt-sm”, “”], [“”, “fxLayout.lt-md”, “”], [“”, “fxLayout.lt-lg”, “”], [“”, “fxLayout.lt-xl”, “”], [“”, “fxLayout.gt-xs”, “”], [“”, “fxLayout.gt-sm”, “”], [“”, “fxLayout.gt-md”, “”], [“”, “fxLayout.gt-lg”, “”]], factory: function DefaultLayoutDirective_Factory(t) { return ɵDefaultLayoutDirective_BaseFactory((t || DefaultLayoutDirective)); }, inputs: { fxLayout: “fxLayout”, fxLayout.xs: “fxLayout.xs”, fxLayout.sm: “fxLayout.sm”, fxLayout.md: “fxLayout.md”, fxLayout.lg: “fxLayout.lg”, fxLayout.xl: “fxLayout.xl”, “fxLayout.lt-sm”: “fxLayout.lt-sm”, “fxLayout.lt-md”: “fxLayout.lt-md”, “fxLayout.lt-lg”: “fxLayout.lt-lg”, “fxLayout.lt-xl”: “fxLayout.lt-xl”, “fxLayout.gt-xs”: “fxLayout.gt-xs”, “fxLayout.gt-sm”: “fxLayout.gt-sm”, “fxLayout.gt-md”: “fxLayout.gt-md”, “fxLayout.gt-lg”: “fxLayout.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultLayoutDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultLayoutDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultLayoutDirective, [{ ERROR in ./node_modules/@angular/flex-layout/ivy_ngcc/esm2015/grid.js 92:719 Module parse failed: Unexpected token (92:719) You may need an appropriate loader to handle this file type. | } | } DefaultGridAlignDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultGridAlignDirective, selectors: [[“”, “gdGridAlign”, “”], [“”, “gdGridAlign.xs”, “”], [“”, “gdGridAlign.sm”, “”], [“”, “gdGridAlign.md”, “”], [“”, “gdGridAlign.lg”, “”], [“”, “gdGridAlign.xl”, “”], [“”, “gdGridAlign.lt-sm”, “”], [“”, “gdGridAlign.lt-md”, “”], [“”, “gdGridAlign.lt-lg”, “”], [“”, “gdGridAlign.lt-xl”, “”], [“”, “gdGridAlign.gt-xs”, “”], [“”, “gdGridAlign.gt-sm”, “”], [“”, “gdGridAlign.gt-md”, “”], [“”, “gdGridAlign.gt-lg”, “”]], factory: function DefaultGridAlignDirective_Factory(t) { return ɵDefaultGridAlignDirective_BaseFactory((t || DefaultGridAlignDirective)); }, inputs: { gdGridAlign: “gdGridAlign”, gdGridAlign.xs: “gdGridAlign.xs”, gdGridAlign.sm: “gdGridAlign.sm”, gdGridAlign.md: “gdGridAlign.md”, gdGridAlign.lg: “gdGridAlign.lg”, gdGridAlign.xl: “gdGridAlign.xl”, “gdGridAlign.lt-sm”: “gdGridAlign.lt-sm”, “gdGridAlign.lt-md”: “gdGridAlign.lt-md”, “gdGridAlign.lt-lg”: “gdGridAlign.lt-lg”, “gdGridAlign.lt-xl”: “gdGridAlign.lt-xl”, “gdGridAlign.gt-xs”: “gdGridAlign.gt-xs”, “gdGridAlign.gt-sm”: “gdGridAlign.gt-sm”, “gdGridAlign.gt-md”: “gdGridAlign.gt-md”, “gdGridAlign.gt-lg”: “gdGridAlign.gt-lg” }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); | const ɵDefaultGridAlignDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultGridAlignDirective); | /@PURE/ ɵngcc0.ɵsetClassMetadata(DefaultGridAlignDirective, [{ ℹ ｢wdm｣: Failed to compile.

@julianobrasil - I’ll email you.

@webcat12345 and @bunnyvishal6 et al - v8.0.0 does not include important changes to ngcc that probably support your use cases. You need to use a version built from the master branch. E.g.

"dependencies": {
  "@angular/compier-cli": "https://github.com/angular/compiler-cli-builds",  
   // etc ...
}

did you mean : "@angular/compiler-cli": "https://github.com/angular/compiler-cli-builds", @petebacondarwin

@webcat12345 and @bunnyvishal6 et al - v8.0.0 does not include important changes to ngcc that probably support your use cases. You need to use a version built from the master branch. E.g.

"dependencies": {
  "@angular/compiler-cli": "https://github.com/angular/compiler-cli-builds",  
   // etc ...
}

Same issue with : Angular: 8.0.0-rc.0 and ngx-cookie-service

@gkalpak same as @istiti, 8.0.0-beta.13

@gkalpak I can confirm same beahvior with Angular: 8.0.0-beta.13 & (CLI beta.16)

Thx for reporting @thomasoreilly, @fclemonschool, @vanelizarov. I have updated the tracking doc. (For anyone reporting these, it would be useful to also mention the latest Angular version tried.)

That being said, I wonder if we could use .d.ts typings files to work out these dependencies 🤔

Sadly, no - the imports in the .d.ts files are incomplete, and only reflect the type side of the program.

@speige correct, error is gone

@petebacondarwin it seems Angular compiler failed to compile with first error too (angular-tree-component) I get :

ERROR in There is no typings path for TreeNodeWrapperComponent in C:/Users/.../node_modules/angular-tree-component/dist/components/tree-node-wrapper.component.d.ts.
We need to add an export for this class to a .d.ts typings file because Angular compiler needs to be able to reference this class in compiled code, such as templates.
The simplest fix for this is to ensure that this class is exported from the package's entry-point.

In the latter case (Error: There is no format with import statements in 'C:/.../node_modules/ngx-virtual-scroller' entry-point.) we need a format to have import statements so that we can work out the dependencies between entry-points (and packages). This is because we must compile them in order (most dependended upon first).

It looks like this package only exposes one entry-point format via "main": "dist/virtual-scroller.js",. Looking at that file, this appears to be a CommonJS format. This format is on our roadmap to support - it is related to UMD, which is also on the roadmap.

That being said, I wonder if we could use .d.ts typings files to work out these dependencies 🤔