未捕获的错误：[$injector:modulerr] 使用外部 js 文件时
Posted
技术标签:
【中文标题】未捕获的错误：[$injector:modulerr] 使用外部 js 文件时【英文标题】：Uncaught Error: [$injector:modulerr] while using external js file 【发布时间】：2018-05-17 22:10:49 【问题描述】：未捕获的错误：[$injector:modulerr] 这是我只在为我的代码使用外部 js 文件时遇到的错误，否则如果我只是在 html/php 文件中复制角度代码，它就可以工作.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
</body>
</html>
app.js
(function()
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope)
);
)();
错误：
angular.min.js:sourcemap:7 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.6%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A290%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A43%3A70%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A322%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20hb%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A332)
at angular.min.js:sourcemap:7
at angular.min.js:sourcemap:43
at p (angular.min.js:sourcemap:8)
at g (angular.min.js:sourcemap:42)
at hb (angular.min.js:sourcemap:46)
at c (angular.min.js:sourcemap:22)
at Uc (angular.min.js:sourcemap:22)
at we (angular.min.js:sourcemap:21)
at angular.min.js:sourcemap:334
at HTMLDocument.b (angular.min.js:sourcemap:38)
【问题讨论】：
【参考方案1】：如果您使用 Angular Routing("ngRoute") 作为依赖注入，则必须在 html 文件中的 angular 下面添加路由脚本。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
或者删除依赖数组。
var app = angular.module('myApp', []);
【讨论】：
【参考方案2】：您必须为“ng-route”添加脚本。最好将脚本标签移动到正文标签的末尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
<script src="angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="app.js"></script>
</body>
</html>
并且不需要在 app.js 中使用 fonction()
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope)
);
【讨论】：
请添加说明您已更改/添加的内容以改进您的答案 我改了答案并在我的答案中解释了以上是关于未捕获的错误：[$injector:modulerr] 使用外部 js 文件时的主要内容，如果未能解决你的问题，请参考以下文章
错误：`未捕获（承诺中）类型错误：无法读取未定义的属性'doc'`