I am able to get the JSON to render but not the styles. I added the css links to the index.html file:
<!-- #CSS Links -->
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/_theme.scss">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/cruze/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/cupertino/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/cupertino/theme.css.map">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/darkness/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/flick/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/home/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/kasper/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/lightness/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/ludvig/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/pepper-grinder/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/redmond/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/rocket/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/south-street/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/start/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/trontastic/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/voclain/theme.css">
However my console gives me a 404 for each link but the path is correct.
In my html file I have:
<div class="col-md-9 col-md-push-3 bordered tableScroll boxSize">
<div class="centerTree">
<p-tree [value]="files" layout="horizontal"></p-tree>
</div>
</div>
component:
#Component({
selector: 'office',
templateUrl: './office.html',
styleUrls: ['office.css'],
encapsulation: ViewEncapsulation.None
})
export class OfficeComponent implements OnInit {
files: TreeNode[];
ngOnInit() {
this.nodeService.getFiles().then(files => {
this.files = [{
label: 'Root',
children: files
}];
});
}
When I look at the console to see what css is rendering it is the CSS of the templates, not primefaces. I tried to override it but was not successful.
Import css inside component ts file
import 'primeng/resources/primeng.min.css'
Related
This is my Html. I have given paths like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="app/components/root/root.css">
<link rel="stylesheet" type="text/css" href="app/components/imgComponent/imgComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/typesComponent/typesComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/sourceComponent/sourceComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/severitiesComponent/severitiesComponent.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body ng-app="appModule">
<app-root></app-root>
</body>
</html>
In my script I wrote:
'use strict';
const appModule = angular.module('appModule',["chart.js"]);
appModule.component('appSeveritiesComponent', {
templateUrl: '/app/components/severitiesComponent/severitiesComponent.html',
controller: severitiesComponentController,
bindings: {
}
});
severitiesComponentController.$inject = [];
function severitiesComponentController() {
}
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
You are missing reference for angular.js
add the reference for angular.js above
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
The order of your scripts matter. If you look at the Installation section on angular-chart.js, you will see the following order:
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
Chart.js should come before angular-chart.js
Moreover, you also need angular.js script inserted before those two.
I need to inject material.js in my angularJS but I have this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24%24HashMapProvider%20%3C-%20%24%24HashMap%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24mdUtil%20%3C-%20%24mdTheming%20%3C-%20%24%24animateQueue
This is my code in :
<link rel="stylesheet" href="SRC/Bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="SRC/Bootstrap/css/font-awesome.css" />
<script src="SRC/AngularJs/AngularJs.js"></script>
<script src="SRC/JQuery/JQuery.js"></script>
<script src="SRC/Bootstrap/js/bootstrap.min.js"></script>
<script src="SRC/AngularJs/Angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css" rel="stylesheet">
And this is my module:
var routeApp = angular.module('myApp', ['ngRoute','ngSanitize','ngMaterial']);
If someone can help me.
The problem came from my versions, resolved :D
it works like this
<link rel="stylesheet" href="SRC/Bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="SRC/Bootstrap/css/font-awesome.css" />
<script src="SRC/JQuery/JQuery.js"></script>
<script src="SRC/Bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css" rel="stylesheet">
hi iam use kendo ui grid but dont compile .iam use mvc with two arrye
this code use Areas name profile .
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.rtl.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/kendo/angular.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.fa-IR.js"></script>
<link href="~/Content/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
<div data-ng-app="app" data-ng-controller="MyCtrl">
<kendo-grid options="gridOptions"></kendo-grid>
</div>
<div id="window"></div>
<script type="text/javascript">
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope) {
$scope.gridOptions = {
i want to use ngAnimate but somehow it doesn't work and i don't know why.
i have added everything to my page and have injected them in my app but still i am getting nothing.
here is my index and my app;
var app = angular.module('iranfile', ['ngAnimate','ngRoute','mgcrea.ngStrap']);
<html ng-app="iranfile">
<!-- ye lahze khafe sho-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> home page </title>
<!-- Add Jquery and bootstrap -->
<script src="js/jQuery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.rtl.min.css"/>
<link rel="stylesheet" href="css/bootstrap/bs-additional/bootstrap-additions.min.css"/>
<!-- / Add Jquery and bootstrap -->
<!-- Angular CSS -->
<link rel="stylesheet" href="js/angular/ng-animation.css"/>
<link rel="stylesheet" href="css/angular/angular-motion.min.css"/>
<!-- Angular CSS -->
<link rel="stylesheet" href="js/toastr/toastr.min.css"/>
<!-- Narvan CSS DOCs -->
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/singup.css"/>
<link rel="stylesheet" href="css/estate.css"/>
<link rel="stylesheet" href="css/favor.css"/>
<link rel="stylesheet" href="css/account.css"/>
<!-- Narvan CSS DOCs -->
</head>
<body>
</body>
<!-- ADD AngularJs -->
<script src="js/angular/angular.min.js"></script>
<!--<script src="css/angular/angular-animate.min.js"></script>-->
<script src="js/angular/angular-1.4.4/angular-animate.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/tooltip.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/parse-options.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-route.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-sanitize.min.js"></script>
<script src="js/client-connection.js"></script>
<script src="js/app.js"></script>
I've ran into lots of issues when using angular-strap & bootstrap-rtl
Try removing bootstrap rtl and check...
I am using underscore for check box selections in Angularjs, till now it is working fine but suddenly I am getting the following error.
GET http://localhost/dashboard2/js/d3angular/underscore-min.map 404 (Not Found) testDashboard.do:1
Uncaught TypeError: Cannot read property 'notify' of undefined fo.min.js?v=1_1_31:106(anonymous function) fo.min.js?v=1_1_31:106(anonymous function)
I have got reference to fix this at https://github.com/jashkenas/underscore/issues/1477. But even after changing to underscore.min.map, I am getting similar error . How can I fix this error?
GET http://localhost/dashboard2/js/d3angular/underscore.min.map 404 (Not Found)
The following are the directives that I have included in my angular js application :
var app = angular.module('myApp', [ 'nvd3', 'smartTable.table', 'snap', 'ui.tree', 'ui.bootstrap' ]);
The following are the relevant js and css files I have included :
<script src="/dashboard2/js/d3angular/angular.js"></script>
<script src="/dashboard2/js/d3angular/d3.min.js"></script>
<script src="/dashboard2/js/d3angular/nv.d3.min.js"></script>
<script src="/dashboard2/js/d3angular/angular-nvd3.js"></script>
<script src="/dashboard2/js/d3angular/Smart-Table.debug.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/dashboard2/js/d3angular/snap.js"></script>
<script src="/dashboard2/js/d3angular/angular-snap.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/angular-ui-tree.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/underscore-min.js"></script>
<script src="/dashboard2/js/app.js"></script>
<script src="/dashboard2/js/services.js"></script>
<script src="/dashboard2/js/controllers.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="/js/jquery-1.9.1.js"></SCRIPT>
<script src="/js/jquery-ui-1.10.2.custom.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dashboard2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-slider.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/d3styles.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/smartTable.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-snap.css" />
<link rel="stylesheet" href="/dashboard2/css/angular-ui-tree.min.css">
<link href="/css/ms-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
In project find underscore.min.map file and rename to underscore-min.map or use link http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.map