Comment mettre à niveau AngularJS vers Angular2+ ? Exemple d'introduction à la mise à niveau d'Angularjs

Cet article présente principalement la mise à niveau de angularjs, d'angularjs vers angulairejs2+. Lisons maintenant cet article ensemble

Résumons les derniers mois Nous avons travaillé des heures supplémentaires pour mettre à niveau deux projets. Le projet utilise UpgradeModule et l'autre utilise DowngradeModule. Créez un enregistrement comme suit : (ng1->AngularJS; ng2+->Angular2+). Pour plus de détails, veuillez consulter la documentation officielle : https://angular.io/guide/upgrade<.>

Les avantages, les inconvénients et les méthodes d'utilisation du dactylographié qui doivent être utilisés ne seront pas décrits ici.

1. UpgradeModule : il s'agit de la première méthode de mise à niveau parallèle publiée par Angular. L'inconvénient est que les performances sont relativement faibles. Elle est relativement simple à comprendre d'abord, puis. ajoutez le contrôleur ng1 Enveloppez-les directement dans /service/directive et ainsi de suite, afin qu'ils puissent s'exécuter directement dans l'environnement ng2+.

Étape par étape :

* Démarrer à partir de l'application ng2 :

** Supprimer ng-app de index.html ;

** Ajouter principal. ts :

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['carepilot'], { strictDi: true });
});

** Ajouter app.module.ts : Tous les modules sont définis ici

import { NgModule, forwardRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
 
@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    bootstrap: []
})
 
export class AppModule {
    ngDoBootstrap() {}
}

** Ajouter tsconfig.json : définir comment compiler ts - >js

{
    "compileOnSave": false,
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

** systemjs.config.js : utilisez systemjs pour charger les modules dépendants. Lors de la conversion parallèle, l'exemple général consiste à utiliser systemJS pour charger les modules

** Modifier index.html : vous devez charger certaines bibliothèques requises par ng2 (remarque : les zone.js suivants, etc., doivent être copiés dans votre répertoire d'exécution à l'aide d'outils tels que gulp)

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'app',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs'
        },
        packages: {
            app: {
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js',
                format: 'cjs'
            }
        }
    });
})(this);

Maintenant, cette application hybride devrait pouvoir fonctionner. La tâche suivante consiste à mettre à niveau le contrôleur un par un et à éliminer les pièges un par un

<script></script>
<script></script>
<script></script>
<script></script>

<!-- inject:js -->
<!-- endinject -->

