Im trying to create a reusable package of both angular and nodejs code into a single repo, and then use that via bower or npm internally. Taking this simple example below, I cannot get it to work in an existing angular app.
getting the typical angular error below because the module cannot be found.
Error: [$injector:modulerr] Failed to instantiate module toolkit due to:
Error: [$injector:nomod] Module 'toolkit' is not available!
Here is my test.module.js file.
var testService = require('./test.service.js');
angular.module('noble.test', [
]).service('TestService', testService);
here is test.service.js
module.exports = function($http){
this.exposedFn = exposedFn;
////////////////
function exposedFn() {
alert('Hello!');
}
}
Here is my index.js
require('./test/test.module.js')
angular.module('noble.toolkit', [
'noble.test'
]);
directory structure:
index.js
test
test.service.js
test.module.js
browserify command
browserify --entry index.js -o dist.js
Related
I have copied my existing Angular Project src and package.json file and created new angular project and replaced with my backup src and package.json files.
After that i run npm install. when i try to run the project by ng serve command i am getting this error.
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/Users/Desktop/Angular/matrix/src/app/ads1/ads1.module.ngfactory.js' in '/Users/Desktop/Angular/matrix/$$_lazy_route_resource'
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/Users/Desktop/Angular/matrix/src/app/ads2/ads2.module.ngfactory.js' in '/Users/Desktop/Angular/matrix/$$_lazy_route_resource'
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/Users/Desktop/Angular/matrix/src/app/ads3/ads3.module.ngfactory.js' in '/Users/Desktop/Angular/matrix/$$_lazy_route_resource'
ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/Users/Desktop/Angular/matrix/src/app/banner/banner.module.ngfactory.js' in '/Users/Desktop/A
Yeah found the issues its an angular version mismatch.
You need to add paths to your lazy loaded modules to "files" in tsconig.aot.json:
...
"files" [
...
"./ads1/ads1.module.ts",
etc
...
],
It's my first React component for publication in NPM. I use react-webpack-component package from Yeoman to start my project. But when I install and import my component to React app, I catch error:
Failed to compile.
Error in ./~/kladrapi-react/index.js
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`.
# ./~/kladrapi-react/index.js 1:82-98
I'm understand this error, but not understand how correctly import React modules to my component!
Actual version on GitHub
I think there are multiple issues in your code.
In index.html:
#line-- <script src="kladrapi-react.js"></script>
The file name is "kladrapi-react.jsx" not "kladrapi-react.js".
Second issue, here you are expecting "kladrapi-react.js(x)" to be on root level. Which is not the case. According to your folder structure "kladrapi-react.js(x)" file is at ./lib/kladrapi-react.jsx.
Apart from this, in your kladrapi-react.js(x) file you have mixed ES5 and ES6 syntax. You are accessing the variable KladrapiReact in index.html but you haven't exported it as 'KladrapiReact'. I would recommend you to put 'React.createClass....' code in a separate component.
For the error you are receiving you need to use 'case-sensitive-paths-webpack-plugin':
This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk.
npm install --save-dev case-sensitive-paths-webpack-plugin
Usage:
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var webpackConfig = {
plugins: [
new CaseSensitivePathsPlugin()
// other plugins ...
]
// other webpack config ...
}
For more info on this plugin read documentation here.
Module not found: [CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js does not match the corresponding path on disk react.
# ./~/kladrapi-react/index.js
I installed angular-sweetalert ^1.1.2 via npm install --save angular-sweetalert and tried to inject it:
var app = angular.module('myApp', [
require('angular-sweetalert') // doesn't work
]);
I'm getting the following Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'module' is not a function, got undefined
It seems like it's depending on more:
include the files in your app
i. SweetAlert.min.js
ii. sweet-alert.js OR sweet-alert.min.js
include the module in angular (i.e. in app.js) - oitozero.ngSweetAlert
Any ideas how to properly install/require the module?
Thanks in advance!
The module injector name is wrong, it should be 'oitozero.ngSweetAlert' rather than 'angular-sweetalert', also don't use require in the module injector. From angular.module says
A module is a collection of services, directives, controllers,
filters, and configuration information. angular.module is used to
configure the $injector.
var app = angular.module('myApp', [
'oitozero.ngSweetAlert'
]);
PS: Make sure all the dependency files (step 2) are included before inject the library module.
I want to use materialize for my angular project from https://github.com/krescruz/angular-materialize but I get the error
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module F1FeederApp due to: Error: [$injector:modulerr]
Failed to instantiate module ui.materialize due to: Error:
[$injector:nomod] Module 'ui.materialize' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
In my app.js:
angular.module('F1FeederApp', [
'ui.materialize',
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
What am I doing wrong? According to the link above these declarations should have been enough..
Try running this in root of your project if you are using bower.
bower install angular-materialize --save
and add the source file angular-materialize/src/angular-materialize.js into your index.html
OR
If you are not using bower or node download this file in your project and add it in your index.html
Hope this helps
I've just added angular-leaflet-directive to my project and when I come to build it with Grunt, it's now failing. The dependency was added using bower. This project was built using the Yeoman angular-generator.
Here I'm including the leaflet-directive in my app.js
angular
.module('statsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'leaflet-directive'
])
And then for now, I simply have <leaflet></leaflet> in my view just to get things started.
When the Grunt build fails, I get this error message
Error: [$injector:modulerr] Failed to instantiate module statsApp due to:
Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to:
Error: [$injector:nomod] Module 'leaflet-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This SO post solved my problem. It's not specific to the module I'm adding, but specific to Karma tests failing because they didn't know about the leaflet-directive module.
AngularJS Error: Module ngAnimate is not available