javascript - Wie richtet man eine grundlegende Angular 8-Anwendung mit ES6/ES2015-Modulen (native Unterstützung) ein?

Da die native Unterstützung von ES6-Modulen in den neuesten Browsern recht gut implementiert ist (siehe https://caniuse.com/#feat=es6-module und https://caniuse.com/#feat=es6-module-dynamic-import), versuche ich, eine sehr einfache Angular-8-Anwendung ohne jeglichen Modul-Loader manuell einzurichten, zu Test- und Lernzwecken (bitte schlagen Sie daher nicht vor, Angular CLI zu verwenden).

Mein Problem ist, dass ich Schwierigkeiten habe, den Component-Dekorator von @angular/core zu importieren.

Hier ist meine Projektstruktur:

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

Hier ist meine ./tsconfig.json:

{
    "compilerOptions": {
        "outDir": "dist",
        "target": "ES2015",
        "module": "ES2015",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

Hier ist mein ./package.json:

{
    "name": "angular-starter",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "start": "live-server"
    },
    "dependencies": {
        "@angular/common": "8.2.0",
        "@angular/compiler": "8.2.0",
        "@angular/core": "8.2.0",
        "@angular/platform-browser": "8.2.0",
        "@angular/platform-browser-dynamic": "8.2.0",
        "rxjs": "6.5.2",
        "tslib": "1.10.0",
        "zone.js": "0.10.1"
    },
    "devDependencies": {
        "live-server": "1.2.1"
    }
}

Hier ist meine ./src/main.ts-Datei:

import "zone.js/dist/zone";

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));

Hier ist meine ./src/app/app.module.ts Datei:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Hier ist meine ./src/app/app.component.ts Datei:

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    template: "<h1>Welcome to {{ title }}!</h1>"
})
export class AppComponent {
    title = "Angular";
}

Ich habe [email global installiert.

Meine Schritte

Zuerst führe ich den Typescript-Compiler aus:

tsc

Dieser Befehl erstellt diese Dateien in meinem ./dist-Ordner:

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

Dann, wenn ich den Live-Server starte, erhalte ich die folgende Ausgabe in der Konsole:

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

Das ist normal, da Typescript-Importe nicht dem ES6-Standard entsprechen. Ich muss sie manuell aktualisieren, um sie korrekt zu machen (unter Bezugnahme auf js-Dateien mit Dateiendung).

Also ändere ich die Importe jeder Abhängigkeit, verweise auf die Haupt-Entry-Datei, die in jeder package.json jeder Abhängigkeit zu finden ist, und füge ".js" zu meinen Projektdateien hinzu.

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));

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

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 };

In ./dist/app/app.component.js:

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 };

Alle Importe scheinen einwandfrei zu funktionieren, außer dem letzten in ./dist/app/app.component.js:

SyntaxError: import not found: Component

Dieser Fehler besagt, dass im @angular/core/bundles/core.umd.js nichts den "Component"-Decorator exportiert.

Warum? Was habe ich verpasst?