preface

It’s been 9102 years, and my company’s main project is the epic AngularJS 1.6 framework. In addition, due to historical reasons, the code is much messier than expected. Therefore, the author decided to reconstruct the whole project… This is the beginning of the Angular upgrade.

series

  1. (I) Bootstrap and run mixed applications
  2. (2) Synchronize the status of mixed application routes

In this series of articles

  1. How do Angular and AngularJS co-develop
  2. Compile and develop Angular/AngularJS hybrid applications using the Angular Cli
  3. How to synchronize AngularJS and Angular routes in Hash mode
  4. Use the Angular CLI in gulp or other automated build tools
  5. Use AngularJS components in Angular
  6. Use Angular components in AngularJS

The example project used in this article

AngularJS example project Angular-Phonecat

1. Route management

In the previous article, the project was almost up and running. However, there are many unresolved issues in the project, including:

  1. The routing states in the two frameworks are not synchronized.
  2. After the route is switched, the page is refreshed, and the route disappears.

A two-route policy is used in the project. Ng1 (AngularJS) and NGX (Angular) pages are managed using routes. Therefore, two routes need a “bridge” to communicate, so that they can synchronize data between each other, and this “bridge” has been provided for us, that is, setUpLocationSync. Before Bridges can be used for communication, routes need to be modified to better fit the needs of our project.

Hash mode or History mode

On NGX routers, history mode is used by default. By default, ng1 routers use hash routing. So, the first thing we need to do is set them to the same mode. Both hash and History patterns have their pros and cons. See appendix LocationStrategy and Browser URL Styles for the differences between them. I recommend using the History mode because it is more consistent with the browser URL style. Here’s how they are set:

The history mode:

If you use history mode, you will mainly modify ng1’s router configuration.

angular.
  module('phonecatApp').
  config(['$routeProvider'.'$locationProvider'.function config($routeProvider,$locationProvider) {
      $locationProvider.html5Mode(true)  // Set to HTML5 mode}]);Copy the code

Hash mode:

If you use hash mode, you are mainly modifying Angular routing configurations.

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    useHash: true})]})export class AppRoutingModule {}Copy the code

In NG1.6 you may be using hash-bang mode, or in NG1 you may have set any prefixes that you need to remove.

angular.
  module('phonecatApp').
  config(['$locationProvider'.function config($locationProvider) {
      $locationProvider.hashPrefix(' ')}]);Copy the code

Three, groove routing

In a real project, some pages are written based on NG1 and some are written based on NGX. In most cases, we naturally want to be able to display separate pages without disturbing each other. Therefore, we need to do a “groove routing” so that they can switch freely. (Para. 2) So. What exactly is groove routing? Simply put, “blank pages.” When displaying the ng1 page, the NGX section should display a blank page. Similarly, in the NGX display page, we do the same. Implementation in NG1 is relatively simple:

angular.
  module('phonecatApp').
 config(['$routeProvider'.function config($routeProvider) { $routeProvider. ... .// Other routes are omitted here
        otherwise({
          template: ' '}); }]);Copy the code

In NGX, you need to add an “empty” Component

ng g component empty
Copy the code

Then, add it to the route

const routes: Routes = [
  ...,
  {
    path: '* *',
    component: EmptyComponent
  }
]
Copy the code

ALL DONE…

4. Synchronize your routing status

Now let’s synchronize their states. Very simple in History mode. Just use the official setUpLocationSync.

export class AppModule implements DoBootstrap {

    ngDoBootstrap(appRef: ApplicationRef) {
    this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);
    // setUpLocationSync must be referenced after UpgradeModule. BootstrapsetUpLocationSync(upgrade); }}Copy the code

What about in hash mode? Then it’s not so simple. My direct use of setUpLocationSync has led me to suspect that every jump route will appear in an infinite loop. Why does this happen? SetUpLocationSync is a function provided by @angular/ Router and usually does not cause problems. But the problem that caused the loop was this function. In upgrage.ts, you can see it

  ngUpgrade.$injector.get('$rootScope')
      .$on('$locationChangeStart', (_: any, next: string, __: string) => {
        const url = resolveUrl(next);
        const path = location.normalize(url.pathname);
        router.navigateByUrl(path + url.search + url.hash);
      });
Copy the code

After ng1 triggers the locationChangeStart event, this function directly passes the path + url.search + url.hash in the URL to the Router of NGX, whereas the hash mode should pass the hash as a path. NavigateByUrl (path + url.search + url.hash); Instead of this. The router. NavigateByUrl (url. The url hash +. Search). In this example, the router synchronization is implemented based on the original setUpLocationSync: location-sync.service.ts

Attached: Adjacent route exit?

Upgrading AngularJS to Angular in the Reference article mentions “adjacent route exits”. In practical use, through it can do some such as lazy loading ng1 module implementation. Note that if you put an entry to ng1 in a Component, UpgradeModule. Bootstrap needs to be called after the Component view is loaded, such as the ngAfterViewInit hook.

The source code

Here you can get the angular-Phonecat project modified for this article. [github.com/yskun/angul…].

reference

  1. Upgrade from AngularJS to Angular
  2. Upgrade AngularJS to Angular

License

This work is licensed under the Creative Commons Attribution – Noncommercial – Share alike 4.0 International License.