I am using webpack to bundle my files with angular 1.x
ON making bundle facing the issue that is
my first file is app.js where I write
var sampleApp = angular.module('kinatorApp', ['ui.router','ngCookies','oc.lazyLoad','ngResource','ngDraggable','restangular','oi.select','ui.bootstrap','toastr','LocalStorageModule','ngMessages','ngMaterial','ngScrollable']);
and my second file is parentController.js
where my code is
sampleApp.controller("parentCtrl", ['$scope','$rootScope','$compile','$http','$filter','$state','userServices','labelServices','sharedValues','groupServices','channelListService','parentControllerServices','toastr','positioningDataServices','$mdDialog', '$mdMedia', '$window','notification',
function($scope,$rootScope,$compile,$http,$filter,$state,userServices,labelServices,sharedValues,groupServices,channelListService,parentControllerServices,toastr,positioningDataServices,$mdDialog, $mdMedia, $window,notification) {}]);
IN webpack I include these two files by
require('./public/app.js');
require('./public/ParentController.js');
my bundle is successfully made by on load it in index.html it says
Uncaught ReferenceError: sampleApp is not defined
at Object.<anonymous> (bundle.js:471)
at Object.122 (bundle.js:1200)
at __webpack_require__ (vendor.js:55)
at Object.120 (bundle.js:13)
at __webpack_require__ (vendor.js:55)
at webpackJsonpCallback (vendor.js:26)
at bundle.js:1
Unable to get sampleApp from app.js file in bundle
then I made sampleApp a global variable by
externals: {
'sampleApp': ''
}
But it also did,t work
I am using angular 1.x
Related
I am trying to move an angular 1.6 application from ES5 to ES6.
The index html contains the name of the app: ng-app="appSuite"
and we normally reference the individual js files with script tags.
I've now changed the html to refer to the bundle file which should have all the sources in because I've added imports to the app.module.js ..
We use grunt and I've added babel and browserify steps.
The top of the app.module.js now has:
"use strict";
export default appSuite; <<< Is this correct ?
import './access.controller.js';
import './apiClient.service.js';
After Babel it becomes :
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
require('./access.controller.js');
Then the browserify changes it to:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof
require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var
f=new Error("Cannot find module '"+o+"'");throw
f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o]
[0].call(l.exports,function(e){var n=t[o][1][e];return s(n?
n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof
require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})
({1:
[function(require,module,exports){
"use strict";
(function () {
"use strict";
angular.module("appSuite").controller("accessController", accessController);
Unfortunately when I run it now gives:
Uncaught Error: [$injector:nomod] Module 'appSuite' is not available!**
Anyone have an idea what I'm missing here or have a way to debug it ?
Thanks in advance and Happy Holidays !
You need to have empty dependencies loaded with your module ,
const appSuite= angular.module('appSuite', [])
export default appSuite
Trying to get up and running with webpack for angularjs. Trying to setup different angular modules for each folder within /webpack & then inject them into my main app module definition. What am I doing wrong?
Running into this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module webpack due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"photocropper"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
entrypoint:
var angular = require('angular');
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')
])
./webpack/photocrop/client/index.js
var angular = require('angular');
module.exports = angular.module('photocropper', [])
Remember that you need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client') //this is an object
])
You can simply require the file and just inject by name like this:
var firstModule = require('./webpack/photocrop/client')
ngModule = angular.module('webpack', [
'firstModule' // this should work
])
firstModule(ngModule)
I had the same problem and in my case it got solved by changing the assigment in:
var angular = require('angular');
To simply:
require('angular');
The reason is that this assigment is creating a new "angular" variable which is different than the one provided by Angular itself, hence, it doesn't have the 'module' property
I am using the following gulp.js file
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('bundle', bundle);
function bundle () {
gulp.src('./src/*.jsx')
.pipe(babel())
.pipe(gulp.dest('./dist'));
}
gulp.task('build', ['bundle']);
Before transpile "main.jsx" content
import React from 'react';
After Transpile, "js" files generated in the dist folder, has require('')
var _react = require('react');
while requesting for the page index.html
<body>
<div id="app" ></div>
<script src="main.js"></script>
</body>
Uncaught ReferenceError: require is not defined is shown in the console.
I know there is something wrong in the build task, but i am unable to figure out.
In the browser, you can not use require API, so you need to somehow bundle your code, you have few options:
Browserify
Webpack
Rollup
These module bundlers allow you to specify an 'entry' point and then bundle all the required modules together in a single file.
Similar questions that answer this problem:
Gulp + babelify + browserify issue
I have generated a minified angular app with grunt. In the site I get an error:
Cannot GET /views/tabs.html
However when I look in the minified script.js I can see:
angular.module("app").run(["$templateCache", function($templateCache) {
"use strict";
$templateCache.put("views/tabs.html", '<div>hello</div>'}
]);
How can I resolve this error? Why is it not visible to the application?
My app.js looks like below:
//app.js
var angular = require('angular');
angular.module('app', []);
angular.module('app').controller('MainCtrl', function ($scope) {
$scope.test = "abc";
});
//index.html
<body ng-app="app" ng-controller="MainCtrl">
{{test}}
<script src="dist/app.js"></script>
</body>
The directory structure is as follows:
app/
index.html
app.js
node_modules/
angular/
Angular was installed using npm install.
I then compile the code using the following command:
browserify --entry app.js --outfile dist/app.js
Then upon opening the file index.html in the browser I get the following errors:
Uncaught TypeError: undefined is not a function
angular.module('app', []);
Further errors:
2014-11-30 19:44:46.345app.js:4082 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' 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
What could i be missing ?
.
Finally figured it out.
What had to be done is as below:
Create a angular-index.js file in node_modules/angular folder
Contents of this file are as below:
require('./angular.min.js');
module.exports = angular;
Then include this file in the browser option of the package.json file.
How exactly this makes things work I am not yet sure.. but this got the code rolling.