Questions tagged [angular-hybrid]

For questions about running AngularJS and Angular 2+ frameworks side-by-side

For questions about running AngularJS and Angular 2+ frameworks side-by-side

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

For more information, see Angular Developer Guide - Upgrading from AngularJS

The DEMO on PLNKR

104 questions
1
vote
1 answer

Angular Hybrid App Test "Cannot read property 'nativeElement' of null"

I have a simple test: it ('should be able to navigate to add program', fakeAsync(() => { let href = fixture.debugElement.query(By.css('.add-program-btn')); let link = href.nativeElement.getAttribute('href'); …
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
1
vote
1 answer

How to use ActivatedRoute in angular while using Hybrid routing?

I am trying to get data from a route(/item/{id:[^/]*}/') in angular component for a hybrid app using upgrade module I have tried ActivatedRoute to get hold off router state but it keeps complaining about invalid route configuration.…
Api
  • 1,582
  • 1
  • 14
  • 16
1
vote
0 answers

Debugging typescript files in hybrid angular application in webstorm

I have an hybrid application of angular.js and angular 7. Angular.js consist of .js and some .ts files. I have upgraded the angular.js app using the UpgradeModule. All angular.js src files are listed in angular.json config file, in the scripts…
1
vote
2 answers

Navigating to another component in hybrid Angular

I cannot figure out how can I navigate to another page/component with hybrid Angular. In Angular 2 we use Router and something like: this.router.navigate(['/items']); In hybrid Angular I use hybrid routing with: import { UIRouterUpgradeModule,…
lucas
  • 4,445
  • 6
  • 28
  • 48
1
vote
2 answers

Encapsulated css with Angular 7 + Webpack 4

I have a hybrid environment with both Angular 1.x and Angular 7 routes. The Angular 1.x routes are using old bootstrap 3, while the Angular 7 should use bootstrap 4. I tried to encapsulate bootstrap 4 only for the Angular 7 routes by importing…
Rony Fragin
  • 126
  • 9
1
vote
1 answer

How to run tests in Angular & AngularJs hybrid app?

As I want to migrate my AngularJs application to Angular 7, I created a hybrid app using ngUpgrade. The old AngularJs app is now embedded in the new Angular one. When I run ng test it fires my Angular tests which is fine. But I also want to run the…
Hubert Kubiak
  • 607
  • 1
  • 7
  • 30
1
vote
1 answer

Angular Upgrade - can't use upgraded component as entry component

I'm using Angular Upgrade module with components upgraded from AngularJS. When I use components inside templates they are working fine but when I try to use them as entry components I receive an error: MyNgComponent cannot be used as an entry…
Random
  • 3,807
  • 2
  • 30
  • 49
1
vote
0 answers

AngularJS Bracket Notation in Typeform data-url

We have an AngularJS/Angular hybrid app. In this app we are trying to do the following (using the AngularJS portion of the app):
But this doesn't work, I get the following error: …
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
1
vote
2 answers

Angular downgradeComponent not being created

I have just setup a hybrid AngularJS / Angular 5 application with downgradeModule. I have converted a very small component from AngularJS to Angular but it is never being created. I have put console.logs throughout the component to see if certain…
Chris
  • 26,744
  • 48
  • 193
  • 345
1
vote
1 answer

reuse *.resx(AngularJS) translation files in hybrid AngularJS/Angular 5 application

Hello I have AngularJS application which is using for internalization $translateProvider and WebResources.resx files : angular.module('app') .config(['$translateProvider', 'sysSettings', 'ngDialogProvider', function($translateProvider,…
1
vote
1 answer

@angular/upgrade/static 404 not found

I have application in AngularJS and I am trying to make hybrid application to be able to migrate on angular 5. But unfortunately I have the error : GET http://localhost:53538/@angular/upgrade/static 404 (Not Found) It happens after I add…
Andrei
  • 341
  • 7
  • 23
1
vote
0 answers

Dependency injection in angular hybrid app (AngularJS & Angular 5)

I've got a problem with dependency injection in ngUpgraded AngularJS controller. I'd like to use toastr and Handlebars.js module in my hybrid app, but my every attempt to do it gives me erros (handlebars is necessary to handle external scripts from…
Michał
  • 87
  • 1
  • 2
  • 10
0
votes
0 answers

Angular ActivateRoute is empty on a Hybrid app (Angular & AngularJs running simultaneously)

We have an application which was developed using AngularJs and then we start migrating to Angular 16. Most of the things working as expected. Now I wanted to use a new angular component within old Angular component. This new component need to…
0
votes
0 answers

How to use Bootstrap 3 and bootstrap 5 together

We are in the process of upgrading an angularJS 1.5 application to angular 15 with the help of hybrid angular (both frameworks will work together till the conversion is finished). For styling, angularJS uses bootstrap version 3.We do not intend to…
Nijeesh
  • 77
  • 1
  • 9
0
votes
0 answers

Angular Upgrade - Angular2 have issue with angular1 routing

I am upgrading my angular1 application using the bootstrapModule. Everything seems working as it should. I can see my angular1 UI on the angular2 but having issue with the angular2 routing overriding the angular1. For example: I go to angular1 page…
Mr. H
  • 3
  • 2