Angular 将角度4升级到角度8后出现问题

Angular 将角度4升级到角度8后出现问题,angular,angular6,angular7,angular8,Angular,Angular6,Angular7,Angular8,目前,我正在system.js应用程序中使用Angular 4。现在我将它更新为Angular 8 为此,我遵循以下两个链接: 我做了以下修改: 更新了package.json中的所有包 http到httpclient httpmodule到httpclientmodule http请求(map.json) rxjs更改 当我在所有更改后运行应用程序时,出现以下错误: 未捕获的语法错误:意外标记“这是来自angular网站的 我注意到您正在使用两个版本的typescript,“2.5.3”和

目前,我正在system.js应用程序中使用Angular 4。现在我将它更新为Angular 8

为此,我遵循以下两个链接:

我做了以下修改:

  • 更新了package.json中的所有包
  • http到httpclient
  • httpmodule到httpclientmodule
  • http请求(map.json)
  • rxjs更改
  • 当我在所有更改后运行应用程序时,出现以下错误:

    未捕获的语法错误:意外标记“这是来自angular网站的

    我注意到您正在使用两个版本的typescript,“2.5.3”和“3.7.2”在您的开发依赖项中,我只会使用一个版本(angular推荐的版本)~“3.1”

    我建议您一次更新1个版本,我知道这是一个非常漫长的过程,但您需要知道,解决问题比从4个版本跳到8个版本要容易得多。

    这是angular网站提供的

    我注意到您正在使用两个版本的typescript,“2.5.3”和“3.7.2”在您的开发依赖项中,我只会使用一个版本(angular推荐的版本)~“3.1”

    我建议你一次更新一个版本,我知道它的过程很长,但你知道它比从4跳到8更容易解决问题

        paths: {
    
            'npm:': './node_modules/'
        },
    
        map: {
    
            'app': './app',
    
            // angular bundles
            '@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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    
            // other libraries
            'rxjs': 'npm:rxjs',
            'lodash': 'npm:lodash',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
            '@bento.ui/bento-ng': 'npm:@bento.ui/bento-ng/bundles/bento.ui.js',
            'ngx-restangular': 'npm:ngx-restangular/dist/esm/src',
            'angular-2-local-storage': 'npm:angular-2-local-storage/dist',
            '@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',
            '@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
            'angular2-tinymce': 'npm:angular2-tinymce/dist',
            'tinymce': './Scripts/vendors/tinymce',
            'ng2-dnd': 'npm:ng2-dnd/bundles/index.umd.js',
        },
        meta: {
            './Scripts/vendors/tinymce/plugins/advlist/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/autoresize/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/code/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/link/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/lists/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/paste/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/table/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/image/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/textcolor/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/imagetools/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/plugins/contextmenu/plugin.js': { format: 'global' },
            './Scripts/vendors/tinymce/themes/modern/theme.js': { format: 'global' },
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
                //meta: {
                //    './*.js': {
                //        loader: 'systemjs-angular-loader.js'
                //    }
                //}
            }, 
            'ngx-restangular': {
                main: './index',
                defaultExtension: 'js'
            },
            rxjs: {
                main: "./Rx.js",
                defaultExtension: 'js'
            },
            lodash: {
                main: './index.js',
                defaultExtension: 'js'
            },
            'angular-2-local-storage': {
                main: './index',
                defaultExtension: 'js'
            },
            moment: {
                main: './moment.js',
                defaultExtension: 'js'
            },
            '@ngx-translate/core': {
                defaultExtension: 'js'
            },
            'angular2-tinymce': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'tinymce': {
                defaultExtension: 'js'
            }
        },
        warnings: true
    });
    
      "dependencies": {
        "@angular/animations": "8.2.14",
        "@angular/common": "8.2.14",
        "@angular/compiler": "8.2.14",
        "@angular/compiler-cli": "8.2.14",
        "@angular/core": "8.2.14",
        "@angular/forms": "8.2.14",
        "@angular/http": "7.2.15",
        "@angular/platform-browser": "^8.2.14",
        "@angular/platform-browser-dynamic": "8.2.14",
        "@angular/platform-server": "8.2.14",
        "@angular/router": "8.2.14",
        "@angular/upgrade": "8.2.14",   
        "@ng-bootstrap/ng-bootstrap": "5.1.4",
        "@ngx-translate/core": "11.0.1",
        "@ngx-translate/http-loader": "4.0.0",
        "@types/lodash": "4.14.149",
        "angular-2-local-storage": "3.0.2",
        "angular-in-memory-web-api": "0.9.0",
        "angular2-tinymce": "3.3.0",
        "bootstrap": "4.3.1",
        "core-js": "3.4.2",
        "font-awesome": "4.7.0",
        "ie-shim": "0.1.0",
        "lodash": "4.17.15",
        "markdown-it": "10.0.0",
        "ng2-dnd": "5.0.2",
        "ngx-restangular": "5.0.0",
        "rxjs": "^6.5.3",
        "systemjs": "6.1.5",
        "tinymce": "5.1.2",
        "topojson": "3.0.2",
        "typescript": "2.5.3",
        "zone.js": "0.10.2"
      },
      "devDependencies": {
        "@types/node": "12.12.14",
        "fs": "0.0.2",
        "gulp": "4.0.2",
        "gulp-cache-bust": "1.4.1",
        "gulp-clean-css": "4.2.0",
        "gulp-concat": "2.6.1",
        "gulp-filter": "6.0.0",
        "gulp-foreach": "0.1.0",
        "gulp-inline-ng2-styles": "0.0.1",
        "gulp-inline-ng2-template": "5.0.1",
        "gulp-rev": "9.0.0",
        "gulp-sourcemaps": "2.6.5",
        "gulp-typescript": "5.0.1",
        "gulp-uglify": "3.0.2",
        "rimraf": "3.0.0",
        "run-sequence": "2.2.1",
        "systemjs-builder": "0.16.15",
        "typescript": "3.7.2",
        "vinyl-buffer": "1.0.1",
        "vinyl-source-stream": "2.0.0"
      },
      "repository": {}
    }