Standalone Components

[IRobot1]

I confirmed the example on Introduction page of documentation works.

I removed requirement for standalone components. However, now I get the following error

Error: src/app/scene.component.ts:10:9 - error NG8001: 'ngt-mesh' is not a known element:

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

10 <ngt-mesh
~~~~~~~~~

Since there isn't an import for NgtMesh anymore, is it even possible to create non-standalone components anymore?

[nartc]

I'll check this one out

[nartc]

@IRobot1 you'd need to create a dummy NgModule to declare the Components 😩 not great, but I'm not sure of any other way to bypass the Angular Compiler checks

[IRobot1]

Thanks. I was able to get it working. Here's the final version. It also include example of using postprocessing.

import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, NgModule } from '@angular/core';

import { AmbientLight, BoxGeometry, Color, DirectionalLight, Mesh, MeshStandardMaterial, PointLight } from 'three';
import { extend, NgtArgs } from 'angular-three';

import { NgtpEffectComposer } from 'angular-three-postprocessing';
import { NgtpBloom } from 'angular-three-postprocessing/effects';


extend({ Mesh, MeshStandardMaterial, DirectionalLight, Color, BoxGeometry, AmbientLight, PointLight });

@Component({
  selector: 'demo-cube',
  //standalone: true,
  template: `
        <ngt-mesh
            [position]="position"
            [scale]="active ? 1.5 : 1"
            (click)="active = !active"
            (pointerover)="hovered = true"
            (pointerout)="hovered = false"
            (beforeRender)="onBeforeRender($any($event).object)"
        >
            <ngt-box-geometry />
            <ngt-mesh-standard-material [color]="hovered ? 'hotpink' : 'orange'" />
        </ngt-mesh>
    `,
  //schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CubeComponent {
  @Input() position = [0, 0, 0];

  hovered = false;
  active = false;

  onBeforeRender(cube: Mesh) {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }
}


@Component({
  //standalone: true,
  template: `
<ngt-color *args="['black']" attach="background" />
        
        <ngt-point-light [position]="[0, 0, 1]" />
        <demo-cube [position]="[1.5, 0, -1]" />
        <demo-cube [position]="[-1.5, 0, -1]" />
<ngtp-effect-composer>
    <ngtp-bloom [mipmapBlur]="true" [luminanceThreshold]="0" />
</ngtp-effect-composer>
    `,
  //imports: [CubeComponent, NgtArgs, NgtpEffectComposer, NgtpBloom],
  //schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneComponent {


}


@NgModule({
  declarations: [
    CubeComponent,
    SceneComponent,
  ],
  imports: [
    NgtArgs,
    NgtpEffectComposer,
    NgtpBloom,
  ],
  exports: [
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneModule { }

app.module.ts looks like this

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