I have an app made with Angular (angular 1.6) and NodeJS, and I can't import the angular library ngResource into my app. These are the steps I did:
1: in command line I input npm install --save angular-resource
2: in app.js:
import angular from 'angular';
import ngResource from 'angular-resource';
import uiRouter from 'angular-ui-router';
import Components from './components/components';
angular.module('myApp', [
uiRouter,
Components,
ngResource
])
.component('homePage', HomeComponent)
.service('AirportsService', AirportsService)
.service('CheapFlightService', CheapFlightService)
and after doing that, I get this error in the browser:
angular-resource.js:444 Uncaught TypeError:
angular.module(...).info is not a function
Looks like you are running into compatibility problem with angularjs 1.6.x modules.
Make sure the angular and the associated modules are of same version in package.json.
With angular#1.6.7 and angular-resource#1.6.7, the angular1 components does work fine for me.
Related
I am trying to use an Angular JS library in my Angular 8 app and following this
After exporting the js module and bootstrapping it in main.ts I get this error while compiling and have no idea what to do.
This is my angular js module (fef.forms.module.ajs.ts):
import * as angular from 'angular';
const MODULE_NAME = 'fef.forms';
angular.module(MODULE_NAME, ['wj', 'fef.shared']);
export default MODULE_NAME;
PS: It Can't resolve 'angular' in this js module.
I'm using the new UI router.
"dependencies": {
"#uirouter/angularjs": "^1.0.6"
}
using webpack to build the project. my app.js to bootstrap the app looks like,
import angular from 'angular';
//import uirouter from 'ui.router';
import uiRouter from 'angular-ui-router';
angular
.module('app', [
uiRouter
]);
For dependencies I have tried injecting uiRouter and uirouter and (ui.router & ui-router & angular-ui-router).
Nothing seems to be working. What am I missing here?
Try use the right injection name ui.router. Also ensure that you using ui-router version 0.4.2 while 1.0.x has some problems with AngularJS 1.6.
import angular from "angular"
import "angular-ui-router"
angular.module('app', ['ui.router']);
Dependencies:
"dependencies": {
"#uirouter/angularjs": "0.4.2"
}
try to import ui-router 1.x like this:
import uirouter from '#uirouter/angularjs';
and before this, if you are using TypeScript, try to specific your ui-router's path in tsconfig.json as
"paths": {
"#uirouter/angularjs":["node_modules/#uirouter/angularjs/lib/index.d.ts"]
}
Should be fine then.
I'm using Webpack to bundle AngularJS with Typescript (with the default setup suggested here) and I cannot include modules that do not have default exports, such as ui-bootstrap. Modules such as ui-router do not have such problem since their typings mention a default export.
JS code works:
import * as angular from 'angular';
import router from 'angular-ui-router';
import uibootstrap from 'angular-ui-bootstrap';
angular.module('app', [uirouter, uibootstrap]);
However the same code in Typescript (target: es6, module: es6, all settings same as those mentioned in webpack guide) drops error:
Module "node_modules/#types/angular-ui-bootstrap/index" has no default export.
Using angular.module('app', [uirouter, 'ui.bootstrap']); instead throws a 'ui.bootstrap' not found error.
You can set allowSyntheticDefaultImports to true in your tsconfig.json to continue importing import uibootstrap from 'angular-ui-bootstrap'; as if angular-ui-bootstrap had a default export.
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
It seems using a simple import 'angular-ui-router' works.
I'm trying to follow the upgrade steps for Angular 1 to 2. I've put in the following code to allow for a hybrid application:
import * as angular from 'angular';
import {upgradeAdapter} from './upgrade-adapter';
angular.module('app', []);
angular.bootstrap(document.body, ['app']);
upgradeAdapter.bootstrap(document.documentElement, ['app'], {strictDi: true});
But I'm just getting the following error message in the browser console:
SyntaxError: import declarations may only appear at top level of a module
Line: import * as angular from 'angular';
I do tutorial from angular-meteor.com. angular-moment worked well. Then I added some Ionic elements to html page and empty stub method to controller. And got the message:
13:07:29.038 Error: [$injector:modulerr] Failed to instantiate module
Whatsapp due to: [$injector:modulerr] Failed to instantiate module
angular-moment due to: [$injector:nomod] Module 'angular-moment' 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.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=angular-moment
minErr/<#http://localhost:3000/packages/modules.js?hash=a65f000925e20c56ee4ab84205897b99db3e2c9f:232:12
module/<#http://localhost:3000/packages/modules.js?hash=a65f000925e20c56ee4ab84205897b99db3e2c9f:2198:1
ensure#http://localhost:3000/packages/modules.js?hash=a65f000925e20c56ee4ab84205897b99db3e2c9f:2122:38
module#http://localhost:3000/packages/modules.js?hash=a65f000925e20c56ee4ab84205897b99db3e2c9f:2196:1
loadModules/<#http://localhost:3000/packages/modules.js?hash=a65f000925e20c56ee4ab84205897b99db3e2c9f:4688:22
forEach#http://localhost:3000/packages/modules.js?has minErr/<()
modules.js:232 loadModules/<() modules.js:4711 forEach()
modules.js:485 loadModules() modules.js:4672 createInjector()
modules.js:4594 bootstrap/doBootstrap() modules.js:1874 bootstrap()
modules.js:1895 onReady() app.js:100
require<.node_modules.meteor.jquery["jquery.js"]/
I rolled back my changes, by commenting them out, but still have this error.
UPDATE
The following code causes error:
import angular from 'angular';
import 'angular-animate';
import 'angular-meteor';
import 'angular-moment';
import 'angular-sanitize';
import 'angular-ui-router';
import 'ionic-scripts';
// Modules
import Definer from '../definer';
import ChatsCtrl from '../controllers/chats.controller';
import ChatCtrl from '../controllers/chat.controller';
import CalendarFilter from '../filters/calendar.filter';
import RoutesConfig from '../routes';
// App
const App = angular.module('Whatsapp', [
'angular-meteor',
'angular-moment',
'ionic'
]);
Module angular-moment was installed as follows:
>meteor npm install --save angular-moment
angular-moment#1.0.0-beta.5 node_modules/angular-moment
└── moment#2.12.0
Clever... Documentation says it must be named angularMoment.. Very nice.
var myapp = angular.module('myapp', ['angularMoment']);
There is a mistake in tutorial. As for me, naming module in such a way makes coding more error-prone, because import is makes for angular-moment, but anlike others modules, it name is another.