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';
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
Developed an Electron app using Vuejs and everything works fine in development, but when packaged I keep getting this pop-up after start up (NOTE: This is a sample image - mine doesn't say 'windowsdefender' but is otherwise the same).
Using electron-builder to create the application with the following build json, and it is installed on the PC:
{
"productName": "My App",
"appId": "com.mycompany.myapp",
"win": {
"icon": "build/icon.png",
"target": [
"nsis"
]
}
}
Though the app does open, there is no initial screen. However, I can open the dev tools but there are no errors displayed.
Any ideas on what is causing this or how to resolve?
After many tries, I finally figured it out (or at least I think I know what caused the issue).
The primary issue was that in using vue router (from an app ported from the web), it is important that you use 'hash' mode and not 'history. Add this to your router file:
const router = new VueRouter({
mode: process.env.IS_ELECTRON ? "hash" : "history",
routes
});
See this link for more details (common issues): Vue CLI plugin common issues
Second, I think there is a rights issue (i.e. having elevated rights to install) so I added this line along with the guid to my electron-builder.json file. The result was a build file like this:
{
"productName": "My App",
"appId": "com.abcco.my-app",
"win": {
"icon": "build/icon.png",
"target": "nsis",
"requestedExecutionLevel": "requireAdministrator"
},
"nsis": {
"guid": "6ee647a9-d5c6-46a9-a480-aa7d6d3d1c10",
"oneClick": false,
"allowToChangeInstallationDirectory": true
}
}
As I am developing only for Windows I was able to use material from this page (React but not that different with respect to Electron packaging):
Electron Build file help
The last thing I did was to remove all 'dist' files and uninstall the app entirely (previous versions). I think this cleared up a lot of the 'baggage' left over from testing.
Hopefully this helps others who may experience the same issue.
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 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
Bower and main-bower-files are fantastic, however, when using them with Angular Bootstrap UI, more things are installed/included than required.
Basically : Angular Bootstrap UI, replaces the need for bootstrap.js and it's jquery dependency. However when installing bootstrap, jquery gets installed, then my gulp task which uses main-bower-files, includes jquery and bootstrap.js in my html files.
Is there a way to tell bower, and/or main-bower-files and/or Bootstrap, that jquery and bootstrap.js are not required anymore.
So far I tried commenting the jquery dependency and dist/js/bootstrap.js lines in bower_components/bootstrap/bower.json, but the files are still being included.
1) Switch to wiredep, which I'd recommend. Then you can do something like this:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap']
}))
.pipe(gulp.dest('app'))
});
Note that the above will remove the whole bootstrap, not just its .js files. The exclude array can contain also regexps, which is what is probably needed if you want to retain for instance styles.
And in your HTML file (for javascript):
Replace the js with css where you want to inject styles.
2) Override the bower main files for Bootstrap: provide the following options to main-bower-files:
{
"overrides": {
"bootstrap": {
"main": [
// files you want to include
]
}
}
}
You'll have to check what you don't want to exclude and add them to the main array above.
See also: https://github.com/ck86/gulp-bower-files/issues/33