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.

Project Management: gulp -> gulp + Angular CLI Framework: AngularJS 1.6 -> AngularJS 1.6 + Angular 7 App Structure: Multiple AngularJS apps -> Main project: Angular, satellite project: AngularJS

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

Why upgrade to the Angular framework

In my company, most of the new projects are already being developed using Vue. The author is also more inclined to Vue simple, elegant form of development, more in line with the front-end (wave) development model. At the same time, Vue is easier for beginners to learn. But for my project, upgrading to Angular is one of the few viable options:

  1. Asymptotic escalation

    Due to the age of the project, the project involved in all aspects of the company’s business. It is difficult to do all the refactoring in a short time. At the same time of refactoring, the development of new business needs to be taken into account. (This project has been restructured under the leadership of many leaders, but all of them died). For this reason, the first consideration when choosing to upgrade to Angular is whether you can “refactor from scratch,” which Angular officially provides@angular/upgradeIs a good solution to this problem. Until the refactoring is complete, the old code can still run directly in the project without being affected by the refactoring.
  2. The more rigorous development included several files of 5000+ lines in the project before the transformation, and it was very painful to add each time. The main reason for this problem was that the Code submitted by the project had not been standardized in these years, and Code Review and other operations had not been carried out. Using TypeScript can force some of the Freshman to abandon their bohemianism. In addition, Angular can’t even compile code that is too bad. This framework and language nature make Angular better at developing more rigorous projects. Of course, Vue can also use TypeScript, and the normalized Vue coding style can make it more rigorous, if you tolerate editor support for ts in Vue 🙂

First, preliminary preparation

Check if your project contains compilation features that are not supported by the Angular CLI.

In the author’s project, GULP is used as a project management tool. It includes gulp-file-include plugins that introduce other HTML fragments into HTML files, but these processes are not supported if you use the Angular CLI as a project compiler. Therefore, they should be removed first.

The installation presents CLI

The author uses YARN:

  yarn global add @angular/cli
Copy the code

If you are using NPM:

  npm i @angular/cli -g
Copy the code

2. Create a seed project

Angular has a proven rate of iteration, and I recommend creating a new seed project rather than copying the dependencies mentioned in this article.

The official documentation


  • package.json

    You can copy angular dependencies directly if package.json already exists in your project. 
    "Dependencies" : {" @ presents/animations ":" ~ 7.1.0 ", "@ presents/common" : "~ 7.1.0", "@ presents/compiler" : "~ 7.1.0 @ presents/"," core ":" ~ 7.1.0 ", "@ presents/forms" : "~ 7.1.0", "@ presents/platform - the browser" : "~ 7.1.0", "@ presents/platform - browser - dynamic" : "~ 7.1.0", "@ presents/router" : "~ 7.1.0", "core - js" : "^ 2.5.4", "RXJS" : "~ per paragraph 6.3.3," tslib ":" ^ 1.9.0 ", "zone. Js" : "~ 0.8.26"}, "devDependencies" : {" @ presents - devkit/build - presents ": "~ 0.11.0," "@ presents/cli" : "~ 7.1.2", "@ presents/compiler - cli" : "~ 7.1.0", "@ presents/language - service" : "~ 7.1.0 typescript", "" :" ~ 3.1.6}"Copy the code
  • Tsconfig. Json. Typescript configuration files
  • Presents the json. Angular configuration files
  • The SRC directory. Angular source folder, which you can place in the appropriate place in your project.

3. Add upgrade dependencies

The AngularJS upgrade module is not included in the seed project, you need to add it manually.

yarn add @angular/upgrade
Copy the code

Assign AngularJS js and Style to the Angular CLI


  1. If you already use modular programming, all you need to do is remove the original module bootstrap (SystemJs, etc.) and remove ng-app from index.html. Import the AngularJS entry file in main.ts. Note: You may also need to add: tsconfig.json

     "compilerOptions": {
   ...
   "allowJs": true,
   ...
 }
Copy the code

  2. If you’re using traditional imports in your project, you need to remove them all, Add the styles and JS files to the projects -> porjectName -> architect -> build properties in angular.json. Files added here are merged and compressed by the Angular CLI during compilation and development. Then remove ng-app from index.html.

Adding assets folder

In AngularJS, there is something like templateURL that needs to be loaded from the server. Therefore, we need to map the source folder in angular.json so that it can be accessed while serving. Json projects -> porjectName -> architect -> Build -> Assets

Add an Angular entry to index.html

is an Angular entry tag that you can add to the appropriate location in index.html, usually adjacent to AngularJS for structural consistency.

Bootstrap the AngularJS module

At this point, you are ready to develop using ng Serve. In fact, if you start running at this point, there will only be Angular module content in the page, not AngularJS module content.


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, DoBootstrap, ApplicationRef } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UpgradeModule
  ],
  providers: [],})export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule){}

  // Manually take over the loading process
  ngDoBootstrap(appRef: ApplicationRef) {
    this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); Bootstrap the AngularJS module
    appRef.bootstrap(AppComponent) // Bootstrap the Angular module}}Copy the code

Seven. Done

Now run ng Serve to see Angular and AngularJS pages running at the same time!

The source code

Due to limited space, there are actually several changes that are not shown in the paragraph. 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.