@angular/upgrade/static 404未找到

Question

我有一个用AngularJS编写的应用程序，我正在尝试让混合应用程序能够迁移到angular 5上。但不幸的是，我遇到了这样的错误：

GET http://localhost:53538/@angular/upgrade/static 404 (Not Found)

当我在app.module.ts文件中的imports声明中添加"UpgradeModule“后，就会发生这种情况：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { AppComponent }  from './app.component';
import { StorageSvc } from "./common/factories/storageSvc";


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        UpgradeModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        StorageSvc
    ],
    bootstrap: [AppComponent]
})

导出类AppModule {}

我的package.json看起来像这样：

{
  "name": "test angular hybrid application",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@angular/upgrade": "^5.2.11",
    "core-js": "^2.4.1",
    "rxjs": "^5.2.0",
    "systemjs": "^0.20.19",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.5",
    "@types/node": "^8.10.23",
    "concurrently": "^3.1.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.9.2"
  }
}

我所做的步骤:进入package.json文件夹，运行"npm install"，insight node_modules/@angular/upgrade文件夹已安装。但是当我运行应用程序时，我会遇到这样的错误：

​

​

如果我注释UpdateModule insight imports，app.module.ts文件，该错误就会消失

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule//,
   // UpgradeModule
],

请任何人给我任何建议，我能做些什么才能成功地将"UpgradeModule“导入到我的app.modules.ts文件中，使我当前的AngularJS应用程序能够混合使用Angular 5 insight呢？

如果您需要更多描述或代码示例，请让我知道

Answer 1

作为加载器，我使用的是System.js，所以为了能够在我的应用程序中使用UpgradeModule，我需要在systemjs.config.js中添加“@angular/upgrade/static”：systemjs.config.js，使文件看起来像这样：

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

            // 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',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'tslib': 'npm:tslib/tslib.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

添加之后，我修复了我的问题@angular/upgrade/static 404 (Not Found)