Rendering Carbon Angular components

[sumanapp]

Hi, I'm a first time Carbon Angular component user. Here are the steps I followed:

1. Added the following to my package.json (devDependencies):
   "carbon-components": "^10.28.0",
   "carbon-components-angular": "^4.40.1",
   "@carbon/icons-angular": "^11.2.1",
   My angular version: 11.2.2 , npm version: 6.14.11, node version: 10.23.3

2. Added: @import "~carbon-components/css/carbon-components.min.css" at the top of my
   _generic.scss file that I include in my angular.json file like:
   "styles": [
   "src/assets/styles/_generic.scss"
   ],
   I assume this step includes all Carbon styles into my project but it seems like none of the styles are applying to the components.

3. in my app.module.ts I imported :
   import {
   InputModule, ButtonModule, SliderModule, SearchModule, TableModule, ProgressIndicatorModule, ToggleModule, FileUploaderModule,
   PaginationModule, DialogModule, ModalModule, RadioModule, AccordionModule, NumberModule, DropdownModule, SelectModule, TagModule, CheckboxModule,
   NotificationModule, PlaceholderModule, LoadingModule, BreadcrumbModule
   } from 'carbon-components-angular';
   and:
   import {
   CheckmarkFilledModule, InformationModule, ViewModule, ViewOffModule, ChevronDownModule, ChevronUpModule, ChevronRightModule,
   ArrowLeftModule, ArrowRightModule, HomeModule, SettingsModule, UserFilledModule, PlayOutlineModule, ChevronLeftModule,
   DataStructuredModule, Data_1Module, CheckmarkModule, CloseModule, RadioButtonModule, CollaborateModule, UploadModule,
   DeleteModule, UnlockedModule, DownloadModule, FolderModule, FolderAddModule, AddModule, SubtractAltModule, DocumentExportModule,
   RenewModule, TerminalModule, EditModule, UndoModule, YAxisModule, CaretUpModule, CaretDownModule, SettingsAdjustModule,
   VisualRecognitionModule, WarningFilledModule, WarningModule, DocumentModule
   } from '@carbon/icons-angular';

and included all of those modules in the exports[] array in my module definition.

Problem 1: gstatic fonts used by the carbon library are causing CSP ( Content security policy) issues. Our server is strict and cannot refer to external URLs. Is there a way to locally get all the 78 IBM fonts that are being referenced in the attached screenshot. If so how can I over ride the URL source in the native carbon comps package to use the local fonts from my assets/fonts/ directory?

Problem 2: Trying to use in a Angular form. And it doesn't render the checkbox icon on screen. Here is the code:
<ibm-checkbox
[id]="field.fieldName + '_checkImg'" Checkbox
name="{{this.translate.instant('FIELDLABELS.'+field.fieldLabel)}}"
[formControlName]="field.fieldName"
(change)="onCheckboxChange($event)" [checked]="true">
{{this.translate.instant(field.fieldLabel)}}

This renders like so in the DOM:

Any help is appreciated.
Thank you,
Suman

[zvonimirfras]

Hi @sumanapp!

For problem 1 check the guide. Specifically, the self-hosted part. You may need to $css--font-face: false; before importing carbon scss.

You mentioned you included all the modules in the exports array. They should be in the imports array if I'm not misreading something. ngmodules
This might fix your problem 2.

[sumanapp]

Hi @zvonimirfras,

Thank you for the pointers!

Problem 2: Has been resolved. Problem was: The necessary Carbon checkbox modules were imported into my root module previously. (appModule). Where as, the actual element was in a sub-module's template. (My project has multiple sub modules that get imported into the appModule). When I moved all the Checkbox related Carbon imports into the sub-module that's actually using the element, it then renders correctly.
I then attempted creating a sharedModule and let all the Carbon imports be in the SharedModule and import the SharedModule into all the other sub-modules. That approach didn't work either.
Maybe there is a better way to get around the module encapsulation issue, but my immediate problem with the rendering is fixed.

Problem 1: I tried getting the @ibm/plex library (into a separate repository) and manually copied some .woff and .woff2 files for IBM Plex Mono, into my local /assets/fonts/ directory. And in my main scss file a created definitions like the following:

$base-font-url: '//assets/fonts/';

@font-face {
font-family: 'IBM Plex Mono';
font-weight: 500;
src: url($base-font-url + "IBMPlexMono-Regular.woff") format('woff');
}

@font-face {
font-family: 'IBM Plex Mono';
font-weight: 400;
src: url($base-font-url + "IBMPlexMono-Light.woff") format('woff');
}

I then built and deployed in production, but still it didn't help resolve IBM Plex Mono font errors. I expected at least the Regular, and light fonts to be resolved.

[zvonimirfras]

It looks like it should work, at first. This isn't exactly the approach explained in the guide (the guide recommends using a url with ~@ibm... which uses the node_modules version and letting your bundler take care of packaging it correctly.

If the fonts are actually available as files on your deployed location, I'd expect them to show correctly.

@joshblack is there something obvious here in "Problem 1" that I'm missing?

[sumanapp]

Setting "$css--font-face : false;" helped resolve Problem 1. Thanks!