我有一个旧的AngularJS应用程序，我想使用混合应用程序方法迁移到Angular 6。
在我这样做之前，我想遵循升级教程：Phonecat升级教程
因此，我克隆了Phonecat AngularJS应用程序，并按照步骤进行了操作。我被困在"升级电话服务"的步骤。
问题是在"phone list.component.ts"文件中有一个"从‘…’导入｛…｝"。当我删除导入并用"any"替换类型时，它就起作用了。一旦我添加导入，我在Chrome中就会出现以下错误：
导出未定义
我昨天搜索了一整夜，找到了一些解决方案，但都不起作用。也许是因为我发现的文档中必须有6之前的角度版本。
有人说最近的浏览器应该处理导入，也有人说我们不应该使用SystemJS。。。我有点迷路了。
谢谢你的帮助。如果你需要更多的细节或文件，我很乐意更新我的问题。
这是电话列表组件的
// 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"
]
}
}
这是我的系统.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>
您是否尝试在tsconfig.json中使用其他模块，如umd而不是commonjs？我认为这为我解决了的问题