Question

尝试在浏览器中加载localhost：3000 / verifyemail时，收到错误：

错误：无法匹配任何路线

我已经阅读了其他有关此问题的SO问题，并验证了以下内容：

Angular2：2.3.1默认使用路径位置策略，我没有改变它。我不想使用哈希定位策略

我已经为HTML5 pushState配置了我的Nodejs服务器（server.js在下面）

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

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

// Get API routes
const api = require('./src/server/routes/api.js');

// Set api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});

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

const server = http.createServer(app);
server.listen(port, () => console.log(`API running on localhost:${port}`));

我的<base href="/">位于我的index.html

<head>

我设置了默认路径和catch-all路径

const appRoutes: Routes = [
  { path: 'home',
    outlet: 'full-page',
    component: DefaultLandingPageComponent
  },

  { path: 'verifyemail',
    outlet: 'full-page',
    component: EmailVerificationComponent
  },

  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  { path: '**',
    outlet: 'full-page',
    component: DefaultLandingPageComponent
  }
 ];

我已将路由器模块导入app.module.ts，并在app.component.html文件中包含路由器插座

//in app.module.ts:
@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot(appRoutes)
  ]
  ...
  });

//in app.component.html
import { RouterModule, Routes } from '@angular/router';

非常感谢能够帮助我的人！

更新1 我已经从路线和路由器插座中删除了所有名称，这要归功于GünterZöchbauer在下面评论中的观察

更新2 一切都在localhost上运行：4200 / verifyemail，通过ng serve运行。使用通过node server.js

运行的localhost：3000 / verifyemail时问题仍然存在

Answer 1

每条路线都需要一条路线，将一个组件添加到一个未命名的插座。指定的出口只能用于未命名的插座，而不能代替。

Angular 2路由器：无法匹配任何路由

1 个答案: