无法使用Angular 4加载MEAN STACK中的前端路由

时间:2018-01-23 09:13:48

标签: node.js angular mean-stack

我正在使用带有Angular 4的MEAN STACK创建一个应用程序(此技术的新功能)。我正在尝试处理前端路由,即在使用url http://localhost:3000/admin时,它应该加载管理组件,http://localhost:3000/registration它应该加载注册组件。

App-Routing.modeule.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {RegistrationFormComponent} from './registration-form/registration-form.component';
import {AdminFormComponent} from './admin-form/admin-form.component';


const appRoutes: Routes = [
    {path: 'registration', component: RegistrationFormComponent},
    {path: 'admin', component: AdminFormComponent},
    {path: '', redirectTo: '/admin', pathMatch: 'full'}
    //{path: '*', redirectTo: '/registration', pathMatch: 'full'}
];

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

}

server.js

app.use('/', express.static(path.join(__dirname, '/dist')));
app.get('/registration', api);
app.get('/admin', api);
app.use('/', api);

router.js

router.get('/registration', function(req, res){
    //res.send('hello world');
   console.log('registration');
});

我也有一个router.js类。在我的角度应用程序中运行正常。但是,当使用带有角度的快递时,我不应该如何处理前端路由。如果需要通过路由器完成。 js不确定我应该在其中指定哪条路径。

我收到错误:

  

错误:无法获取网页名称

1 个答案:

答案 0 :(得分:2)

设置静态路径

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

然后

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

你需要在服务器端为路由应用程序进行路由