CODEWITHSUNDEEP
angularjsmodule
Patrick McDermott
Patrick McDermott

Reputation: 1220

Modules won't load in application

I know this is going to be a very simple error I am missing.

In my Angularj App, Error: Failed to instantiate module myApp due to: persists on showing. I know this down to the module not being loaded before being called by my own but I have been staring at my code trying to understand why it won't load i.e my own script loading before the module CDNs, spelling mistake etc.

My scripts are loaded like so:

<head>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>

    <script src="app/components/chart/components/chartComponent.js"></script>

    <script src="app/components/chart/services/chartService.js"></script>

    <script src="app/app.module.js"></script>
    <script src="app/app.routes.js"></script>

    <title>Angular</title>

</head>

And in my app.module.js I try to inject two modules chartjs and uirouter. I switch them about and which ever is first it still flags an error

var app = angular.module('myApp', ['chart.js', 'ui.router']);

Question

Why are the modules failing to load? Sorry for the simple question.

Upvotes: 0

Views: 33

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You are missing the reference for angular-chart.js and reorder the references as follows,

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>

Upvotes: 1

Related Questions