typescript 添加更多的Angular独立组件到默认的Stackblitz应用组件?

dwbf0jvd  于 2023-05-30  发布在  TypeScript
关注(0)|答案(2)|浏览(129)

我创建了第二个独立的AppNavComponent组件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';
}

它导入main如下:

@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>
  `,
})

它会产生错误:

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

有什么想法?

f0ofjuux

f0ofjuux1#

更改此行:

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

到这一行:

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

7ivaypg92#

更改main.tsAppNavComponent的导入,以指示该组件与当前文件位于同一目录。

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

to

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

Forked Working Example

相关问题