javascriptangulartypescriptstackblitz

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


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?


Solution

  • change this line:

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

    to this line:

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