Angular 7 + Webpack: Uncaught Error: Can't resolve all parameters for e: (?)

Question

Last week I started learning Angular + Webpack and I followed several guides on how to set it up with my specific backend (Django). But until now I haven't even been able to start up a most basic Hello World example for the Google Chrome console gives the following error: Uncaught Error: Can't resolve all parameters for e: (?).

I know this question has been asked several times now but this is a very barebones app, I haven't been adding services or other things, just simple Hello World. I also have included the generated bundle.js in my returned html page also with the <fotoplatform> selector as defined in app.component.ts. That is where Chrome's console returns the error. Would anyone of you be able to help me? I would greatly appreciate the effort!

Thanks in advance!

My (frontend) project structure is as follows:

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

Here are all the contents of all the files:

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

score 2 · Accepted Answer · answered Jan 12 '19 at 11:59

Finally managed to fix this. By disabling the webpack uglifier it gave me a more descriptive error: Error: Can't resolve all parameters for ApplicationModule: (?).

Then I found the following thread on StackOverflow which worked for me: Error: Can't resolve all parameters for ApplicationModule: (?)

So in conclusion, all I needed to add was the following two lines to the top import section in main.ts:

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

After that I got a selector not found error but that was easily fixed with moving the bundle.js script load to beneath the html body.

score 2 · Answer 2 · answered Feb 07 '20 at 10:53

As part of Angular7/8 you would need to following to your main.ts file

import "core-js/features/reflect";

This is how my main file look a like

import "core-js/features/reflect";
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { SomeModule } from "./launchpad/some-module.module";
// you can have more dependencies loaded here
enableProdMode();
platformBrowserDynamic().bootstrapModule(SomeModule);