Question

我有一个MEAN应用程序，我一直遇到路由问题。我的应用程序正在重新加载每个选项卡点击路由到新组件。它应该通过角度来换取速度和SPA的好处。没有错误，但我相信我的代码设置是错误的。

这是我的server.js

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require("body-parser");
const mongoose = require('mongoose');

const appRoutes = require('./routes/app');
const keyRoutes = require('./routes/keys');
const mailRoutes = require('./routes/mail');

const app = express();
const uristring =
  process.env.MONGOLAB_URI ||
  process.env.MONGOHQ_URL ||
  'mongodb://localhost/db';

mongoose.connect(uristring, function (err, res) {
  if (err) {
    console.log ('ERROR connecting to: ' + uristring + '. ' + err);
  } else {
    console.log ('Succeeded connecting to: ' + uristring);
  }
  });

app.set('views', path.join(__dirname, './dist'));
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, './dist')));


app.use(function (req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
  next();

});


app.use('/mail', mailRoutes);
app.use('/keys', keyRoutes);
app.use('/', appRoutes);

//catch 404 and forward error handler
app.use('*', appRoutes);


app.listen(process.env.PORT || 8080);

module.exports = app;

这是我的路线/ app.js

const express = require('express');
const router = express.Router();
const path = require('path');



router.get('/', function (req, res, next) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

router.use('*', function(req,res) {
  res.sendFile(__dirname, '../dist/index.html');
});

module.exports = router;

这是我的app.module.ts，其中我的角度路由设置

const appRoutes: Routes = [
  { path: '', component: HeaderComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'event', component: EventComponent },
  { path: 'gallery', component: GalleryComponent },
  { path: 'thankyou', component: ThankyouPageModalComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    BodyComponent,
    HeaderComponent,
    ContactFormComponent,
    ContactComponent,
    GalleryComponent,
    PrayerRequestModalComponent,
    EventComponent,
    ImgCardsComponent,
    FooterComponent,
    ContactModalComponent,
    PrayerRequestFormComponent,
    RegisterFormComponent,
    ThankyouPageComponent,
    ThankyouPageModalComponent
  ],
  entryComponents: [
    ContactModalComponent,
    PrayerRequestModalComponent,
    ThankyouPageModalComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    NgbModule.forRoot(),
    Ng2PageScrollModule.forRoot(),
    SpinnerModule
  ],
  providers: [
    KeyService,
    EmailTransporterService,
    NgbActiveModal
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的路由由routerlink =＆＃34;表达＆＃34;在模板代码中。这是一个

的例子

<a pageScroll class="nav-link page-scroll"
           routerLink="/event"
           (click)="activateEvent()"
           (eventActivated)="onEventActivated($event)"
           href="#mainNav"
           [pageScrollDuration]="300"><strong>EVENT</strong></a>

另外，我想补充一点，我在根目录中有一个views目录，其中包含一个带有＆lt;％include ../src/index.html%>的index.ejs文件。这是基于我在html渲染中遇到的一些问题。

MEAN应用程序不在Angular中路由

0 个答案: