Angular 1 个构建 - 未找到模块
Angular 1 Build - Module not found
我正在开发 angular 1 个应用程序。当 运行 和 dev server
时一切都很好,但是当构建并尝试为 prod serve
(来自 dist)提供服务时,我得到一个模块未找到错误。
我用 yeoman 创建了我的项目,物有所值。
我的 bower.json 文件:
{
"name": "nqa",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.0.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-messages": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-ui-select": "^0.19.8",
"angular-file-upload": "^2.5.0",
"angular-bootstrap": "^2.5.0",
"angular-clipboard": "^1.5.0"
},
"devDependencies": {
"angular-mocks": "^1.4.0",
"ng-image-cache": "^0.4.0"
},
"appPath": "app",
"moduleName": "nqaApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
我的 package.json 文件:
{
"name": "nqa",
"private": true,
"devDependencies": {
"angular-file-upload": "^2.5.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "2.3.1",
"gulp-babel": "^6.1.2",
"gulp-cache": "^0.2.10",
"gulp-connect": "^2.2.0",
"gulp-deploy-ftp": "^1.0.0",
"gulp-filter": "^2.0.2",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.1",
"gulp-karma": "0.0.4",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-ng-annotate": "^1.0.0",
"gulp-plumber": "^1.0.1",
"gulp-replace": "^0.5.4",
"gulp-rev": "^5.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.2.4",
"jasmine-core": "^2.5.2",
"jshint-stylish": "^1.0.0",
"karma": "^1.6.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"lazypipe": "^0.2.4",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.14",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.1",
"vinyl-ftp": "^0.6.0",
"wiredep": "^2.2.2",
"yargs": "^8.0.1"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "karma start test\karma.conf.js"
}
}
来自 app.js 的模块注入,如果有用:
'use strict';
/**
* @ngdoc overview
* @name nqaApp
* @description
* # nqaApp
*
* Main module of the application.
*/
angular
.module('nqaApp', [
'ngAnimate',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'angular-clipboard',
'angularFileUpload',
'ui.select',
])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/cities', {
templateUrl: 'views/cities.html',
controller: 'CitiesCtrl',
controllerAs: 'cities'
})
.when('/locations/:cityId?', {
templateUrl: 'views/locations.html',
controller: 'LocationsCtrl',
controllerAs: 'locations'
})
.when('/quests', {
templateUrl: 'views/quests.html',
controller: 'QuestsCtrl',
controllerAs: 'quests'
})
.when('/clues/:questId?', {
templateUrl: 'views/clues.html',
controller: 'CluesCtrl',
controllerAs: 'clues'
})
.when('/media', {
templateUrl: 'views/media.html',
controller: 'MediaCtrl',
controllerAs: 'media'
})
.when('/demo', {
templateUrl: 'views/demo.html',
controller: 'DemoCtrl',
controllerAs: 'demo'
})
.otherwise({
redirectTo: '/'
});
});
从 index.html 导入部分:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="bower_components/angular-clipboard/angular-clipboard.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/menu.js"></script>
<script src="scripts/controllers/cities.js"></script>
<script src="scripts/controllers/locations.js"></script>
<script src="scripts/services/locations.js"></script>
<script src="scripts/services/cities.js"></script>
<script src="scripts/services/base_url.js"></script>
<script src="scripts/filters/locations.js"></script>
<script src="scripts/controllers/quests.js"></script>
<script src="scripts/services/quests.js"></script>
<script src="scripts/controllers/clues.js"></script>
<script src="scripts/services/clues.js"></script>
<script src="scripts/directives/all.js"></script>
<script src="scripts/filters/quests.js"></script>
<script src="scripts/filters/clues.js"></script>
<script src="scripts/controllers/media.js"></script>
<script src="scripts/services/media.js"></script>
<script src="scripts/controllers/demo.js"></script>
<script src="scripts/directives/includableimage.js"></script>
<!-- endbuild -->
我得到的确切错误:
我尝试过的:
- 删除并重新安装所有软件包
- 更改 app.js
中模块的顺序
这个问题是我在使用 angular-bootstrap 的同时包含了 bootstrap.js。
在开发模式下,这工作得很好,但在构建时,一些依赖冲突破坏了应用程序。删除独立 bootstrap 完成了这件事。
我正在开发 angular 1 个应用程序。当 运行 和 dev server
时一切都很好,但是当构建并尝试为 prod serve
(来自 dist)提供服务时,我得到一个模块未找到错误。
我用 yeoman 创建了我的项目,物有所值。
我的 bower.json 文件:
{
"name": "nqa",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.0.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-messages": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-ui-select": "^0.19.8",
"angular-file-upload": "^2.5.0",
"angular-bootstrap": "^2.5.0",
"angular-clipboard": "^1.5.0"
},
"devDependencies": {
"angular-mocks": "^1.4.0",
"ng-image-cache": "^0.4.0"
},
"appPath": "app",
"moduleName": "nqaApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
我的 package.json 文件:
{
"name": "nqa",
"private": true,
"devDependencies": {
"angular-file-upload": "^2.5.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "2.3.1",
"gulp-babel": "^6.1.2",
"gulp-cache": "^0.2.10",
"gulp-connect": "^2.2.0",
"gulp-deploy-ftp": "^1.0.0",
"gulp-filter": "^2.0.2",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.1",
"gulp-karma": "0.0.4",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-ng-annotate": "^1.0.0",
"gulp-plumber": "^1.0.1",
"gulp-replace": "^0.5.4",
"gulp-rev": "^5.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.2.4",
"jasmine-core": "^2.5.2",
"jshint-stylish": "^1.0.0",
"karma": "^1.6.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"lazypipe": "^0.2.4",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.14",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.1",
"vinyl-ftp": "^0.6.0",
"wiredep": "^2.2.2",
"yargs": "^8.0.1"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "karma start test\karma.conf.js"
}
}
来自 app.js 的模块注入,如果有用:
'use strict';
/**
* @ngdoc overview
* @name nqaApp
* @description
* # nqaApp
*
* Main module of the application.
*/
angular
.module('nqaApp', [
'ngAnimate',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'angular-clipboard',
'angularFileUpload',
'ui.select',
])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/cities', {
templateUrl: 'views/cities.html',
controller: 'CitiesCtrl',
controllerAs: 'cities'
})
.when('/locations/:cityId?', {
templateUrl: 'views/locations.html',
controller: 'LocationsCtrl',
controllerAs: 'locations'
})
.when('/quests', {
templateUrl: 'views/quests.html',
controller: 'QuestsCtrl',
controllerAs: 'quests'
})
.when('/clues/:questId?', {
templateUrl: 'views/clues.html',
controller: 'CluesCtrl',
controllerAs: 'clues'
})
.when('/media', {
templateUrl: 'views/media.html',
controller: 'MediaCtrl',
controllerAs: 'media'
})
.when('/demo', {
templateUrl: 'views/demo.html',
controller: 'DemoCtrl',
controllerAs: 'demo'
})
.otherwise({
redirectTo: '/'
});
});
从 index.html 导入部分:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="bower_components/angular-clipboard/angular-clipboard.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/menu.js"></script>
<script src="scripts/controllers/cities.js"></script>
<script src="scripts/controllers/locations.js"></script>
<script src="scripts/services/locations.js"></script>
<script src="scripts/services/cities.js"></script>
<script src="scripts/services/base_url.js"></script>
<script src="scripts/filters/locations.js"></script>
<script src="scripts/controllers/quests.js"></script>
<script src="scripts/services/quests.js"></script>
<script src="scripts/controllers/clues.js"></script>
<script src="scripts/services/clues.js"></script>
<script src="scripts/directives/all.js"></script>
<script src="scripts/filters/quests.js"></script>
<script src="scripts/filters/clues.js"></script>
<script src="scripts/controllers/media.js"></script>
<script src="scripts/services/media.js"></script>
<script src="scripts/controllers/demo.js"></script>
<script src="scripts/directives/includableimage.js"></script>
<!-- endbuild -->
我得到的确切错误:
我尝试过的: - 删除并重新安装所有软件包 - 更改 app.js
中模块的顺序这个问题是我在使用 angular-bootstrap 的同时包含了 bootstrap.js。
在开发模式下,这工作得很好,但在构建时,一些依赖冲突破坏了应用程序。删除独立 bootstrap 完成了这件事。