В моем приложении Angular ничего не отображается - PullRequest
Новая
       3

В моем приложении Angular ничего не отображается

0 голосов
/ 26 февраля 2020

Я новичок в веб-разработке, и я следую этому учебнику , и до того, как я сделал код перед внутренним кодом, я пытался его построить, но на странице ничего нет, я попробовал ng serve и ng build (затем подал его на мой локальный IIS). вот коды

index. html (сборка) 

<!doctype html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta charset="utf-8">
  <title>NewApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>
</html>

app-routing.module.ts 

import { NgModule, Component } from "@angular/core";
import { RouterModule,Routes } from '@angular/router';
import {AuthGuard} from './helpers/canActivateAuthGuard';
import { LoginComponent }   from './components/login/login.component';
import { LogoutComponent }   from './components/login/logout.component';
import { DashboardComponent }   from './components/dashboard/dashboard.component';
import { UsersComponent }      from './components/users/users.component';
import {AppComponent} from './layout/app.component'

const routes: Routes = [

  {path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'logout', component: LogoutComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'users', component: UsersComponent},

]
@NgModule({

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]

})

export class AppRoutingModule {}

app.module.ts 

import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox'
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSidenavModule, MatSidenav} from '@angular/material/sidenav';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule} from '@angular/common/http';

@NgModule({

  imports: [

    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatInputModule,
    MatFormFieldModule,
    MatSidenavModule,
    AppRoutingModule,
    HttpClientModule],
  })

  export class AppModule{}

app.component. html

<div *ngIf="authentication">
  <app-head></app-head>

  <button type="button" mat-button (click)="drawer.toggle()">

    Menu

  </button>

  <mat-drawer-container class="example-container" autosize>

    <mat-drawer #drawer class="example=sidenav" mode="slide">

      <app-left-panel></app-left-panel>

    </mat-drawer>

    <div>

      <router-outlet></router-outlet>

    </div>
  </mat-drawer-container>
</div>

<div *ngIf="!authentication"><app-login></app-login></div>

app.component.ts 

import { Component } from '@angular/core';

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

Ответы [ 2 ]

2 голосов
/ 26 февраля 2020

Ваш AppComponent никогда не объявляется. Вам не хватает следующего в AppModule 

@NgModule({
declarations : [AppComponent],
bootstrap: [AppComponent],
imports: [ 
...

Это должно быть указано в ваших инструментах разработчика браузеров.

0 голосов
/ 26 февраля 2020

Как уже было описано, вы должны добавить AppComponent к declarations и bootstrap массиву внутри AppModule

@NgModule({
  declarations : [AppComponent],
  bootstrap: [AppComponent],
  imports: [...]
})

Вы также используете свойство authentication внутри *ngIf in app.component.html, но это свойство не определено внутри app.component.ts

Попробуйте добавить его к app.component.ts

import { Component } from '@angular/core';

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

Это фактически не вызывало сообщения об ошибке в консоль, когда я тестировал ее на Stackblitz

Это также описано в предоставленном вами руководстве

В основном у нас будет свойство аутентификации в компоненте, которое позволит нам удалить заголовок и меню, если пользователь не вошел в систему, и вместо этого, показать простую страницу входа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...