Mean.js - 如何注入第 3 方依赖项 (draw2d)?
Mean.js - How to inject a 3rd party dependency (draw2d)?
我从 MEAN Stack 开始,我正在努力做一些我确信它非常基础的事情。
我正在尝试注入由其可下载库提供的 draw2d 的新实例。
我一直有:
“发现错误:[$injector:modulerr] 未能实例化模块均值,原因是:
错误:[$injector:modulerr] 由于以下原因无法实例化模块 draw2d:
错误:[$injector:nomod] 模块 'draw2d' 不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。"
来自:
modules/core/client/app/config.js
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'draw2d'];
这是其他文件:
modules/mymodule/client/controllers/projects.client.controller.js
...
ProjectsController.$inject = ['$scope', '$state', 'Authentication', 'projectResolve', 'draw2d'];
function ProjectsController ($scope, $state, Authentication, project, draw2d) {
$scope.$on('$viewContentLoaded', function(event){
var canvas = new draw2d.create('canvas');
}
);
...
modules/mymodule/client/services/draw2d.client.service.js
(function () {
'use strict';
angular
.module('mymodule')
.factory('draw2d', draw2d);
function draw2d() {
return {
create: function (divName) {
var Draw2d = draw2d;
return new Draw2d().Canvas('canvas');
}
};
}
})();
模块的包在"public/lib/vendors/draw2d"
config/assets/default.js
'use strict';
module.exports = {
client: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css'
],
js: [
'public/lib/vendors/draw2d/lib/canvg.js',
'public/lib/vendors/draw2d/lib/Class.js',
'public/lib/vendors/draw2d/lib/jquery-1.10.2.min.js',
'public/lib/vendors/draw2d/lib/jquery-touch_punch.js',
'public/lib/vendors/draw2d/lib/jquery.autoresize.js',
'public/lib/vendors/draw2d/lib/jquery.contextmenu.js',
'public/lib/vendors/draw2d/lib/json2.js',
'public/lib/vendors/draw2d/lib/pathfinding-browser.min.js',
'public/lib/vendors/draw2d/lib/raphael.js',
'public/lib/vendors/draw2d/lib/rgbcolor.js',
'public/lib/vendors/draw2d/lib/shifty.js',
'public/lib/vendors/draw2d/lib/StackBlur.js',
'public/lib/vendors/draw2d/src/draw2d.js',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js'
],
tests: ['public/lib/angular-mocks/angular-mocks.js']
},
css: [
'modules/*/client/css/*.css',
'public/lib/vendors/draw2d/css/contextmenu.css'
],
less: [
'modules/*/client/less/*.less'
],
sass: [
'modules/*/client/scss/*.scss'
],
js: [
'modules/core/client/app/config.js',
'modules/core/client/app/init.js',
'modules/*/client/*.js',
'modules/*/client/**/*.js'
],
views: ['modules/*/client/views/**/*.html'],
templates: ['build/templates.js']
},
server: {
gruntConfig: 'gruntfile.js',
gulpConfig: 'gulpfile.js',
allJS: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'],
models: 'modules/*/server/models/**/*.js',
routes: ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],
sockets: 'modules/*/server/sockets/**/*.js',
config: 'modules/*/server/config/*.js',
policies: 'modules/*/server/policies/*.js',
views: 'modules/*/server/views/*.html'
}
};
modules/mymodule/core.client.module.js
(function (app) {
'use strict';
app.registerModule('mymodule', ['core']);// The core module is required for special route handling; see /core/client/config/core.client.routes
app.registerModule('mymodule.services');
app.registerModule('kmymodule.routes', ['ui.router', 'mymodule.services']);
})(ApplicationConfiguration);
你能帮我解释一下我错过了什么吗?
非常感谢您的宝贵帮助! :)
天哪,我找到了导致此错误的原因。
我不必在项目依赖项中声明它。
现在工作...
我从 MEAN Stack 开始,我正在努力做一些我确信它非常基础的事情。
我正在尝试注入由其可下载库提供的 draw2d 的新实例。
我一直有: “发现错误:[$injector:modulerr] 未能实例化模块均值,原因是: 错误:[$injector:modulerr] 由于以下原因无法实例化模块 draw2d: 错误:[$injector:nomod] 模块 'draw2d' 不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。"
来自:
modules/core/client/app/config.js
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'draw2d'];
这是其他文件:
modules/mymodule/client/controllers/projects.client.controller.js
...
ProjectsController.$inject = ['$scope', '$state', 'Authentication', 'projectResolve', 'draw2d'];
function ProjectsController ($scope, $state, Authentication, project, draw2d) {
$scope.$on('$viewContentLoaded', function(event){
var canvas = new draw2d.create('canvas');
}
);
...
modules/mymodule/client/services/draw2d.client.service.js
(function () {
'use strict';
angular
.module('mymodule')
.factory('draw2d', draw2d);
function draw2d() {
return {
create: function (divName) {
var Draw2d = draw2d;
return new Draw2d().Canvas('canvas');
}
};
}
})();
模块的包在"public/lib/vendors/draw2d"
config/assets/default.js
'use strict';
module.exports = {
client: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css'
],
js: [
'public/lib/vendors/draw2d/lib/canvg.js',
'public/lib/vendors/draw2d/lib/Class.js',
'public/lib/vendors/draw2d/lib/jquery-1.10.2.min.js',
'public/lib/vendors/draw2d/lib/jquery-touch_punch.js',
'public/lib/vendors/draw2d/lib/jquery.autoresize.js',
'public/lib/vendors/draw2d/lib/jquery.contextmenu.js',
'public/lib/vendors/draw2d/lib/json2.js',
'public/lib/vendors/draw2d/lib/pathfinding-browser.min.js',
'public/lib/vendors/draw2d/lib/raphael.js',
'public/lib/vendors/draw2d/lib/rgbcolor.js',
'public/lib/vendors/draw2d/lib/shifty.js',
'public/lib/vendors/draw2d/lib/StackBlur.js',
'public/lib/vendors/draw2d/src/draw2d.js',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js'
],
tests: ['public/lib/angular-mocks/angular-mocks.js']
},
css: [
'modules/*/client/css/*.css',
'public/lib/vendors/draw2d/css/contextmenu.css'
],
less: [
'modules/*/client/less/*.less'
],
sass: [
'modules/*/client/scss/*.scss'
],
js: [
'modules/core/client/app/config.js',
'modules/core/client/app/init.js',
'modules/*/client/*.js',
'modules/*/client/**/*.js'
],
views: ['modules/*/client/views/**/*.html'],
templates: ['build/templates.js']
},
server: {
gruntConfig: 'gruntfile.js',
gulpConfig: 'gulpfile.js',
allJS: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'],
models: 'modules/*/server/models/**/*.js',
routes: ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],
sockets: 'modules/*/server/sockets/**/*.js',
config: 'modules/*/server/config/*.js',
policies: 'modules/*/server/policies/*.js',
views: 'modules/*/server/views/*.html'
}
};
modules/mymodule/core.client.module.js
(function (app) {
'use strict';
app.registerModule('mymodule', ['core']);// The core module is required for special route handling; see /core/client/config/core.client.routes
app.registerModule('mymodule.services');
app.registerModule('kmymodule.routes', ['ui.router', 'mymodule.services']);
})(ApplicationConfiguration);
你能帮我解释一下我错过了什么吗? 非常感谢您的宝贵帮助! :)
天哪,我找到了导致此错误的原因。 我不必在项目依赖项中声明它。 现在工作...