search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

BUILD ERROR - when compiling with ng-packagr #2363

Closed keshav1007 closed 6 years ago

keshav1007 commented 6 years ago 
[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

Build should be successful

Actual behavior

When trying to build a angular library using ng-packagr. Build failure is happening with following error

BUILD ERROR (1,1): : Directive ɵcb, Property 'block' does not exist on type 'ClrDatagridColumnToggleButton'. node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(6,13): : Property 'NAV_LEVEL_1' does not exist on type 'ResponsiveNavCodes'. node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(14,13): : Property 'NAV_LEVEL_2' does not exist on type 'ResponsiveNavCodes'.

Error: (1,1): : Directive ɵcb, Property 'block' does not exist on type 'ClrDatagridColumnToggleButton'. node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(6,13): : Property 'NAV_LEVEL_1' does not exist on type 'ResponsiveNavCodes'. node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(14,13): : Property 'NAV_LEVEL_2' does not exist on type 'ResponsiveNavCodes'.

at Object.<anonymous> (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
at next (native)
at /Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
at __awaiter (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
at Object.compileSourceFiles (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
at Object.<anonymous> (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
at next (native)
at /Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
at __awaiter (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:3:12)
at exports.compileNgcTransform.transform_1.transformFromPromise (/Users/keshavs/test/test-ngPackagr/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:17:75)

error An unexpected error occurred: "Command failed. Exit code: 111

Reproduction of behavior

Created a repo for reproducing this issue - https://github.com/keshav1007/ng-packagr

Build will fail at compilation phase.

Environment details

gnomeontherun commented 6 years ago

I was able to use Angular 6's library feature to generate a library (which configures ng-packagr and things for you) and build a library that imports Clarity. I believe this is more of a problem with how you're setting up your project in some way.

https://github.com/gnomeontherun/library-with-clarity

Assuming you have Angular CLI v6+, use the following process.

ng new myProject
cd myProject
ng add @clr/angular@next
ng generate library myLibrary
// add clarity to your library
ng build myLibrary
keshav1007 commented 6 years ago

But i have not done anything in the given repo. Just imported clarity module and the build fails. Why the build is not successful in the given version?

gnomeontherun commented 6 years ago

I think it has to do with the purpose of ng-packagr, which is to publish libraries and not applications. The fact your trying to build the AppModule is not realistic. My point is that if it works using the above approach, then there is likely something with how you've setup ng-packagr in your project that is causing this problem.

chihosin commented 6 years ago

@keshav1007 I'm using clarity base on JHipster v5, it's package by Webpack, but I meet the same problem!

gnomeontherun commented 6 years ago

@ChihoSin do you have a reproduction that I can see? I'm not sure what the similarities are, but if it works using the Angular 6 CLI configuration, I suspect its more of a configuration issue.

chihosin commented 6 years ago

package.json

"dependencies": {
        "@angular/animations": "5.2.8",
        "@angular/common": "5.2.8",
        "@angular/compiler": "5.2.8",
        "@angular/core": "5.2.8",
        "@angular/forms": "5.2.8",
        "@angular/platform-browser": "5.2.8",
        "@angular/platform-browser-dynamic": "5.2.8",
        "@angular/router": "5.2.8",
        "@clr/angular": "^0.11.15",
        "@clr/icons": "^0.11.15",
        "@clr/ui": "^0.11.15",
        "@fortawesome/angular-fontawesome": "0.1.0-9",
        "@fortawesome/fontawesome-svg-core": "1.2.0-11",
        "@fortawesome/free-brands-svg-icons": "^5.1.0-8",
        "@fortawesome/free-solid-svg-icons": "5.1.0-8",
        "@webcomponents/custom-elements": "^1.1.0",
        "core-js": "2.5.3",
        "ng-jhipster": "0.4.5",
        "ngx-cookie": "2.0.1",
        "ngx-infinite-scroll": "0.5.1",
        "ngx-webstorage": "2.0.1",
        "reflect-metadata": "0.1.12",
        "rxjs": "5.5.6",
        "swagger-ui": "2.2.10",
        "tslib": "1.9.0",
        "web-animations-js": "^2.3.1",
        "zone.js": "0.8.20"
    },
    "devDependencies": {
        "@angular/cli": "1.7.3",
        "@angular/compiler-cli": "5.2.8",
        "@ngtools/webpack": "6.0.0-beta.4",
        "@types/jasmine": "2.8.6",
        "@types/node": "9.4.7",
        "@types/selenium-webdriver": "3.0.8",
        "angular-router-loader": "0.8.2",
        "angular2-template-loader": "0.6.2",
        "browser-sync": "2.23.6",
        "browser-sync-webpack-plugin": "2.2.2",
        "cache-loader": "1.2.2",
        "codelyzer": "4.2.1",
        "copy-webpack-plugin": "4.5.1",
        "css-loader": "0.28.10",
        "exports-loader": "0.7.0",
        "extract-text-webpack-plugin": "4.0.0-beta.0",
        "file-loader": "1.1.11",
        "fork-ts-checker-webpack-plugin": "0.4.1",
        "generator-jhipster": "5.0.0-beta.1",
        "html-loader": "0.5.5",
        "html-webpack-plugin": "3.0.6",
        "husky": "0.14.3",
        "jasmine-core": "2.7.0",
        "jasmine-reporters": "2.2.1",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-coverage": "1.1.1",
        "karma-intl-shim": "1.0.3",
        "karma-jasmine": "1.1.0",
        "karma-junit-reporter": "1.2.0",
        "karma-notify-reporter": "1.0.1",
        "karma-remap-istanbul": "0.6.0",
        "karma-sourcemap-loader": "0.3.7",
        "karma-webpack": "2.0.13",
        "lint-staged": "7.0.0",
        "merge-jsons-webpack-plugin": "1.0.14",
        "node-sass": "4.7.2",
        "postcss-loader": "2.1.1",
        "prettier": "1.11.1",
        "protractor": "5.1.2",
        "protractor-jasmine2-screenshot-reporter": "0.4.0",
        "proxy-middleware": "0.15.0",
        "puppeteer": "1.1.1",
        "rimraf": "2.6.1",
        "sass-loader": "6.0.7",
        "sourcemap-istanbul-instrumenter-loader": "0.2.0",
        "style-loader": "0.20.3",
        "tapable": "1.0.0",
        "thread-loader": "1.1.5",
        "to-string-loader": "1.1.5",
        "ts-loader": "4.0.1",
        "ts-node": "5.0.1",
        "tslint": "5.9.1",
        "tslint-config-prettier": "1.9.0",
        "tslint-loader": "3.6.0",
        "typescript": "2.7.2",
        "uglifyjs-webpack-plugin": "1.2.3",
        "webpack": "4.1.1",
        "webpack-cli": "2.0.11",
        "webpack-dev-server": "3.1.1",
        "webpack-merge": "4.1.2",
        "webpack-notifier": "1.6.0",
        "webpack-visualizer-plugin": "0.1.11",
        "workbox-webpack-plugin": "3.0.0-beta.1",
        "write-file-webpack-plugin": "4.2.0"
    }

build log:

$ ngc -p tsconfig-aot.json
(1,1): : Directive ɵcb, Property 'block' does not exist on type 'ClrDatagridColumnToggleButton'.
node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(6,13): : Property 'NAV_LEVEL_1' does not exist on type 'ResponsiveNavCodes'.
node_modules/@clr/angular/clr-angular.d.ts.ClrHeader.html(14,13): : Property 'NAV_LEVEL_2' does not exist on type 'ResponsiveNavCodes'.
src/main/webapp/app/entities/organization/organization/organization.component.html(123,13): : Directive ɵcb, Property 'block' does not exist on type 'ClrDatagridColumnToggleButton'.
src/main/webapp/app/entities/organization/organization/organization.component.html(124,13): : Directive ɵcb, Property 'block' does not exist on type 'ClrDatagridColumnToggleButton'.
gnomeontherun commented 6 years ago

That doesn't really help me, as I don't know how you're actually building the project. Do you have the ability to setup a github project that demonstrates the build error?

keshav1007 commented 6 years ago

@ChihoSin can you share your project and library folder structure?

gnomeontherun commented 6 years ago

Please also see https://github.com/vmware/clarity/pull/2377, this may resolve this issue.

gnomeontherun commented 6 years ago

Please test with 0.12.1 when it is released tomorrow!

gnomeontherun commented 6 years ago

@ChihoSin or @keshav1007 have you tried Clarity 0.12.1 yet?

aaronfrost commented 6 years ago

@keshav1007 did you solve this? I am getting the same error today. v0.12.11 of clarity.

keshav1007 commented 6 years ago

@aaronfrost yes I was able to solve this by bundling only the app folder code without including the whole application folder

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.