Adding more Angular standalone components to the default Stackblitz App component?

Question

I created a second standalone AppNavComponent component on Stackblitz.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  standalone: true,
  selector: 'app-nav',
  imports: [CommonModule, RouterOutlet],
  template: `<router-outlet>`,
})
export class AppNavComponent {
  name = 'Angular';
}

It's imported it the main one like this:

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, AppNavComponent],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a>
  `,
})

And it produces the error:

Cannot find module 'app-nav.component' or its corresponding type declarations.

Thoughts?

Answer 1

Change the import of AppNavComponent in main.ts to indicate that the component is located in the same directory as the current file.

From

import { AppNavComponent } from 'app-nav.component';

to

import { AppNavComponent } from './app-nav.component';

Forked Working Example

Answer 2

change this line:

import { AppNavComponent } from 'app-nav.component';

to this line:

import { AppNavComponent } from './app-nav.component';