javascript - ES6/ES2015 modülleri (yerel destek) ile temel bir Angular 8 uygulaması nasıl kurulur?

En son tarayıcılarda ES6 modüllerinin yerel desteği oldukça iyi bir şekilde uygulandığından (bkz. https://caniuse.com/#feat=es6-module ve https://caniuse.com/#feat=es6-module-dynamic-import), test/öğrenme amacıyla modül yükleyici kullanmadan, elle çok temel bir Angular 8 uygulaması kurmayı deniyorum (bu yüzden lütfen Angular CLI kullanmayı önermeyin).

Benim problemim, @angular/core'den Component dekoratörünü ithal etmekte zorluk çekmem.

İşte proje yapım:

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

İşte benim ./tsconfig.json dosyam:

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

İşte benim ./package.json dosyam:

{
    "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"
    }
}

İşte benim ./src/main.ts dosyam:

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

İşte benim ./src/app/app.module.ts dosyam:

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

İşte benim ./src/app/app.component.ts dosyam:

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

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

Benim [email global olarak yüklü.

Adımlarım

Önce, Typescript derleyicisini çalıştırırım:

tsc

Bu komut, bu dosyaları ./dist klasörümün altında oluşturur:

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

Sonra, canlı sunucuyu çalıştırırsam, konsolda aşağıdaki çıktıyı alırım:

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

Bu normal, çünkü Typescript importları ES6 standartlarına uygun değil. Doğru yapabilmek için onları manuel olarak güncellemem gerekiyor (js dosyalarına dosya uzantısıyla referans vererek).

Yani her bir bağımlılığın importlarını değiştiriyorum, her bağımlılığın package.json dosyasında bulunan ana giriş dosyasına referans veriyorum ve proje dosyalarıma ".js" ekliyorum.

./dist/main.js içinde:

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

./dist/app/app.module.js içinde:

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

./dist/app/app.component.js içinde:

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

./dist/app/app.component.js içindeki son ithalat dışında tüm ithalatlar düzgün çalışıyor gibi görünüyor:

SyntaxError: import not found: Component

Bu hata, @angular/core/bundles/core.umd.js içinde "Component" dekoratörünü dışa aktaran hiçbir şey olmadığını söylüyor.

Neden? Ne kaçırdım?