1

我在 AngularJS 中有应用程序，我正在尝试使混合应用程序能够在 Angular 5 上迁移。但不幸的是我有错误：

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

它发生在我在 app.module.ts 文件中添加“UpgradeModule”之后，在imports声明中：

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 洞察导入，app.module.ts 文件，该错误就会消失

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

请任何人提供任何建议，我可以做些什么才能成功地将“UpgradeModule”导入我的 app.modules.ts 文件，以便能够使我当前的 AngularJS 应用程序混合并使用 Angular 5 洞察力？

如果您需要更多描述或代码示例，请告诉我

4

1 回答 1

1

解决方案，也许它会对某人有所帮助：作为加载程序，我正在使用 System.js，所以为了能够在我的应用程序中使用 UpgradeModule，我需要添加 '@angular/upgrade/static': 'npm:@angular/upgrade /bundles/upgrade-static.umd.js' 在我的 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)

于 2018-08-15T16:04:44.373 回答