Question

我有一个旧的AngularJS应用，我想使用混合应用方法迁移到Angular 6。

在这样做之前，我想遵循升级教程： Phonecat upgrade tutorial

因此，我克隆了Phonecat AngularJS应用并按照步骤进行操作。我陷入了“升级电话服务”步骤。

问题是通过从“ ...”导入{...}；”在“ phone-list.component.ts”文件中。当我删除导入并将类型替换为“ any”时，它可以工作。添加导入后，Chrome中立即出现以下错误：

未定义导出

我昨天整夜都在搜索，发现了一些解决方案，但是都没有用。也许是因为我发现的文档必须针对6之前的版本。

有人说最近的浏览器应该处理导入，还有一些人说我们不应该使用SystemJS ...我有点迷失了。

感谢您的帮助。如果您需要更多详细信息或文件，请随时更新我的问题。

这是phone-list.component.ts

// import { Phone, PhoneData } from '../core/phone/phone.service';
declare var angular: angular.IAngularStatic;

class PhoneListController { 
  phones: any[];
  orderProp: string;

  static $inject = ['phone'];
  constructor(phone: any) {
    phone.query().subscribe(phones => {
      this.phones = phones;
    });
    this.orderProp = 'age';
  }
}

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: PhoneListController
  });

这是phone-list.component.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PhoneListController = /** @class */ (function () {
    function PhoneListController(phone) {
        var _this = this;
        phone.query().subscribe(function (phones) {
            _this.phones = phones;
        });
        this.orderProp = 'age';
    }
    PhoneListController.$inject = ['phone'];
    return PhoneListController;
}());
angular.
    module('phoneList').
    component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: PhoneListController
});
//# sourceMappingURL=phone-list.component.js.map

这是我的tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "sourceMap": true,
        "declaration": false,
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom",
            "es5",
            "es6"
        ]
    }
}

这是我的system.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // 'ng-loader': '../../../systemjs-angular-loader.js',
            // 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/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/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

            'core-js': 'npm:core-js',
            'zone.js': 'npm:zone.js',
            'rxjs': 'npm:rxjs',
            'tslib': 'npm:tslib/tslib.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'rxjs/operators': { main: 'index.js', defaultExtension: 'js' }
        }
    });
})(this);

这是我的html文件

<!doctype html>
<html lang="en">

<head>
    <base href="/app/">
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="app.animations.css" />


    <script>var e2xports={};</script>

    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="/systemjs.config.js"></script>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="app.module.ajs.js"></script>
    <script src="app.config.js"></script>
    <script src="app.animations.js"></script>
    <script src="core/core.module.js"></script>
    <script src="core/checkmark/checkmark.filter.js"></script>
    <script src="core/phone/phone.module.js"></script>
    <!-- <script src="core/phone/phone.service.js"></script> -->
    <script src="phone-list/phone-list.module.js"></script>
    <script src="phone-list/phone-list.component.js"></script>
    <script src="phone-detail/phone-detail.module.js"></script>
    <script src="phone-detail/phone-detail.component.js"></script>

<script>
      System.import('/app');
    </script>   
</head>

<body>

    <div class="view-container">
        <div ng-view class="view-frame"></div>
    </div>

</body>

</html>

Answer 1

您是否尝试过在tsconfig.json中使用另一个模块，例如umd而不是commonjs？我认为这为我解决了这个问题

需要帮助从AngularJS迁移到Angular 6

1 个答案: