Question 174364 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    change this line:

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

    to this line:

    import { AppNavComponent } from './app-nav.component';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search