Knoten/Express Winkel 5 Routing

Ich erstelle eine Anwendung mit angular5 und Express 4.16. Ich habe ein Anchor-Tag auf der Startseite beim Klicken, von dem eine andere Komponente gerendert werden soll (es sollte zu dieser URL umgeleitet werden), aber nur URL-Änderungen.Knoten/Express Winkel 5 Routing

Erforderlicher Code ist unten.

app-routing.module.ts

import { NgModule } from '@angular/core'; 
    import { RouterModule, Routes } from '@angular/router'; 
    import { AppComponent } from './app.component'; 
    import { TestComponent } from '../test/test.component'; 


    const routes: Routes = [ 
    { path: '', redirectTo: '/', pathMatch: 'full' }, 

    { path: 'Test', component: TestComponent } 

    ]; 

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

app.component.ts

import { Component } from '@angular/core'; 
    // Import the DataService 
    import { DataService } from './data.service'; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     // Define a users property to hold our user data 
     employees: Array<any>; 
     // Create an instance of the DataService through dependency injection 
     constructor(private _dataService: DataService) { 
     // Access the Data Service's getUsers() method we defined 
     this._dataService.getEmployees() 
      .subscribe(res => this.employees = res); 
     } 
    }

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 
    import { FormsModule } from '@angular/forms'; 
    import { AppComponent } from './app.component'; 
    import {TestComponent } from '../test/test.component'; 
    import { AppRoutingModule }  from './app-routing.module'; 
    import{DataService} from './data.service' 
    import {HttpModule} from '@angular/http' 
    @NgModule({ 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     AppRoutingModule, 
     HttpModule 
     ], 
     declarations: [ 
     AppComponent, 
     TestComponent 

     ], 

     providers: [DataService], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { }

aus Ordner durch ng build /dist/index.html setzen

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>IndexV3</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> 
     <test-html></test-html> 
    <script type="text/javascript" src="inline.bundle.js"></script> 
    <script type="text/javascript" src="polyfills.bundle.js"></script> 
    <script type="text/javascript" src="styles.bundle.js"></script> 
    <script type="text/javascript" src="vendor.bundle.js"></script> 
    <script type="text/javascript" src="main.bundle.js"></script> 
    </body> 
    </html>

Node/Express server.js

  const express = require('express'); 
      const bodyParser = require('body-parser'); 
      const path = require('path'); 
      const http = require('http'); 
      const app = express(); 

      // API file for interacting with MongoDB 
      const api = require('./server/routes/api'); 

      // Parsers 
      app.use(bodyParser.json()); 
      app.use(bodyParser.urlencoded({ extended: false})); 

      // Angular DIST output folder 
      app.use(express.static(path.join(__dirname, 'dist'))); 

      // API location 
      app.use('/api', api); 

      // Send all other requests to the Angular app 
      app.get('*', (req, res) => { 

       res.sendFile(path.join(__dirname, 'dist/index.html')); 
      }); 

      //Set Port 
      const port = process.env.PORT || '3000'; 
      app.set('port', port); 

      const server = http.createServer(app); 

     server.listen(port,() => console.log(`Running on   localhost:${port}`));

Ausgabe der Homepage wie gewünscht

Downoad screenshot Output after running localhost:3000 as desired anchor tag rendered

Nach Klick auf Anker-Tag-URL geändert, aber Testkomponente nur knapp sein Ziel auf Browser gerendert

Downoad screenshot

test.component.ts

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

    @Component({ 

     selector: 'test-html', 
     templateUrl: './test.component.html' 

    }) 
    export class TestComponent { 
     title = 'app'; 
    }

app.component.html

<!--The content below is only a placeholder and can be replaced.--> 
    <div style="text-align:center"> 
     <h1>  
     </h1> 
    </div> 

    <a [routerLink]="['/Test']" >test</a> 
    <ul> 
     <li *ngFor="let employee of employees">{{employee.name}}</li> 
    </ul>

test.component.html

 <span>yeeee</span>

Projektstruktur

download project structure if required

Quelle

2017-11-10 Var

Sie den Router-Ausgang fehlt. Nehmen Sie die Vorlage, die Sie für app.component haben, und erstellen Sie eine neue Komponente mit dieser Vorlage. Dann wird Ihr app.component.html enthalten machen nur

<router-outlet></router-outlet>

dann in Ihrem app.routing.module.ts ersetzen Sie das Objekt für Ihr Zuhause Route mit:

{ path: '', component: YourNewHomeComponent},

mehr über Router-Ausgang: https://angular.io/guide/router#router-outlet

Quelle

2017-11-11 00:51:51 CascadiaJS

Kann nicht glauben, ich verpasst, dass :(.. Danke man :) – Var

Knoten/Express Winkel 5 Routing

Antwort

Verwandte Themen