Running the following command:
ng build --prod --base-href ./
I get:
ERROR in : 'clr-icon' is not a known element:
1. If 'clr-icon' is an Angular component, then verify that it is part of this module.
2. If 'clr-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("spinner spinner-sm spinner-inverse" [style.display]="loading ? 'inline-block' : 'none'"></span>
[ERROR ->]<clr-icon clrSignpostTrigger shape="check" size="20" class="is-info" [style.display]="!loading && req")
I'm on Angular 7 and Clarity 1.04.
Extract from my angular.json
:
"styles": [
"node_modules/@clr/icons/clr-icons.min.css",
"node_modules/@clr/ui/clr-ui.min.css",
"node_modules/prismjs/themes/prism-solarizedlight.css",
"src/styles.css",
"node_modules/lato-font/css/lato-font.min.css"
],
"scripts": [
"node_modules/core-js/client/shim.min.js",
"node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/web-animations-js/web-animations.min.js",
"node_modules/prismjs/prism.js",
"node_modules/prismjs/components/prism-typescript.min.js",
"node_modules/@clr/icons/clr-icons.min.js"
]
Any ideas for how I can debug?
clr-icon
is a custom element but you probably know this.
Can you try adding this to your polyfills.ts
file ( it should be at the same level as the app/
directory if you generated with the AngularCLI tool.
import '@webcomponents/custom-elements';
import '@clr/icons';
Then, strip down the scripts array in your angular.json
file be empty and see if it builds. If it does start putting the other scripts listed scripts (minus this: "node_modules/@clr/icons/clr-icons.min.js"
and this: "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
) one by one to make sure they aren't causing any issues.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With