Angular 7 + Webpack: Uncaught Ошибка: не удается разрешить все параметры для e: (?)

Question

На прошлой неделе я начал изучать Angular + Webpack и следовал нескольким инструкциям о том, как настроить его с помощью своего конкретного бэкэнда (Django).Но до сих пор я даже не смог запустить самый простой пример Hello World для консоли Google Chrome, который выдает следующую ошибку: Uncaught Error: Can't resolve all parameters for e: (?).

Я знаю, что этот вопрос задавался несколько раз, но этотэто очень скромное приложение, я не добавлял сервисы или другие вещи, просто Hello World.Я также включил сгенерированный bundle.js в свою возвращенную HTML-страницу также с помощью селектора <fotoplatform>, как определено в app.component.ts.Вот где консоль Chrome возвращает ошибку.Кто-нибудь из вас сможет мне помочь?Я был бы очень признателен за усилия!

Заранее спасибо!

Моя (внешняя) структура проекта выглядит следующим образом:

--frontend/
  --node_modules/
  --src/
    --app/
      --app.component.ts
      --app.module.ts
    --main.ts
  --package.json
  --tsconfig.json
  --webpack.config.js

Вот все содержимое всех файлов:

package.json

{
  "name": "fotoplatform",
  "version": "0.0.1",
  "scripts": {
    "watch": "webpack"
  },
  "dependencies": {
    "@angular/animations": "~7.1.4",
    "@angular/common": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/compiler-cli": "~7.1.4",
    "@angular/core": "~7.1.4",
    "@angular/forms": "~7.1.4",
    "@angular/http": "~7.1.4",
    "@angular/platform-browser": "~7.1.4",
    "@angular/platform-browser-dynamic": "~7.1.4",
    "@angular/platform-server": "~7.1.4",
    "@angular/router": "~7.1.4",
    "@angular/upgrade": "~7.1.4",
    "core-js": "~2.5",
    "rxjs": "~6.3",
    "zone.js": "~0.8"
  },
  "devDependencies": {
    "@types/core-js": "~2.5.0",
    "@types/node": "~10.12.17",
    "typescript": "~3.1.1",
    "ts-loader": "~5.3.1",
    "webpack": "~4.28.0",
    "webpack-cli": "^3.1.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './src/main.ts',
    watch: true,
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../fotoplatform/static/dist')
    }
};

app.component.ts

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

@Component({
    selector: 'fotoplatform',
    template: '<h1>Hello world!</h1>',
})
export class AppComponent {

    constructor(){
        console.log("I am Angular!")
    }
}

app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

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

Answer 1

Наконец-то удалось это исправить.Отключив uglifier веб-пакета, он дал мне более описательную ошибку: Error: Can't resolve all parameters for ApplicationModule: (?).

Затем я нашел следующий поток на StackOverflow, который работал для меня: Ошибка: Не удается разрешить все параметры для ApplicationModule: (?)

Итак, в заключение все, что мне нужно было добавить, это следующие две строки в верхний раздел импорта в main.ts:

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

После этого я получил селекторошибка не найдена, но ее легко исправить, переместив загрузку скрипта bundle.js под тело html.