Search code examples
angularjsangularng-upgrade

How to configure angular 4 with angularJS?


I have designed a web app using angularjs with angular material. Now, i want to convert some parts to be an angular 4 in the angularjs web app. i have added npm packages for angular 4. But scss files are not getting applied. How to fix this? Thanks..!


Solution

  • Without seeing some specific code, it's very difficult to help diagnose issues with your upgrade. All I can recommend is that you try and follow the official angular upgrade guide: https://angular.io/docs/ts/latest/guide/upgrade.html

    Essentially, you will create an angular 4 application and then embed the angularjs app inside it (in parallel).

    You will still need to link to your angularjs SCSS output directly (I'm assuming that's what the problem is), unless you're using @angular/cli in which case you can add it into the .angular-cli.json config.

    It only becomes difficult when you get to splitting the router (just a word of warning).


    Incrementally upgrade an AngularJS application to Angular.

    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

    See also, Angular 2+ can't find Angular 1.X to bootstrap