Нужна помощь при переходе с AngularJS на Angular 6

Question

У меня есть старое приложение AngularJS, и я хочу перейти на Angular 6, используя метод гибридного приложения.

Прежде чем я сделаю это, я хотел пройти обучение по обновлению: руководство по обновлению Phonecat

Поэтому я клонировал приложение Phonecat AngularJS и следовал инструкциям. Я застрял на шаге "Обновление телефона".

Проблема в том, что у нас есть "import {...} from '...';" в файле "phone-list.component.ts". Когда я удаляю импорт и заменяю типы на "любой", это работает. Как только я добавляю импорт, у меня появляется следующая ошибка в Chrome:

экспорт не определен

Я вчера всю ночь искал и нашел несколько решений, но ни одно из них не работает. Может быть, это из-за того, что я нашел документацию для угловых версий до 6.

Некоторые люди говорят, что последние браузеры должны обрабатывать импорт, другие говорят, что мы не должны использовать SystemJS... Я немного растерялся.

Спасибо за вашу помощь. Если вам нужны дополнительные данные или файлы, я буду рад обновить мой вопрос.

Вот телефон-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
  });

Вот телефон-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? Я думаю, что это решило проблему для меня