Why bootstrap not getting loaded properly at Angular CLI MVC based project - asp.net-mvc

I dont know whay bootstrap is not loaded properly at angular CLI Typescript based ASP.NET MVC based project. Somehow, seems default CSS files are overriden or i dont know exactly about the problem and no idea how to figure it out. I almost tried all solutions available on stackoverflow.com
For example following Bootstrap snippet not showing panel headers.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
I just created Angular app via CLI and modified package.json within the app. I did not copied the whole content at root folder.
So my solution structure is :
Moreover, part of angular.json is :
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"assets": [
"src/favicon.ico",
"src/assets"
],
"index": "src/index.html",
"main": "src/main.ts",
"outputPath": "../wwwroot/dist",
"polyfills": "src/polyfills.ts",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
"tsConfig": "src/tsconfig.app.json"
},
.............
and packages.json is :
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.1.3",
"#angular/cdk": "^7.1.1",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/material": "^7.1.1",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"bootstrap": "4.1.3",
"jquery": "^3.3.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.11.0",
"#angular/cli": "~7.1.3",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.27",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
Any body can let me know how to resolve this frustrating functioning error?

Since from what I can tell you don't even need the scss in your compile pipeline and you just need the css, change this;
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
to this;
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
"src/styles.scss"
],
...and ya should be good. Cheers.

Related

ngx-bootstrap tooltip fonts

For some reason my fonts are not rendering correctly with the tooltip in angular.
My Styles are created by Angular CLI (scss)
`
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
`
My package.json is as follows.
"dependencies": {
"#angular/animations": "~13.3.6",
"#angular/common": "~13.3.6",
"#angular/compiler": "~13.3.6",
"#angular/core": "~13.3.6",
"#angular/forms": "~13.3.6",
"#angular/localize": "~13.3.6",
"#angular/platform-browser": "~13.3.6",
"#angular/platform-browser-dynamic": "~13.3.6",
"#angular/router": "~13.3.6",
"#exceptionless/browser": "^2.0.0",
"#popperjs/core": "^2.10.2",
"#zxcvbn-ts/core": "^2.0.1",
"#zxcvbn-ts/language-common": "^2.0.1",
"#zxcvbn-ts/language-en": "^2.0.1",
"ajv": "^6.9.1",
"angular-password-strength-meter": "^4.3.0",
"angular-split": "^13.2.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"core-js": "3.21.1",
"moment": "^2.29.3",
"moment-duration": "0.0.6",
"ngx-bootstrap": "^8.0.0",
"ngx-drag-to-select": "^5.0.1",
"ngx-mask": "^13.1.11",
"ngx-sortablejs": "^11.1.0",
"ngx-toastr": "^14.3.0",
"rxjs": "6.6.0",
"sortablejs": "^1.15.0",
"tslib": "2.3.0",
"typescript": "4.6.4",
"zone.js": "~0.11.4"
},
and the font is rendering using times roman. All component fonts are rendering correctly. I am using scss to generate the styles which are then linked in by Angular using styles.js and not css as per the demo's. When I debug the injected dom it shows the font is set correctly but the browser is rendering the tooltip font as times roman.
I have tried including the bootstrap style directly in the index.html page as per this demo
https://stackblitz.com/edit/angular-2cmbj3-fnhz18?file=index.html
The only difference I can see is that I am using BootStrap 5

Angular Material: material-nav generate does not working