<script>
System.import(&#39;main.js&#39;)
.then(null, console.error.bind(console));
</script>

Pour faire simple, lors de la mise à niveau, le contrôleur-> ; ;component, directive -> composant/directive, service -> service, pipe/filter -> pipe;

* Exemple : Mettre à niveau un contrôleur vers un composant (si vous voulez en voir plus, allez sur le site Web PHP chinois

Manuel de développement AngularJS

)

* Parce que la majeure partie du programme est toujours du code ng1, afin de permettre à ng1 et ng2+ de communiquer, le module ng2+ doit be Premier downgrade :

import {
    Component,
    Inject
} from '@angular/core';
import { Broadcaster } from '../../services/broadcaster';
 
@Component({
    selector: 'about',
    templateUrl: './about.component.html'
})
export class AboutComponent {
 
    constructor(private broadcaster: Broadcaster) {
    }
 
    print(): void {
        this.broadcaster.broadcast('printContents', 'printable');
    }
}

Mettre à jour le routage dans config.js (en supposant que l'état de l'interface utilisateur soit utilisé) :

angular.module('interestApp')

.directive('pinControls',

upgradeAdapter.downgradeNg2Component(PinControlsComponent));

* Le même problème, certains contrôleurs doivent s'appuyer sur certains les précédents après la mise à niveau du service. À ce stade, vous devez mettre à niveau temporairement le service de ng1 vers ng2+ pour une utilisation par les composants de ng2+. Au cours du processus de mise à niveau, je n'ai rencontré que ui-route et j'ai dû le faire. le temps, vous devez utiliser des types. Vous pouvez trouver la bibliothèque correspondante ici La définition de http://definitelytyped.org/docs/angular-ui--angular-ui-router/modules/ng.html

.state('add', {

template: "<add-pin></add-pin>",

url: '/add'

* Après la mise à niveau, la chose la plus gênante est $scope et $rootscope. Dans ng1, le rootscope global est très confortable à utiliser. Il a été annulé dans ng2+. Vous devez définir un service pour remplacer le rootscope précédent. Le composant actuel ne peut pas utiliser directement la portée et utiliser =, > pour lier la valeur. Vous devez utiliser les valeurs de transmission @input et @output, correspondant au processus de transmission de valeur =,> >

* Utilisez ng2+ Router pour définir des itinéraires : Bien sûr, vous pouvez également continuer à utiliser la version améliorée de ui-route @ui-route

* Après des luttes douloureuses (l'utilisation de nouvelles méthodes, changements d'habitudes, il s'avère que certaines bibliothèques ng1 ne sont pas maintenues ou mises à niveau vers ng2+, nous devons donc trouver des alternatives ou les écrire nous-mêmes (

), enfin toutes les choses ng1 ont été mises à niveau. pour supprimer les programmes hérités et pris en charge de ng1 et le transformer en un programme ng2+ complet.

const AppRouting: Routes = [
    { path: 'app', component: DashboardComponent, canLoad: [AuthGuard], canActivate: [AuthGuard], data: { pageTitle: 'Dashboard' }];

** Supprimer le module de mise à niveau :

** Supprimez tous les modules de mise à niveau et les modules de rétrogradation

** Ajoutez un composant d'application pour charger le routage initial : (Ici, on suppose que vous utilisez ng2+default route. Si vous continuez à utiliser ui-route, continuez à utiliser ui-view)

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);

* Cela a réussi immédiatement et a finalement utilisé angulaire -cli Pour gérer le processus de compilation et le chargement des modules, cette chose est une bonne chose (même s'il y a quelques aspects insatisfaisants, comme le fait que la version ne prend pas en charge JIT, etc.
)

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-root',
    template: `
    <p>
    <router-outlet></router-outlet>
    </p>
  `
})
export class AppComponent {
  constructor(private route: Router) {
        let loc = window.location.pathname.toString();
        if (loc == '/login' || loc == '/') {
            this.route.navigate(['login']);
        }
    }
}

Maintenant, vous n'avez besoin que de npm (certaines personnes utilisent du fil), et Bower peut être licencié.

• Systemjs peut également s'incliner ;

• Gulp ou grognement doit être analysé en détail à ce stade. Si le serveur est plus complexe, il est recommandé de le conserver pour démarrer le serveur. En utilisant concurrent, vous pouvez gérer le code client. avec angulaire-cli lorsque npm exécute dev, gulp /grunt gère le serveur ;

• Maintenant, toutes les mises à niveau sont terminées. Bien sûr, le processus lui-même rencontrera certainement diverses insatisfactions. la situation spécifique. Si le projet est petit de cette manière, il peut être adopté, il est relativement facile à comprendre, il existe de nombreux exemples sur Internet et il sera mis à niveau rapidement. Si le projet est relativement important et que sa mise à niveau prend plusieurs mois, la méthode de rétrogradation suivante doit être utilisée.

2. Downgrade : L'introduction officielle est très difficile à comprendre pour les personnes qui essaient cela pour la première fois.

原理：downgrade是不改变原来的ng1程序，新建一个ng2+程序，然后把这个程序做成一个模块，直接注入到ng1里头，这样会避免一些额外的change事件，从而避免了不必要的消息循环，这样来提升性能。

用下面的5步升级到ng2+:

第一步：写一个新的ng2+程序，然后注入到ng1里头：

main.ts: (XXXXXX替换成你的ng1的app的名字就行了）

import { NgModule, forwardRef, StaticProvider } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { downgradeModule, downgradeComponent, setAngularLib } from '@angular/upgrade/static';
 
declare const angular: any;
declare const window: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(AppModule);
};
 
const downgradedModule = downgradeModule(bootstrapFn);
 
angular.module('XXXXXX.ng2', [
    downgradedModule
]);
angular.module('XXXXXX.ng2').directive('template', downgradeComponent({ component: template}));

* app.js (就这里麻烦，试了一天才试出来，这么注入，然后加载）

(function() {
    angular.module('XXXXXXX', [
        // all the old modules
        'XXXXXXX.ng2'
    ]);
    // eslint-disable-next-line
    if (window.ignoreNg2ForTest) {
        // temporary not load ng2 module in karma test
        fetchData().then(bootstrapApplication);
    } else {
        // normal hybrid entrance
        loadMain().then(fetchData).then(bootstrapApplication);
    }
 
 
    function loadMain() {
        return System.import('main');   // load main.ts
    }
 
    function fetchData() {
        // old logic
    }
 
    function bootstrapApplication() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['XXXXXXXX'], { strictDi: true }); // bootstrap app with ng1
        });
    }
 
}());

