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.
Related
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.
I'm starting to upgrade an AngularJS app to Angular 4, and I'm trying to bootstrap it using the upgrade adapter like this in the ('entry' file for the app) - where the function is within a closure, in an independent app.ts file :
app.ts (was previously App.js):
(function () {
import { UpgradeAdapter } from '#angular/upgrade';
var adapter = new UpgradeAdapter();
adapter.bootstrap(document.body, ['portalHomeApp']);
angular
.module('portalHomeApp', ['shared']);
I'm getting an error for the initial import of UpgradeAdapter:
An import declaration can only be used in a namespace or module
What do I need to do? Do I somehow make it available to the 'portalHomeApp' module, or do I simply now need a namespace now that I'm using TypeScript?
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've been trying to setup angular 1 with webpack and ran into an issue with import modules, let's say I want to import ramda from node_modules
import angular from 'angular';
import uirouter form 'angular-ui-router';
import routing from './app.config';
import * as ramda from 'ramda';
angular.module('app', [uirouter, ramda])
.config(routing);
I get an error: Argument 'module' is not a function, got Object. If I console ramda, it is indeed an object and I understand I need a string, but I just couldn't figure out how to get it?
Change it to import ramda from"ramda".
This is because the export of the module is the module name.
When you write import * as ramda you import the namespace object, which is an object containing all the exports of that module.
If you are using TypeScript, you may need to add a allowSyntheticDefaultImports to your tsconfig.json.
allowSyntheticDefaultImports
I'm trying to use angular-material with a ng-metadata project and I run into some issues.
I use DefinitelyTyped for angular material and the first lines are:
declare module 'angular-material' {
var _: string;
export = _;
}
In my main.ts I try to import { ngMaterial } from 'angular-material';
then bootstrap( AppComponent, [ 'ngMaterial' ] ); but all I got is:
Error:(3, 10) TS2305: Module ''angular-material'' has no exported member 'ngMaterial'.
I don't know what I am doing wrong
When being used through ES6 or TypeScript, a common pattern that Angular modules follow is that they'll use their name as the default export. For example, one of the modules in my application looks like this:
const session = angular.module("smSession", [])
.service("session", SessionService)
.component("smLogin", Login)
.config(routes)
.run(loginRedirect);
export default session.name;
The reasoning behind this is that it makes the syntax for declaring an Angular module's dependencies cleaner; for example:
import angular from "angular";
import ngAnimate from "angular-animate";
import ngMaterial from "angular-material";
import uiRouter from "angular-ui-router";
let module = angular.module("myApp", [ ngAnimate, ngMaterial, uiRouter ]);
If they instead exported the entire module, you'd have to do this:
let module = angular.module("myApp", [ ngAnimate.name, ngMaterial.name, uiRouter.name ]);
So this is why the main module declaration for angular-material looks like it does - they're simply representing the fact that all you can import from the package is that one string representing the module's name. The rest of the type definitions are ambient - you can just use the angular.material namespace anywhere in your application without having to do an import.
EDIT: To clarify, here's the actual source of the file that gets imported when you import ngMaterial:
// Should already be required, here for clarity
require('angular');
// Load Angular and dependent libs
require('angular-animate');
require('angular-aria');
// Now load Angular Material
require('./angular-material');
// Export namespace
module.exports = 'ngMaterial';
Notice that require('./angular-material') doesn't return anything - that import effectively just runs the file that sets up the Angular module behind the scenes (effectively the same sort of code as in my examples). The only thing being exported from the module is the name.