Question

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

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

在imports声明内的app.module.ts文件中添加“ 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”，安装node_modules / @ angular / upgrade文件夹。但是当我运行应用程序时出现错误：

如果我评论UpdateModule洞察导入app.module.ts文件，该错误消失

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

能否请任何人给出任何建议，我应该怎么做才能成功将“ UpgradeModule”导入到我的app.modules.ts文件中，从而能够使我当前的AngularJS应用程序与Angular 5混合使用？ >

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

Answer 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（未找到）

找不到@ angular / upgrade / static 404

1 个答案: