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?
Related
In a pure JS app you initialize agGrid like this:
var agGrid = require('ag-grid');
(function(angular) {
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('myApp', []);
I can't figure out how to initialize it with an AngularJS TypeScript app. I've tried this:
import * as angular from 'angular';
import * as agGrid from 'ag-grid/main';
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('myApp', []);
I'm pretty sure the initialization code is in the wrong place, but I'm not sure where to put it?
The following worked for me.
import { initialiseAgGridWithAngular1 } from 'ag-grid-community';
initialiseAgGridWithAngular1(angular);
angular.module('myApp', ['agGrid']);
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 have an angular 2 App built with angular-cli and I need to use an angular 1 directive in one of my components (to re-use it from a different application). I followed the steps from:
https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code
But now I got to this error and cannot get past it. I am using angular2.0.2 (I managed to build a hybrid app in the past with the beta version but it was an angular1 app and I used angular 2 components with downgrade function of the adapter).
In my app.module.ts I have:
import { UpgradeAdapter } from '#angular/upgrade';
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
#NgModule({
imports: [
BrowserModule,
...
],
declarations: [
...
HeroDetail
]
})
export class AppModule { }
and my hero-detail.component.ts looks like this:
export const heroDetail = {
templateUrl: 'hero-detail.html',
controller: function() {
}
};
and my hero-detail.html looks like this:
<h2>Windstorm details!</h2>
I try to use the directive in another angular 2 component simply by adding in the template:
When I run ng serve, the application compiles fine but when I try to load the page I get the mentioned error.
Any suggestions on how I can move forward with this?
It seems you have incorrect bootstrap logic.
It's actually not quite obvious, make sure that:
you don't bootstrap any ng2 component with #NgModule({bootstrap:[ ... ]}). Instead, you should have empty ngDoBootstrap() { } method in your main module.
root template is ng1 template. I.e. in your index.html you should have only ng1 components or downgraded ng2 components. You can have ng2 component as a root, but you need to downgrade it first.
Official upgrade guide contains an example of DOM structure:
... which ensures that ng2 injectors have all required providers from ng1.
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.
Good morning everyone,
I recently started using webpack on a new angular project. I really like it, very easy to use. I just have one problem, for now.
I'm trying to import ngResource to use on one of my modules, but not way I try works. I'm using webpack with babel loader (es6)
I tried each of the following ways:
//1
import ngResource from 'ng-resource'
angular.module('app', [ngResource])
//2
import 'ng-resource'
angular.module('app', ['ngResource'])
//3
import ngResource from 'ng-resource'
angular.module('app', [ngResource.name])
I tried even adding the following loader:
{
test: /[\/]angular-resource\.js$/,
loader: 'exports?angular.module(\'ngResource\')'
}
and then on my module:
angular.module('app', ['ngResource'])
What am I doing wrong? I can't figure it out :(
Thanks in advance,
Chaim
I was banging my head over this as well, it turns out you need
npm install angular-resource instead of npm install ng-resource
and then do:
import ngResource from 'angular-resource'
or one of the other methods you tried, they all work..
you should import it as following:
import ngResource from 'angular-resource';
and then:
angular
.module('app', [
ngResource,
...
]);
The same rule to import any other angular core module
this is right way:
var ngResource = require('ng-resource');
ngResource = ngResource(window, angular);
var yourmodule = angular.module( 'yourmodule', [ 'ngResource' ] )...