angularjs Angular独立组件未正确导入，导入后未在html上显示任何内容

bakd9h0s 于 9个月前发布在 Angular

关注(0)|答案(1)|浏览(84)

所以我是Angular的新手，目前我正在使用Firebase和其他东西来克隆Angular。所以，Angular向我抛出了两个错误，名为：
1.组件AppComponent是独立的，不能在NgModule中声明。您是否打算改为导入它？

AppComponent类是一个独立的组件，不能在@NgModule.bootstrap数组中使用。请改用bootstrapApplication函数进行引导。
下面是app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    provideFirebaseApp(() => initializeApp({
      apiKey: "YOUR API KEY",
      authDomain: "YOUR AUTH DOMAIN",
      databaseURL: "YOUR DATABASE URL",
      projectId: "YOUR PROJECT ID",
      storageBucket: "YOUR STORAGE BUCKET",
      messagingSenderId: "YOUR SENDER ID",
      appId: "YOUR APP ID",
      measurementId: "YOUR MEASUREMENT ID"
    })),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent]
}
export class AppModule { }

字符串
这是app.compnent.module.ts：

import { Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';
import { RouterLinkActive, RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet,
    RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zomato-clone';
}

型
我不知道该怎么办。有人能帮帮忙吗？先谢谢你了。
我试着从声明和 Bootstrap 中删除AppComponent，它确实编译了，但我在HTML上看不到任何东西。我希望看到我在HTML文档中设计的导航栏，但只看到一个空白页面。

angularjs

来源：https://stackoverflow.com/questions/77617585/angular-standalone-componentnot-getting-imported-properly-and-after-getting-impo

1条答案

按热度按时间

cld4siwp1#

从app.component中删除standalone: true和imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],

import { Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zomato-clone';
}

字符串
在应用程序模块ts中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CommonModule } from '@angular/common';
import { RouterLinkActive, RouterOutlet, RouterLink } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent
  ],
  imports: [
    BrowserModule,
    CommonModule, // add here if necessasry
    RouterLinkActive,// add here if necessasry
    RouterOutlet, // add here if necessasry
    RouterLink,// add here if necessasry
    AppRoutingModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    provideFirebaseApp(() => initializeApp({
      apiKey: "YOUR API KEY",
      authDomain: "YOUR AUTH DOMAIN",
      databaseURL: "YOUR DATABASE URL",
      projectId: "YOUR PROJECT ID",
      storageBucket: "YOUR STORAGE BUCKET",
      messagingSenderId: "YOUR SENDER ID",
      appId: "YOUR APP ID",
      measurementId: "YOUR MEASUREMENT ID"
    })),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent]
}
export class AppModule { }
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'zomato-clone';
    }

型

赞(0）回复(0）举报 9个月前

我来回答

angularjs Angular独立组件未正确导入，导入后未在html上显示任何内容

1条答案

相关问题

热门标签

最新问答