How to inject “Chart.js” to my module?
Question
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?
2 answers
solution1
0 2018-01-25 09:26:05
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>
solution2
0 2018-01-25 09:50:14
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.