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';
Related
I'm using angularJs and i'm trying to use webpack but i can't understand how to add libraries like angular-material / devextreme.
Here is an example of my app.js file - as you can see - the import of devextreme is probably wrong ...
import angular from 'angular';
import { DxButtonModule } from 'devextreme-angular'; // not sure about it
var mainApp = angular.module('mainApp', [DxButtonModule]); // really not sure about it...
mainApp.controller('appController', ['$scope', function ($scope) {
$scope.title ='Hello Angular';
}]
)
b.t.w - can i import all devextreme modules in one time instead of each of them manually?
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 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.
My probleme is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module function Loki(filename, options) due to:
Error: [$injector:unpr] Unknown provider: filename
I use Agular 1.6 withe lokiJs for angular.
The code is formated in ES6 with webpack.
notice I commented all references to Loki in my controller.
Only injection is used in.
export default class loginController{
constructor($scope, Loki, $mdDialog, $timeout, $location, $cookies){
console.log('foo');
if($cookies.get('user')){
$location.path('/programmes');
}
this.user = {
login:'plop',
pwd:undefined
}
var db_name = 'app.db';
//var db = new Loki('${db_name}');
var profiles;
/*
db.loadDatabase({},function(){
return profiles = db.getCollection('profiles') || db.addCollection('profiles');
});
*/
console.log('ttoot');
this.ui = {
'shake' :false,
'register': false,
};
}
for the controller and my app.js :
import angular from 'angular';
import ngMaterial from 'angular-material';
import ngAnimate from 'angular-animate';
import ngMessage from 'angular-messages';
import ngRoute from 'angular-route';
import ngCookies from 'angular-cookies';
import lokijs from 'lokijs';
/*import './../dependencies/loki/lokijs.js';
import loki from './../dependencies/loki/loki-angular.js';
*/
import uirouter from 'angular-ui-router';
import appLogin from './components/login/login.module.js';
import appProg from './components/programmes/prog.module.js';
import appSeance from './components/seances/seances.module.js';
import router from './configs/routing.js';
import run from './run/run.js';
angular.module('app', [
ngMaterial,
ngAnimate,
ngMessage,
ngRoute,
ngCookies,
appLogin,
appProg,
appSeance,
lokijs,
uirouter,
])
.config(router)
.run(run)
;
thanks for your help !
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.