从 angular 5 升级到 angular 8，SystemJS 的问题

Question

我有一个用 ASP.Net MVC 制作的应用程序，里面有 Angular 5 来显示视图。我将 Angular 从 5 更新到 8，现在我很难让它工作，因为这个错误：

error image

似乎是关于 SystemJS 或 Zone.js

如果某些文件未正确加载，我也在开发工具中观察过，但一切似乎都正常。

我不知道这里的问题是什么，所以我无法自己解决，在此先感谢您提供的帮助。

我的package.json:

{
  "name": "App",
  "version": "1.0.0",
  "private": true,
  "description": "App package.json",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "ng serve",
    "test": "ng test",
    "i18n": "ng-xi18n",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^8.2.0",
    "@angular/compiler": "^8.2.0",
    "@angular/core": "^8.2.0",
    "@angular/forms": "^8.2.0",
    "@angular/platform-browser": "^8.2.0",
    "@angular/platform-browser-dynamic": "^8.2.0",
    "@angular/platform-server": "^8.2.0",
    "@angular/router": "^8.2.0",
    "@angular/upgrade": "^8.2.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
    "core-js": "^3.1.4",
    "dexie": "~2.0.4",
    "file-saver": "^2.0.2",
    "minimatch": "~3.0.4",
    "ngx-toastr": "^10.0.4",
    "performance-now": "^2.1.0",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "systemjs": "^0.21.5",
    "text-encoding": "^0.7.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/animations": "^8.2.0",
    "@angular/cli": "^8.2.0",
    "@angular/compiler-cli": "^8.2.0",
    "@types/file-saver": "^2.0.1",
    "@types/google.analytics": "^0.0.40",
    "@types/jasmine": "^3.3.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.6.9",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "lodash": "^4.17.15",
    "phantomjs-prebuilt": "^2.1.16",
    "protractor": "^5.4.2",
    "ts-node": "^8.3.0",
    "tslint": "^5.18.0",
    "typescript": "^3.5.3"
  },
  "repository": {},
  "main": "karma-test-shim.js"
}

我的systemjs.config.js:

/**
 * System configuration for Angular.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'Js/angular/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'Js/angular/src/app',

            src: 'Js/angular/src',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.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/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries                        
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.umd.js',
            'rxjs': 'npm:rxjs',
            'tslib': 'npm:tslib/tslib.js',
            'dexie': 'npm:dexie/dist/dexie.js',
            'file-saver': 'npm:file-saver/dist/FileSaver.min.js',
            'text-encoding': 'npm:text-encoding/lib/encoding.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            src: {
                main: 'Js/angular/src/main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'rxjs/operators': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'dexie': {
                format: 'amd'
            },
            'file-saver': {
                format: 'global'
            }
        }
    });
})(this);

关于 angular (App_Start/BundleConfig.cs) 的捆绑包：

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                        "~/Js/angular/node_modules/core-js/client/shim.min.js",
                        "~/Js/angular/node_modules/zone.js/dist/zone.js",
                        "~/Js/angular/node_modules/systemjs/dist/system.src.js",
                        "~/Js/angular/src/systemjs.config.js"));

Answer 1

请尝试添加应用程序的主条目。在处理此类问题时，这对我有用：

packages: {
  app: {
    main: 'main.js',
    defaultExtension: 'js',
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

Answer 2

更新中，我从Core-js 2.5.3升级到3.1.4，包内目录也发生了变化。 "~/Js/angular/node_modules/core-js/client/shim.min.js" in BundleConfig.cs 因此无法正确加载。

我将 Core-Js 回滚到 2.6.9，具有相同的目录结构。

我也可以留在 v3.1.4 并更正参考。

从 angular 5 升级到 angular 8，SystemJS 的问题

Upgraded from angular 5 to angular 8, issues with SystemJS

javascript

asp.net-mvc

systemjs

zone.js

angular