angular - 即使在控制台中也没有错误的空白页面

Question

我更新了一些包并编辑了一些组件，但没有编辑路由或应用程序模块。现在我只显示一个空白页。

当我启动应用程序时，即使在开发者控制台中，应用程序也成功编译，没有错误，但它不再显示任何页面。

有人知道如何解决这个问题吗？

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { SharedModule } from './shared/shared.module';
import { HomePageComponent } from './home-page/home-page.component';

import { environment } from 'src/environments/environment';

// Firebase imports
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorage } from '@angular/fire/storage';
import { CommonModule } from '@angular/common';
//import { SearchBarComponent } from './shared/navbar/search-bar/search-bar.component';
import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
import { NewCommentComponent } from './comments/new-comment/new-comment.component';
import { NewDocumentComponent } from './documents/new-document/new-document.component';
import { QuestionComponent } from './documents/question/question.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SingleDocumentComponent } from './documents/single-document/single-document.component';
import { EditDocumentComponent } from './documents/edit-document/edit-document.component';
import { TemplateComponent } from './documents/template/template.component';

import { HttpClientModule} from '@angular/common/http';
import { AngularFireFunctions, FUNCTIONS_REGION } from '@angular/fire/functions';
import { EditorModule } from '@tinymce/tinymce-angular';

import { CategoryDialogComponent } from './home-page/category-dialog/category-dialog.component';
import { DocumentCheckoutComponent } from './documents/document-checkout/document-checkout.component';

import { CarouselComponent } from './home-page/carousel/carousel.component';
import { ProPageComponent } from './pro-page/pro-page.component';
import { MarkdownEditorModule } from './markdown-editor/markdown-editor.module';
import { MarkdownEditorOptions } from './markdown-editor/markdownEditorOptions';
// import { CheckoutComponent } from './checkout/checkout.component';
import { MatDialogModule } from '@angular/material/dialog';
import {MatStepperModule} from '@angular/material/stepper';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatAutocompleteModule} from '@angular/material/autocomplete';

const editorConfig = new MarkdownEditorOptions();
editorConfig.autoDownloadFontAwesome = true;
editorConfig.initialValue = 'Hello Editor...write something amazing.';

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
   
    NewCommentComponent,
    NewDocumentComponent,
    QuestionComponent,
    SingleDocumentComponent,
    EditDocumentComponent,
    TemplateComponent,
    CategoryDialogComponent,
    DocumentCheckoutComponent,
    CarouselComponent,
    ProPageComponent,
    PanierComponent,
    MentionsComponent,
    // CheckoutComponent,
    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    EditorModule,
    MarkdownEditorModule.forRoot(editorConfig),
    MatDialogModule,
    MatStepperModule,
    MatInputModule,
    MatButtonModule,
    MatAutocompleteModule, 
  ],
  providers: [
    AngularFireAuthGuard,
    AngularFireStorage,
    AngularFireFunctions,
    { provide: FUNCTIONS_REGION, useValue: 'europe-west1'}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

包.json

{
  "name": "gdroit",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "^10.2.5",
    "@angular/compiler": "^10.2.5",
    "@angular/core": "^10.2.5",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "^10.2.5",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "^10.2.5",
    "@angular/platform-browser-dynamic": "^10.2.5",
    "@angular/router": "^10.2.5",
    "@ngtools/webpack": "^10.2.3",
    "@stripe/stripe-js": "^1.17.1",
    "@tinymce/tinymce-angular": "^4.2.4",
    "algoliasearch": "^4.10.5",
    "angular-instantsearch": "^2.3.0",
    "bootstrap": "^4.6.0",
    "firebase": "^7.24.0",
    "firebase-functions": "^3.15.5",
    "html-to-pdfmake": "^2.3.4",
    "html2canvas": "^1.3.2",
    "jspdf": "^2.3.1",
    "mammoth": "^1.4.18",
    "ng-image-slider": "^2.8.0",
    "ng2-pdf-viewer": "^6.4.1",
    "ngx-bootstrap": "^5.6.2",
    "ngx-clipboard": "^13.0.1",
    "ngx-owl-carousel-o": "^3.1.1",
    "nodemailer": "^6.6.3",
    "npm": "^6.14.15",
    "pdfmake": "^0.1.72",
    "stripe": "^8.174.0",
    "tinymce": "^5.9.1",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.900.7",
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular/cli": "^10.2.3",
    "@angular/compiler-cli": "^10.2.5",
    "@angular/language-service": "^10.2.5",
    "@types/jasmine": "^3.9.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.24",
    "@types/stripe-checkout": "^1.0.4",
    "@types/stripe-v3": "^3.1.25",
    "codelyzer": "^5.2.2",
    "firebase-tools": "^7.16.2",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.4.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "^5.4.4",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "^4.0.8"
  }
}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';
import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
import { AdminGuard } from './guards/admin.guard';
import { ResetPasswordComponent } from './auth/reset-password/reset-password.component';
import { ProPageComponent } from './pro-page/pro-page.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { PanierComponent } from './panier/panier.component';
import { MentionsComponent } from './mentions/mentions.component';



const routes: Routes = [
  { path: '', component: HomePageComponent},
  { path: 'login', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
  { path: 'cards', loadChildren: () => import('./cards/cards.module').then(m => m.CardsModule) },
  { path: 'collective-actions', loadChildren: () => import('./actions/actions.module').then(m => m.ActionsModule) },
  { path: 'users', loadChildren: () => import('./users/users.module').then(r => r.UsersModule)},
  { path: 'account', loadChildren: () => import('./account/account.module').then(m => m.AccountModule), canActivate: [AngularFireAuthGuard]},
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canActivate: [AdminGuard]},
  { path: 'pro',component: ProPageComponent},
  { path: 'emploi', loadChildren: () => import('./emploi/emploi.module').then(m => m.EmploiModule)},
  { path: 'fiches', loadChildren: () => import('./fiches/fiches.module').then(m => m.FichesModule)},
  { path: 'checkout',component: CheckoutComponent},
  { path: 'panier',component: PanierComponent},
  { path: 'mentions',component: MentionsComponent},
  { path: 'auth/email/action', component: ResetPasswordComponent},
  { path: 'fiches', loadChildren: () => import('./fiches/fiches.module').then(m => m.FichesModule) },
  { path: 'emploi', loadChildren: () => import('./emploi/emploi.module').then(m => m.EmploiModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(
      private router: Router,
    ) {
      this.router.events.subscribe(event => {
        console.log(event);
      });
    }
  title = 'gdroit'
}

标签： angulartypescriptangular10

Answer 1

尝试在路由模块末尾添加通配符路由：

{ path: '**', component: HomePageComponent}