* 同样，在index.html里加入一些依赖（升级完都可以删）

<script></script>
<script></script>
<script></script>
<script></script>

* 手动拷一些依赖到dest 文件夹：（我们用的gulp）

pipes.builtAngularVendorScriptsDev = function() {
    return gulp.src([
        './node_modules/core-js/client/shim.min.js',
        ............
    ], {base: './node_modules'})
        .pipe(gulp.dest('dist.dev/node_modules'));
};

* JSPM: 不用这东西的话release 里头的客户端有近百M，会疯的，虽然这个东西也bug重重，临时用用还是可以的。用它以后release的客户端代码只有十几M，可以接受了。

gulp.task('build-jspm-prod', ['hybrid-tsbuild'], function() {
    return jspm({
            config: './client/systemjs.config.js',
            bundleOptions: {
                minify: true,
                mangle: false
            },
            bundleSfx: true,
            bundles: [
                { src: paths.tsOutput + '/*', dst: 'main.js' }
            ]
        }).pipe(gulp.dest('dist.prod'));
});

第二步：升级一个个的controller/service/pipe/directive等等，这个过程相当痛苦，原来代码的耦合，莫名其妙的event emit和不知道在哪儿的event handler。全局的rootscope遍地都是，牵一发动全身。自己解耦吧，没什么好办法。

第三步：升级路由，这个虽然没有上一步那么煎熬，也很头疼，很多地方都要改，

* 如果用route的话参见上面upgrademodule里的例子就好了；

* 如果使用@ui-route的话，state现在需要这么定义：（abstract我还没有研究出来有什么用）

export const registerState = {
    parent: 'app',
    name: 'register',
    url: '/register/{activationCode}',
    component: RegisterComponent,
    data: { pageTitle: 'Register' }
};

第四步：删除ng1的东西；

第五步：使用angular-cli管理依赖：

* 参照上面upgrademodule对应的步骤就好；

* 这时候可以删除JSPM了，这东西和SystemJS都是定时炸弹，bug重重啊，目前angular-cli比较稳定；

到这里，应该你的程序已经升级到了ng2+，目前是ng5，建议升级过程中把anglar相应的版本写死，这东西更新太快，你随着它升随时出现已有的包不兼容，很头疼，我们暂时定格在5.0。

我是升级完了站着说话不腰疼，上面的东西只能帮有需要的朋友节约一点点时间，最大的时间消耗在升级controller和解耦的过程中。那里如果有什么问题可以在下面留言，能帮上的话尽量帮大家省省时间。

备注一：替换规则。

• ng-bind-html       [innerHTML]

• ng-model             [(ngModel)]                                        // 这个和ng1的双向绑定基本一个意思
  

• ng-class                [ngClass]

• ng-disabled          [disabled]

• ng-click                 (click)

• ng-if                     *ngIf

• ng-repeat           *ngFor                                              // E.g. *ngFor="let task of currentChecklist.open; let i = index;"

• ng-show               *ngIf

• ng-src                   [src]

• ng-hide                 *ngIf

• ng-submit            (ngSubmit)

• ng-style                [ngStyle]

备注二：可能遇到的问题

• JS:

• 消息处理：ng2+里没有了scope继承，所以自己定义全局的消息处理是必要的;

• HTML模板:
  

• Conflit de directives : il est préférable de séparer les noms définis. S'il s'appelle

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel de l'utilisateur AngularJS pour apprendre). Si vous avez des questions, vous pouvez les poser ci-dessous. Laissez un message avec une question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!