I have integrated angulartics2 with Piwik in my angular 5 application & successfully found the URL tracks in the Piwik admin module after observing the URL tracked I found that http://localhost:4200/#/app/#/app/main-route/sub-route.
Below is the code used according to demo
In index.html added Piwik tracking code with _paq statements commented
In app.module.ts
#NgModule({
imports : [Angulartics2Module.forRoot([Angulartics2Piwik])]
});
In app.component.ts
export class AppComponent implements OnInit{
constructor(private angulartics2: Angulartics2) {
}
}
Can anyone know why it is behaving like that?
Thanks in advance.
Sampat
Related
Currently building a slimmed down version of the app for plunker so I can SHOW you my problem, but in case anyone has any tips off the top of their heads in the mean time, I will attempt to describe my problem first.
I'm using ngUpgrade to start bringing a large application from AngularJS to Angular. I've got a core application running using Angular. Briefly it's set up a little like this:
#Component({
selector: '[my-app]',
template: `
<app-main></app-main>
`
})
export class AppComponent {};
#NgModule({
imports: [
BrowserModule,
UpgradeModule,
],
bootstrap: [AppComponent],
declarations: [
AppComponent
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {
constructor(public upgrade: UpgradeModule) { }
}
export const Ng1AppModule = angular.module(
'mainApp',
[
'feature.one'
]
);
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
ref.instance.upgrade.bootstrap(document.body, [Ng1AppModule.name], {});
});
It successfully bootstraps itself and runs a root component which essentially loads the old AngularJS application. So far no major problems.
The AngularJS application has dependencies on a lot of custom feature modules which I now need to convert to Angular.
On one of the feature modules I want to convert a service. It's now an Angular #Injectable built in typescript and it is assigned to and AngularJS module like so:
export const Ng1FeatureModule = angular
.module('feature.one', ['ngCookies'])
.service('UpgradedService', downgradeInjectable(UpgradedService) as any);
This service requires a dependency from a service I have not even converted yet.
Example:
#Injectable()
export class UpgradedService{
public var1: string;
constructor(private nonconvertedNG1Service: NonconvertedNG1Service) {
this.var1 = nonconvertedNG1Service.get();
}
public getVar1() {
return this.var1;
}
}
How do I need to set things up so that my example app uses 'UpgradedService' and UpgradedService is able to use NonconvertedNG1Service?
How Am I supposed to use an AngularJS dependency during migration to Angular2 outside the constructor? I am using upgrade module and service is not yet upgraded.
So the answer was partially Making AngularJS Dependencies Injectable to Angular but it was not demonstrated how to make it available outside the constructor.
Here is an example for the $log angularJS service.
Create ajs-upgraded-providers.ts where we declare the provider:
/**
* $log upgraded provider
*/
export abstract class Log {
[key: string]: any;
}
export function logFactory(i: any) {
return i.get('$log');
}
export const logProvider = {
provide: Log,
useFactory: logFactory,
deps: ['$injector']
};
Import to app.module.ts the declared provider:
import { logProvider } from './ajs-upgraded-providers';
#NgModule({
imports: [
//imports
],
providers: [
//Providers & Services
//Upgraded angularJS providers
logProvider
]
})
example.service.ts How to use the angularJS service while migration takes place:
import { Log } from '../ajs-upgraded-providers'; //edit path accordingly
#Injectable()
export class ExampleService {
constructor(private $log: Log) {}
exampleFunction() {
this.$log.info("Info to be logged");
}
}
Making AngularJS Dependencies Injectable to Angular
When running a hybrid app, we may bump into situations where we need to have some AngularJS dependencies to be injected to Angular code. This may be because we have some business logic still in AngularJS services, or because we need some of AngularJS's built-in services like $location or $timeout.
In these situations, it is possible to upgrade an AngularJS provider to Angular. This makes it possible to then inject it somewhere in Angular code. For example, we might have a service called HeroesService in AngularJS:
import { Hero } from '../hero';
export class HeroesService {
get() {
return [
new Hero(1, 'Windstorm'),
new Hero(2, 'Spiderman')
];
}
}
We can upgrade the service using a Angular Factory provider that requests the service from the AngularJS $injector.
We recommend declaring the Factory Provider in a separate ajs-upgraded-providers.ts file so that they are all together, making it easier to reference them, create new ones and delete them once the upgrade is over.
It's also recommended to export the heroesServiceFactory function so that Ahead-of-Time compilation can pick it up.
— Angular Developer Guide - Upgrading (Making AngularJS Dependencies Injectable)
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 have a requirement to integrate google location dropdown(auto complete) for address search on textbox and plot a route on the map using angular 2 beta version and typescript.
I have searched for the compatible library. but cant find the one.
Can anyone please suggest me the library/component for google location search and maps in angular 2.
There is no google location search with typescript for Angular 2
You have to import the Google Places javascript api as a module into your Angular 2 application
For google location search with Angular2 typescript, you can use angular2-google-map-auto-complete library.
Step1: Run following command, it will give you angular2-google-map-auto-complete package-
npm install angular2-google-map-auto-complete
Step2: Sample component looks like this-
import { Component } from '#angular/core';
import {GoogleplaceDirective} from './googleplace.directive';
#Component({
selector: 'my-app',
directives: [GoogleplaceDirective],
template: `<h1>My First Angular 2 App</h1>
<input type="text" [(ngModel)] = "address" (setAddress) = "getAddress($event)" googleplace/>
`
})
export class AppComponent {
public address : Object;
getAddress(place:Object) {
this.address = place['formatted_address'];
var location = place['geometry']['location'];
var lat = location.lat();
var lng = location.lng();
console.log("Address Object", place);
}
}
Step3: Add script tag in index.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
Output result:
See if this helps.
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. :)