I am trying to import npm package ngstorage in my angularjs v1.x (typescript) project using #types/ngstorage
the index.d.ts contains
declare namespace angular.storage {
export interface IStorageService {
}
}
if I do like below in my .ts files
import * as angular from 'angular';
var storage: angular.storage.IStorageService;
I am getting compilation error
namespace angular and no exported member storage
finally I was able to get it work
import { ngStorage } from 'ngStorage';
the namespace and not the package name should matter when doing an import
Related
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'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.
I'm use https://angular.io/guide/quickstart to start learn Angular2, but I notice there's console log "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." So I added to main.ts as following.
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
enableProdMode();
bootstrap(AppComponent);
Now the browser has error
enableProdMode is not defined(…)
So I found this article https://github.com/angular/angular/issues/6096.
Looks like I'm doing it right, and works on others, so maybe my package files or npm modules has something is wrong? please help, or do you know which module is using enableProdMode?
Seems like you missed to import enableProdMode
import {enableProdMode} from '#angular/core';
I decide to prepare updating my application from angular1.x to angular2.x. There is I have no find something useful. I have studied this document about 1 to 2 upgrade strategy. I figured out that all magic in migration is that you have to start Angular 1 and 2 in one time with Angular 1 in the root of the application, cut off the Angular1 unsupported code(filters, decorators and etc) and adapt(read wrap!) all Angular1 supported code(directives, services and etc).
The document that I have given above, you can see the pseudo code of the wrappers. I think if I wrap all of my current code - it doesn't explicitly give it speed. Who really have experience about it, write please how is it in real? Can I feared that my application starts to slow down, and may be easier to rewrite it once a new Angular2? But it`s very big, it will be a big piece of work and I have to think before. That why I ask about real experience who have production real life big projects and already migrated.
Also, I want to ask how I check libraries compatibilities. Maybe there is some service that checks my app and output results what libraries are good and what fails?
Yes, You can use both Angular 1 & Angular 2 in the same application. Just follow the below steps:
First of all you need to create "package.json" with all required angular 2 dependencies + #angular/upgrade
Create "tsconfig.json" and set "module": "system" in "compilerOptions" object. (To avoid require js errors)
Create "system.config.js" file (you can copy this file from angular 2 quick-start repo.). Don't forget to add '#angular/upgrade/static': 'npm:#angular/upgrade/bundles/upgrade-static.umd.js' bundle in a map object.
Include JS files for Reflect.js, zone.js, and system.config.js in your index.html just before the </body> tag (To avoid reflect-metadata & zone js errors).
Add this code just below that to import your app:
<script type="text/javascript">
System.import('app').catch(function(error){
console.log(error);
});
</script>
Create "main.ts" file and add below code :
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { downgradeComponent } from '#angular/upgrade/static';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['<app-name>']);
});
angular.module('<app-name>', []).directive('angular2App',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory);
Create "app.module.ts" file and add the below code:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppComponent } from './app.component';
#NgModule({imports: [BrowserModule,UpgradeModule],declarations: [AppComponent],entryComponents: [AppComponent]})
export class AppModule {ngDoBootstrap() {console.log("Bootstrap Angular 2");}}
Create "app.component.ts" file and add below code":
import { Component } from '#angular/core';
#Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'})
export class AppComponent { }
Now add the below code in your Angular 1 view file :
<angular2-app>Loading Angular 2...</angular2-app>
That's it. :)