Search code examples
javascriptangularvmware-clarityangular-library

angular library - importing @clr/angular causes a Unexpected value 'undefined' error

I want to build an angular library project with some custom components on VMware's clarity framework.

running ng build --prod draft should produce a library output.

Instead, I'm getting:

BUILD ERROR : Unexpected value 'undefined' exported by the module 'ClrFormsNextModule in draft/node_modules/@clr/angular/clr-angular.d.ts'

Error: : Unexpected value 'undefined' exported by the module 'ClrFormsNextModule in draft/node_modules/@clr/angular/clr-angular.d.ts'

at Object.<anonymous> (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
at Generator.next (<anonymous>)
at draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
at new Promise (<anonymous>)
at __awaiter (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
at Object.compileSourceFiles (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
at Object.<anonymous> (draft/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
at Generator.next (<anonymous>)
at draft/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
at new Promise (<anonymous>)

Here is the package.json file of the library project

{
  "name": "draft",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "@clr/angular": "^0.12.0",
    "@clr/icons": "^0.12.0",
    "@clr/ui": "^0.12.0",
    "moment": "^2.22.2",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.2",
    "@webcomponents/custom-elements": "^1.2.0",
    "lodash": "^4.17.10",
    "object-fit-images": "^3.2.3"
  }
}

Inside root/projects/draft/tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "types": [],
    "lib": [
      "dom",
      "es2015",
      "es2017.object"
    ],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@clr/*":[
        "../node_modules/@clr/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "flatModuleId": "AUTOGENERATED",
    "flatModuleOutFile": "AUTOGENERATED"
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Inside root/projects/draft/src/draft.module

import { ClarityModule } from '@clr/angular';

Environment details

  • Angular version: 6.0.3

  • Clarity version: 0.12.0

  • OS and version: macOS 10.13.6

  • Browser: Chrome 68

Solution

  • Version 0.12.3 has a bug in it related to AoT, so if you haven't updated to latest you will see a similar undefined error when trying to build. This is a duplicate of Uncaught TypeError: Cannot read property 'chocolate' of undefined which is the same problem.