Building angular using webpack not importing modules correctly

I have build a small example app to show off this issue. It seems when importing modules in the module declaration it does import the modules declarations. For example when I import the browser module it does not import NgIf, NgFor etc etc and when I import NgSelect it does not import any of its Schema or components. I am building the app without using angular-cli as I am currently migrating an app from angularjs to angular and moving it to use angular-cli would be an issue.

I have set up the webpack config like

const path = require('path'),
AngularWebpackPlugin = require('@ngtools/webpack'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
WebpackDevServer = require('webpack-dev-server');

module.exports = {
entry: {
'test': { import: "./app/app.module.ts", filename: 'js/[name].bundle.min.js' },
},
mode: 'none',
output: {
path: path.resolve(__dirname, "dist"),
clean: true
},
resolve: {
//extensions: ['.ts', '...'],
extensions: ['.tsx', '.ts', '.js', '.mjs', '.json']
},
optimization: {
},
plugins: [
new webpack.ProvidePlugin({
moment: 'moment'
}),
new HtmlWebpackPlugin({
title: 'Test',
template: './app/index.hbs',
cache: false,
hash: true,
inject: false
}),
new AngularWebpackPlugin.AngularWebpackPlugin({
'tsconfig': 'tsconfig.json',
//"compilerOptions": {},
"sourceMap": true,
'jitMode': true
})
],
module: {
rules:
[
{
test: /\.hbs$/i,
use: "handlebars-loader",
exclude: /node_modules/,
},
{
test: /\.[jt]sx?$/,
loader: '@ngtools/webpack',
include: /app[\\/]/,
exclude: [ /node_modules/ ]
},
{
test: /\.[cm]?js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
compact: false,
plugins: ['@angular/compiler-cli/linker/babel'],
},

},
},
{
test: /\.template\.html$/,
exclude: /node_modules/,
use:
[
{
loader: 'raw-loader',
options:
{
esModule: false,
},
}
],
},
{
test: /\.css$/i,
exclude: /node_modules/,
use:
[
{
loader: 'css-loader',
options: {
import: false,
url: false,
modules: false
}
}
]
}
],
},
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
watch: true
},
host: "localhost",
compress: true,
port: 5000,
server: 'https',
open: true,
liveReload: false,
hot: true,
client: {
overlay: true,
progress: true,
}
}
}


and the angular test app is

app.module.ts

import 'zone.js';

import { NgSelectModule } from '@ng-select/ng-select';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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


app.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-root',
template: require('./app.template.html'),
})
export class AppComponent implements OnInit {
public source = [ { id: 1, name: "moo" }]
public selected = null;

ngOnInit(): void {
console.log("YAY!");
}
}


app.template.html

<!DOCTYPE html>
<html lang="en">
<head>
<title ng-bind="title">T.I.E.R</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
</head>
<body>
<app-root></app-root>
<script defer src="js/test.bundle.min.js?904b25da0a6807f141ae"></script>
</body></html>


and my tsconfig is:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"resolveJsonModule": true,
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitOverride": false,
"noPropertyAccessFromIndexSignature": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": true,
"emitDecoratorMetadata": true,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "Node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"compilationMode": "partial"
}
}


As far as I can tell I am building the Ivy partials but I am getting the errors:

NG0304: 'ng-select' is not a known element (used in the 'AppComponent' component template):

1. If 'ng-select' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

and

NG0303: Can't bind to 'ngModel' since it isn't a known property of 'ng-select' (used in the 'AppComponent' component template).

1. If 'ng-select' is an Angular component and it has the 'ngModel' input, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

as if it is not imported. Apart from that angular is working fine. If I put NgIf in imports I can use it but it should be imported from BrowserModule or CommonModule.

Anyone have any ideas because I have spent 3 days on this and am about to stab my monitor?

Continue reading...