I have simple a navbar in bootstrap. When I reduce the size of chrome browser navbar menus turns into Hamburger icon, when I am clicking on it, menus are not visible.
app.component.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
package.json file
{
"name": "uiassignment",
"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": "~10.0.6",
"#angular/common": "~10.0.6",
"#angular/compiler": "~10.0.6",
"#angular/core": "~10.0.6",
"#angular/forms": "~10.0.6",
"#angular/platform-browser": "~10.0.6",
"#angular/platform-browser-dynamic": "~10.0.6",
"#angular/router": "~10.0.6",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1000.5",
"#angular/cli": "~10.0.5",
"#angular/compiler-cli": "~10.0.6",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
tsconfig.json file
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Project information
Angular CLI: 10.0.7
Node: 12.18.1
Angular: 10.0.11
This menus is not expanding
How can I fix this issue?
There are several issues in your project. I will go step by step and explain, what is wrong.
You added bootstrap in your package.json and installed it using npm i or yarn (depending on what you are using). Afterwards, it is loaded inside node_modules/bootstrap. Additionally, requirements such as jquery and popper are installed in the folder node_modules. That's fine. Then, you use angular.json to import it. However, there are two issues:
(a) You added it in the "test" section, but you have to define it in the "build" section
(b) Several links are incorrect and do not exist (have a look at the node_modules/boostrap/... folder for instance).
Here is your "new" angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
You add a <!doctype html><html lang="en"> ... inside app.component.html. However, app.component.html is loaded inside your index.html (using <app-root></app-root>), so do not add those things in there. Instead, your app.component.html should just contain the <nav>...</nav> and all other contents, but no headings / imports.
Since you defined Bootstrap, etc. in your package.json and loaded it into your project in the angular.json, you do not need to load it again using <script> or <link>.
Here is your "new" app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
and your "new" index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Please note that you should restart your angular cli project after making edits to angular.json
Please also note that adding bootstrap.js and jQuery is not the proper way to use it inside an Angular project. Instead have a look on ngx-bootstrap
If your project does not run for any reason, you can also remove the added styles and scripts from angular.json and use the following lines inside index.html <head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Good luck!
using CDN links of bootstrap and call the css links two times and using different bootstrap js link of different version.
As you are using package of bootstarp .
Import it in angular.json as below :
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Restart ng serve if you're running it, and Bootstrap should be working on your app.
Related
I'm new to the angular world, learning from tutorials, but I don't understand one problem.
I'm trying to remove the Angular example page view, but it still displays on the page. I created a project using: ng new projectName, ng add #angular/material#13.1.1.
In Visual Studio Code I deleted content of app.component.html and added simple HTML tag, but I see still Angular example page. In app.component.ts I have templateUr with app.component.html. Could someone please point out to me what I am doing wrong? I don't understand the problem that is occurring and thank you for trying to explain it.
app.component.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angularmaterial';
}
app.component.html
<h1>Still not work</h1>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angularmaterial</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<h1>eewew</h1>
<app-root></app-root>
</body>
</html>
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angularmaterial": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angularmaterial",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angularmaterial:build:production"
},
"development": {
"browserTarget": "angularmaterial:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angularmaterial:build"
}
},
"test": {
"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": []
}
}
}
}
}
}
package.json
{
"name": "angularmaterial",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.0.0",
"#angular/cdk": "^13.1.1",
"#angular/common": "^14.0.0",
"#angular/compiler": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/forms": "^14.0.0",
"#angular/material": "^13.1.1",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.0",
"#angular/cli": "~14.0.0",
"#angular/compiler-cli": "^14.0.0",
"#types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.2"
}
}
Stop the app using ctrl+c and restart the app using ng serve. It will solve your problem.
I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.
I uses NPM to install.
Here is my
index.html page
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/" >
<title>Acme Product Management</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="assets/scripts/angular.min.js"></script>
<script src="assets/scripts/angular-route.min.js"></script>
<script src="assets/scripts/angular-local-storage.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link href="node_modules/#angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app></pm-app>
<script src="assets/scripts/jquery-3.1.1.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
**Package.json**
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "^2.4.9",
"#angular/compiler": "^2.4.9",
"#angular/core": "^2.4.9",
"#angular/forms": "^2.4.9",
"#angular/http": "^2.4.9",
"#angular/material": "^2.0.0-beta.2",
"#angular/platform-browser": "^2.4.9",
"#angular/platform-browser-dynamic": "^2.4.9",
"#angular/router": "^3.4.9",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"primeng": "^2.0.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"systemjs": "^0.20.9",
"zone.js": "^0.7.7"
},
"devDependencies": {
"concurrently": "^3.4.0",
"lite-server": "^2.2.0",
"tslint": "^4.5.1",
"typescript": "^2.0.2",
"typings": "^2.1.0"
},
"repository": {}
}
I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)
It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.
I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...
I am having some troubles installing PrimeNG properly to use its rich text editor. I've installed everything I would need and it still doesn't work.
Here is my package.json :
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"lodash": "^4.15.0",
"ng2-dropdown": "0.0.12",
"primeng": "^1.0.0-beta.13",
"primeui": "^4.1.15",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
My typings.json :
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
},
"dependencies": {
"lodash": "registry:npm/lodash#4.0.0+20160723033700"
}
}
My index.html :
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="/assets/css/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<script src="node_modules/primeui/primeui-ng-all.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
So I called {EditorModule, SharedModule} in directives of both my app.components.ts and the component where I want to see this;
<p-editor [style]="{'height':'320px'}">
<header>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</header>
</p-editor>
I searched everywhere in this forum but couldn't figure out how to solve this probleme. Can someone please suggest anything? Thanks!
I had a lot of trouble gettings things like the calendar to run. I finally solved it by looking at the demo sample index.html and making sure I was loading all of the scripts they load. There are dependencies on primeUI and jquery, etc. There are plenty:
<link id="themeStyleSheet" rel="stylesheet" type="text/css" href="vendor/primeui/themes/pepper-grinder/theme.css" />
<link rel="stylesheet" type="text/css" href="vendor/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="../app/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="vendor/core-js/client/shim.min.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<!-- sweet alert -->
<script src="vendor/ng2-sweetalert2/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<!-- Datetimepicker, Slider, Schedule -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>
<!-- CodeHighligther -->
<script src="../app/resources/js/prism.js" data-manual></script>
<!-- Charts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<!-- Schedule -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.min.js"></script>
<!-- InputMask -->
<script src="../app/resources/js/jquery.inputmask.bundle.js"></script>
So I have this Yeoman angular fullstack MEAN project where I have added the material design icons to my bower_components. however this is not automaticly added to my index.html page like all my other .css files.
Is there a way to make this happen, because at the moment whenever I start my project I have to add the reference to the .css file manually.
my index.html looks like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" href="app/app.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/account/login/login.css">
<link rel="stylesheet" href="app/admin/admin.css">
<link rel="stylesheet" href="app/app.css">
<link rel="stylesheet" href="app/impression/impression.css">
<link rel="stylesheet" href="app/information/information.css">
<link rel="stylesheet" href="app/main/main.css">
<link rel="stylesheet" href="app/shop/shop.css">
<link rel="stylesheet" href="app/turnament/turnament.css">
<link rel="stylesheet" href="components/modal/modal.css">
<!-- endinjector -->
<!-- endbuild -->
</head>
I whould like it to look like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css" />
<!-- endbower -->
...
</head>
EDIT
bower_component/mdi/bower.json
{
"name": "mdi",
"version": "1.1.70",
"main": [
"css/materialdesignicons.css",
"fonts/*",
"css/*",
"scss/*",
"package.json",
"preview.html"
],
"homepage": "http://materialdesignicons.com",
"authors": [
{ "name": "Austin Andrews", "homepage": "http://templarian.com" },
{ "name": "Google", "homepage": "http://www.google.com/design" }
],
"license": ["OFL-1.1", "MIT"],
"ignore": [
"*.md",
"*.json"
],
"keywords": [
"material",
"design",
"icons",
"webfont"
]
}
/bower.json
{
"name": "lunorth",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-route": ">=1.2.*",
"angular-bootstrap": "~0.11.0",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.6.0",
"angular-animate": "~1.4.2"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
}
}
It looks like you're missing Material Design Icons from the list of dependencies in your projects bower.json file.
If you add the name and version to your dependencies it will fix your issue.
"dependencies": {
"mdi": "1.1.70",
...,
...
}
If you installed the package via the command line you can use --save to add it to your project dependencies.
Another common problem with wiredep is the missing package's bower.json file is missing the 'main' property.
I'm having trouble populating a table, accessing a text file that has JSON like this:
{
"1000": {
"country": "US",
"eventid": 1000,
"venue": "San Francisco, USA"
},
"2000": {
"country": "DE",
"eventid": 2000,
"venue": "Munich, Germany"
},
"3000": {
"country": "GB",
"eventid": 3000,
"venue": "UK (Market House)"
}
}
I have followed the examples on datatables.net and tried loading it on to my HTML
<HTML>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css"/>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatable.js"></script>
<script type="text/javascript" src="dataTables.bootstrap.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Country</th>
<th>Event</th>
<th>Venue</th>
</tr>
</thead>
</table>
</body>
</html>
And the datatable.js is as simple as this
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": 'sample.txt',
"columns": [
{ "country" },
{ "eventid" },
{ "venue" }
]
} );
} );
Can someone help me figure out where I have gone wrong with the code ?
I managed to fix the issue by adding a custom function as part of dataSrc attribute (Thanks Jongyu Lin). Here is the change to my Javascript
$(document).ready(function () {
$('#example').dataTable({
"processing": true,
"ajax": {
"url": 'json.txt',
"dataSrc": function (json) {
var arr = Object.keys(json).map(function(k) { return json[k] });
return arr;
}
},
"columnDefs": [
{
"targets": [2],
"visible": true,
"searchable": true
}
],
"columns": [
{
"data": "eventid"
},
{
"data": "country"
},
{
"data": "venue"
}
]
});
});