I want to create a responsive side nav. I watched a video on youtube.
click here to see that video
After, I enter below command to the terminal
ng generate #angular/material:material-nav -name=nav
But it give an error as below,
Unknown option: '-e'
How to resolve that?
My Package.json as below,
{
"name": "euc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "~8.3.23",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Angular CLI flags start with a double dash.
ng generate #angular/material:material-nav --name=nav

Electron app shows blank screen when built with electron-builder

As the title explains, i have a simple Electron app that loads a html page when started. Everything works fine, but if i try to build the project using electron-builder (yarn dist), the application shows nothing but a blank screen. Any idea of why this happens?
My project structure is the following:
-- e2e
-- dist
-- node_modules
-- src
-- app
-- assets
-- environments
-- index.html
-- editor.config
-- angular.json
-- broswerlist
-- karma.conf.js
-- main.js
-- package.json
-- package-lock.json
-- tsconfig.json
-- tslint.json
I also post my main.js and package.json files:
main.js
const electron = require("electron")
const {app, Menu, BrowserWindow} = require("electron")
const path = require("path")
let mainWindow
app.on('window-all-closed', e => e.preventDefault() )
app.on('ready', createWindow);
function createWindow() {
mainWindow = new BrowserWindow({
width:1380,
frame:false,
closable: false,
minimizable: false,
maximizable: false,
resizable: false,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.webContents.openDevTools();
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: "file",
slashes: "true"
}))
}
package.json
{
"name": "test_app",
"version": "1.0.0",
"description": "test",
"author": "me",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"electron": "electron .",
"dist": "electron-builder",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"devDependencies": {
"electron": "7.1.8",
"electron-builder": "^22.2.0"
},
"build": {
"target": [
"nsis"
]
},
"dependencies": {
"msal-electron-poc": "^0.1.0",
"#angular-devkit/build-angular": "~0.803.21",
"#angular/animations": "~8.2.14",
"#angular/cli": "~8.3.21",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"fs": "0.0.1-security",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"rxjs": "~6.4.0",
"ts-node": "~7.0.0",
"tslib": "^1.10.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"zone.js": "~0.9.1"
}
}
//Replace
path.join(__dirname, 'dist/index.html')
//with
path.join(__dirname, 'src/index.html')
Had same problem. And was able to run electron on windows by running.
for windows:
vue-cli-service electron:build --mode development --windows
for Linux:
vue-cli-service electron:build --mode development --rpm
And check if there are some hidden errors or it just work after.

Packaging app for platform win32 x64 taking too long using electron v5.0.6

I developped a web app with angular i need to package my web app using electron , it all seems fine until i run electron-packager , it takes forever , i dont know if it is supposed to be this slow or is there something wrong ?
ps : im on windows 7
this is my package.json
{
"name": "recherche-final",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build && electron .",
"pack": "electron-packager."
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.3",
"#angular/cdk": "^6.2.0",
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/forms": "^6.0.3",
"#angular/http": "^6.0.3",
"#angular/material": "^6.4.2",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^6.0.3",
"#angular/language-service": "^6.0.3",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"electron": "^5.0.6",
"electron-packager": "^14.0.1",
"electron-winstaller": "^3.0.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
i expect my app.exe
I know this is a late answer but just in case it helps anybody else- Have you checked how you have packaged your app? Make sure that your package.json files for angular and Electron are different. You are probably packing all the angular node modules as well into the electron application which is not necessary.
https://medium.com/#hellobharadwaj/electron-plus-angular-react-why-use-2-different-package-json-files-361ae47d07f3

Angular5 material Paginator is not working

I want to use MatPaginatorModule in my angular t project but i am getting error:
Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'
1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
...............
html
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
i have imported module in my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { GlobalModule } from './global/global.module';
import { ProtectedModule} from './protetcted/protect-module.component';
import { AppRoutingModule } from './app.routing.module';
// import { MatTableModule } from '#angular/material/table';
import { MatPaginatorModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
GlobalModule,
ProtectedModule,
AppRoutingModule,
// MatTableModule,
MatPaginatorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
i am using angular5
package.json
{
"name": "eci",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.0",
"cfenv": "^1.0.4",
"core-js": "^2.4.1",
"express": "^4.15.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~1.7.2",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.1",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
#Kumail,
Everything looks fine from the snippets you posted.
Though this error will occur only when the required module is not linked. The only reason I could think of is that, you might not have saved app.module.ts file after modifications. I did follow all the steps to integrate a MatPaginatorModule in a test project and it worked. Then I mocked to include that module in app.module.ts but not saved the changes. This time I got the error you posted. Try saving, If you could have missed after modifying app.module.ts file.
If the error is coming while doing testing, then the imports are needed in the test/spec file. (app.component.spec.ts)

Resources