I am trying to create a Storybook using the Angular Material library in an nx app but I can't get the styles to appear that come along with the library. So the component renders but there are no styles along with it. I've added the component to Storybook like so:
export default {
title: 'Buttons',
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [
MatButtonModule
],
}),
]
} as Meta<ButtonComponent>;
This screenshot shows the Primary Button but doesn't get the correct purple styling.
How do I go about getting something like this import into Storybook so the theme comes through?
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
This is also an nx app so there is no angular.json, but a project.json and a workspace.json. I have try adding the theme to project.json as I have below but doesn't work, I would assume it needs to passed to storybook directly somehow and not inside of the project.json (which would apply to the app itself and not storybook)?
"build": {
"options": {
"styles": [
"node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css"
],
"scripts": []
}
},
Using Angular Material "13.2.3", "#nrwl/storybook": "13.8.3", and then these additional libraries:
"#storybook/addon-essentials": "6.5.0-alpha.41",
"#storybook/addon-knobs": "6.4.0",
"#storybook/addons": "^6.5.0-alpha.41",
"#storybook/angular": "6.5.0-alpha.41",
"#storybook/api": "6.5.0-alpha.41",
"#storybook/builder-webpack5": "6.5.0-alpha.41",
"#storybook/core-server": "6.5.0-alpha.41",
"#storybook/manager-webpack5": "6.5.0-alpha.41",
Any help is much appreciated!
In your project.json there should be a storybook target. That's where you need to add styles.
build only affects the build target.
e.g.
"storybook": {
"executor": "#storybook/angular:start-storybook",
"options": {
"port": 4400,
"configDir": "libs/shared/form-controls-ui/.storybook",
"browserTarget": "shared-form-controls-ui:build-storybook",
"compodoc": false,
"styles": [
"./node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css"
]
},
Maybe is a little bit too late but here is what I've done.
I've created a styles.scss file in the root of the project, inside it I've imported
#import '~#angular/material/theming';
#include mat-core();
and then I've imported it into scss of the component.
You can skip the scss in the root and 1just import material into the component's scss.
Cheers!
Related
I am trying to use rollup to build a mini react component library of sorts, as soon as I add a react-konva component the errors appears, when I add the konva to the example I using to test the library it works fine leading me to assume its something with the way rollup handles konva. The only thing that I have seen on the github for react-konva that may link to this is: https://github.com/konvajs/react-konva/issues/504
My Rollup Config
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "#rollup/plugin-image";
const packageJson = require("./package.json");
export default {
input: "src/BuildScreen.tsx",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
image()
]
}
The Error
If anything else is needed lmk, thanks in advance to anyone that helps
Well I look stupid, I randomly decided to change from duckduckgo to google to look up the issue and got a few github links for it one being https://github.com/konvajs/react-konva/issues/189 which made me think to remove my react konva and konva and reinstall it to the latest version and it worked my react-konva was on 16.13 or something and when I upgraded ended up on 17.0.0 which worked
I have an Angular project with PrimeNg Library and I want to use p-dropdown component I imported it at app.module file like this:
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
And when I use it on an html file:
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]="selectedChartOption"></p-dropdown>
</div>
This is How it looks:
It doesn't render my [options] array which is an array with label and value attributes and it doesn't show the styling properly.
What I'm missing here?
I just had exactly the same issue.
Ensure the "styles" array includes the prime ng style sheets under the "build" AND "test" (under "architect" under the project under "projects"):
"styles": [
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css"
],
Other stylesheets will probably already be there. Other themes are available.
I only found the relevant documentation after working out the solution, but it is detailed here on the PrimeNG web site:
https://www.primefaces.org/primeng/showcase/#/setup in the Styles Configuration section at the bottom of the page.
I've deployed my angular 7 project in cumulocity server. No errors while building and deploying the application. But, Bootstrap CSS styling is not working properly.
In package.json I've mentioned these dependencies.
"#c8y/ngx-components": "1004.2.0",
"#c8y/style": "1004.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
In the new Angular Web SDK the Cumulocity Team switched to ngx-bootstrap. It is included in ngx-components, so no need to add it.
Your issue might be that some styles are missing as Cumulocity just comes with a subset of bootstrap. You might need to add bootstrap CSS to your app to make it working:
Add a branding entry in the package.json:
"c8y": {
"application": {
"name": "tutorial application",
"contextPath": "tutorial-application",
"key": "tutorial-application-key",
"brandingEntry": "./branding/branding.less",
"globalTitle": "Pied Piper IoT",
"tabsHorizontal": true
}
}
Then add the #c8y styles plus bootstrap in that file:
#import '~#c8y/style/extend.less';
#import '~yourpatt/to/boostrap.css';
I am trying to use mat-dialog in my angular custom element. I works fine when in the angular app but can't seem to bundle the material theme while building to custom element.
When i inspect the code outside of angular app, no style is attached to any of the cdk class. Everything seem to work fine when running in the angular server. How do i include the needed css with the custom element?
My app.module file
#NgModule({
[ ...
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatDialogModule,
...
],
providers: [ConnectBackendService],
entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('my-element', <Function>el);
}
ngDoBootstrap() {}
}
and my styles.css file
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
My dialog should have absolute positioning, should be aligned to the center of the window and should have a backdrop. Currently, none of these applies to the dialog box
I had the same issue and i reported it to Google on their GitHub page for Angular components. It is now tagged as "Low-priority issue that needs to be resolved" by Google.
https://github.com/angular/components/issues/15968
Just letting you and anyone else who sees this thread know so that they can find a possible future fix in my github post when/if Google fixes this issue.
Fixed it by going to angular.json file, changed extractCss property to false and added styles.js to build files
#angular/cli#7+ allows a customWebpackConfig to be specified to provide custom webpack configuration, such as:
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./build/custom-webpack.config.js",
"mergeStrategies": {
"externals": "prepend"
}
},
...
This file then technically allows you to prepend, append or replace any portion of the webpack configuration. Prior to upgrading to #angular#7.1.3 and #angular/cli#7.1.3 we had ejected the webpack configuration to make some additions. One such addition was the postcss-momentum-scrolling postcss-loader plugin that automatically enabled iOS momentum scrolling on all scrollable containers.
I am seeking support on figuring out how to generate the necessary custom webpack code to load this plugin via the supported customizations allowed by #angular/cli#7+.
Here is a sample of what I have tried in my custom-webpack.config.js file:
const postcssMomentumScrolling = require('postcss-momentum-scrolling');
module.exports = {
module: {
rules: [
{
test: /\.scss$|\.sass$/,
use: [
{
"loader": "postcss-loader",
"options": {
"plugins": [
postcssMomentumScrolling(),
]
}
}
]
},
],
},
};
As soon as I touch the scss chunk of the webpack config, it seems to do a replace instead of a merge or prepend, breaking the build.
I am wondering if anyone has a guide or suggestions on how to see what the initial webpack configuration that #angular/cli generates that is the starting point for modifications and a way to preview/peek at the code to be executed as debugging.
Also, an example of a similar customization would be great.
Thanks!
I think you need to tell to "customWebpackConfig" which portion to merge. Like this:
"mergeStrategies": {
"module.rules": "prepend"
}
In this way you're going to tell to merge with prepend strategy.
According to "custom-webpack" documentation it should default to "append" which doesn't seem the case in your example.
It's been a while since you've put the question but I wanted to actually ask if you have been able to fix it since I'm running in some issues getting my "module.rules" merged...it seems to work only if I set "replace" strategy.