Dependency injection does not work

[ah1508]

Hi,

The sample works but dependency injection does not. Example with HttpClient

import { HttpClientModule } from "@angular/common/http";
// other imports

@Component({
  selector: "app-component",
  template: "<div>AppComponent works!</div>",
})
export class AppComponent {
  constructor(httpClient : HttpClient) {}
}

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

Adding AngularWebPackPlugin, @ngtools/webpack and linkerPlugin solves the problem.

Complete webpack config (with webpack 5, angular 13 and type="module" in package.json) :

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { AngularWebpackPlugin } from '@ngtools/webpack';
import linkerPlugin from '@angular/compiler-cli/linker/babel';

const __dirname = path.dirname(new URL(import.meta.url).pathname)

export default {
    entry: { polyfills: "./src/polyfills.ts", main: "./src/main.ts" },
    resolve: { extensions: [".js", ".ts"] },
    output: { path: path.resolve(__dirname, 'dist'), filename: "[name].js" },
    module: {
        rules: [
            { test: /\.ts$/, use: "@ngtools/webpack" },
            { test: /\.m?js$/, use: { loader: "babel-loader", options: { plugins: [linkerPlugin] } } }
        ]
    },
    plugins: [
        new AngularWebpackPlugin(),
        new HtmlWebpackPlugin({ template: "./src/index.html" })
    ],
    devtool: "source-map",
    devServer: {
        historyApiFallback: true
    }
};

Still, the size of a production bundle for a simple "hello world" is 455 kb while it is less than 200 kb with angular cli. Too bad that Angular documentation does not explain how to optimize that.

[marcin-wosinek]

@ah1508 thanks a lot for pointing it out! I went recently through https://www.upgradingangularjs.com/, and they show there the same thing + they show how to set up AOT for @angular/cli-free builds. Seems I'll need to publish an updated version of the original post some time:)