First of, yes I looked into all the other related issues where everyone says the issue has been solved elsewhere! (they pretty much all boil down to not adding the component to the module's declarations, but I do have it there. or to add either BrowserModule or CommonModule to imports (NgModule imports), and I have them both now. I'm thoroughly stumped...
I've been stuck on this for a while, and the annoying thing is that this almost works, but it doesn't quite... and I've gotten other angular projects up and running, but this is a minimal example of a bigger angular project that I'm working on so I'm looking for a pointer to where the problem lies that causes this error. any help is appreciated!
This might be a webpack issue... I don't really know at the moment, and I don't want to assume anything, Hence I included it as a tag.
I have made a minimal example app... not sure where the best way to host it for stack overflow purposes, so here's a zip on dropbox:
https://www.dropbox.com/s/pjsynyqdnw6wim7/angular-app.tgz?dl=0
So you can download, unzip and run npm i + npm run build + host files with python3 -m http.server or similar...
for the sake of making this more available (maybe someone will see something right away), here's some files from the repo:
main.ts
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./modules/app.module";
document.addEventListener("DOMContentLoaded", () => {
platformBrowserDynamic().bootstrapModule(AppModule);
});
// platformBrowserDynamic().bootstrapModule(AppModule);
modules/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { TestComponent } from '../components/test.component';
@NgModule({
imports: [BrowserModule, CommonModule],
declarations: [TestComponent],
bootstrap: [TestComponent]
})
export class AppModule {}
components/test.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'test-component',
template: /*html*/`
<div *ngFor="let foobar of foobars">
{{ foobar }}
</div>
`,
})
export class TestComponent {
public foobars = ['foobar1', 'foobar2', 'foobar42']
}
polyfills.ts
import 'core-js';
import 'zone.js/dist/zone.js';
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Login</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='./dist/app-bundle.js'></script>
</head>
<body>
<test-component></test-component>
</body>
</html>
webpack.config.js
const webpack = require("webpack");
module.exports = {
mode: "production",
entry: {
app : './src/main.ts'
},
output: {
filename: "./[name]-bundle.js",
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.mjs$/,
loader: "babel-loader",
options: {
compact: false,
plugins: ['@angular/compiler-cli/linker/babel'],
},
resolve: {
fullySpecified: false,
},
},
],
},
target: "web",
devtool: "source-map",
optimization: {
minimize: false,
},
}