Javascript 如何使用ES6/ES2015模块（本机支持）设置基本angular 8应用程序？

由于ES6模块的本机支持在最新的浏览器中得到了很好的实现（请参阅和），因此我尝试使用一个非常基本的Angular 8应用程序，完全不使用模块加载程序，手动进行测试/学习（因此，请不要建议使用Angular CLI）

我的问题是从@angular/core导入组件装饰器时遇到问题。

以下是我的项目结构：

+---dist
+---node_modules
+---src
|   +---app
|   |   +---app.component.ts
|   |   +---app.module.ts
|   +---main.ts
+---index.html
+---package.json
+---tsconfig.json

这是我的./tsconfig.json：

{
“编译器选项”：{
“outDir”：“dist”，
“目标”：“ES2015”，
“模块”：“ES2015”，
“moduleResolution”：“节点”，
“实验生态学者”：没错，
“emit decoratormatata”：真
}
}

这是我的./package.json：

{
“名称”：“角度启动器”，
“版本”：“1.0.0”，
“私人”：没错，
“脚本”：{
“开始”：“实时服务器”
},
“依赖项”：{
“@angular/common”：“8.2.0”，
“@angular/compiler”：“8.2.0”，
“@angular/core”：“8.2.0”，
“@angular/platform浏览器”：“8.2.0”，
“@angular/platform browser dynamic”：“8.2.0”，
“rxjs”：“6.5.2”，
“tslib”：“1.10.0”，
“zone.js”：“0.10.1”
},
“依赖性”：{
“实时服务器”：“1.2.1”
}
}

这是我的./src/main.ts文件：

导入“zone.js/dist/zone”；
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}”；
从“/app/app.module”导入{AppModule}；
platformBrowserDynamic（）
.bootstrapModule（AppModule）
.catch（err=>console.error（err））；

这是我的./src/app/app.module.ts文件：

从“@angular/platform browser”导入{BrowserModule}”；
从“@angular/core”导入{NgModule}；
从“/app.component”导入{AppComponent}；
@NGD模块({
声明：[AppComponent]，
导入：[BrowserModule]，
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

这是我的./src/app/app.component.ts文件：

从“@angular/core”导入{Component}；
@组成部分({
选择器：“应用程序根”，
模板：“欢迎来到{{title}！”
})
导出类AppComponent{
title=“角度”；
}

我有typescript@3.5.3全球安装

我的脚步 首先，我运行Typescript编译器：

tsc

此命令在my./dist文件夹下生成这些文件：

+---dist
|   +---app
|   |   +---app.component.js
|   |   +---app.module.js
|   +---main.js

然后，如果我运行live server，我将在控制台中获得以下输出：

TypeError: Error resolving module specifier: zone.js/dist/zone main.js:1:7

这是正常的，因为Typescript导入不是ES6标准。我必须手动更新它们以使其正确（引用具有文件扩展名的js文件）

因此，我更改每个依赖项导入，引用每个依赖项的package.json中的主条目文件，并将“.js”添加到我的项目文件中

In./dist/main.js:

import "./../node_modules/zone.js/dist/zone-node.js";
import { platformBrowserDynamic } from "./../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js";
import { AppModule } from "./app/app.module.js";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { BrowserModule } from "./../../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js";
import { NgModule } from "./../../node_modules/@angular/core/bundles/core.umd.js";
import { AppComponent } from "./app.component.js";
let AppModule = class AppModule {
};
AppModule = __decorate([
    NgModule({
        declarations: [AppComponent],
        imports: [BrowserModule],
        providers: [],
        bootstrap: [AppComponent]
    })
], AppModule);
export { AppModule };

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component } from "./../../node_modules/@angular/core/bundles/core.umd.js";
let AppComponent = class AppComponent {
    constructor() {
        this.title = "Angular";
    }
};
AppComponent = __decorate([
    Component({
        selector: "app-root",
        template: "<h1>Welcome to {{ title }}!</h1>"
    })
], AppComponent);
export { AppComponent };

In./dist/app/app.module.js:

import "./../node_modules/zone.js/dist/zone-node.js";
import { platformBrowserDynamic } from "./../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js";
import { AppModule } from "./app/app.module.js";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { BrowserModule } from "./../../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js";
import { NgModule } from "./../../node_modules/@angular/core/bundles/core.umd.js";
import { AppComponent } from "./app.component.js";
let AppModule = class AppModule {
};
AppModule = __decorate([
    NgModule({
        declarations: [AppComponent],
        imports: [BrowserModule],
        providers: [],
        bootstrap: [AppComponent]
    })
], AppModule);
export { AppModule };

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component } from "./../../node_modules/@angular/core/bundles/core.umd.js";
let AppComponent = class AppComponent {
    constructor() {
        this.title = "Angular";
    }
};
AppComponent = __decorate([
    Component({
        selector: "app-root",
        template: "<h1>Welcome to {{ title }}!</h1>"
    })
], AppComponent);
export { AppComponent };

此错误表示@angular/core/bundles/core.umd.js中没有导出“组件”装饰器

为什么?？我错过了什么