Angular 2.0.1路由器EmptyError:顺序没有元素

前端之家收集整理的这篇文章主要介绍了Angular 2.0.1路由器EmptyError:顺序没有元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法使Angular 2路由工作.我正在使用Angular 2和Webpack.在Angular 2 webpack启动器中,我注意到他们有webpack生成他们的html和他们的链接,但我希望我不必webpack我的html文件.

这是我的app.routes.ts ……

  1. import { ModuleWithProviders } from '@angular/core';
  2. import { Routes,RouterModule } from '@angular/router';
  3.  
  4. import { HomeComponent } from "./home/home.component";
  5. import { ScheduleComponent } from "./schedule/schedule.component";
  6. import { PageNotFoundComponent } from "./PageNotFoundComponent";
  7.  
  8. const appRoutes: Routes = [
  9. { path: '',component: HomeComponent },{ path: 'schedule',component: ScheduleComponent },{ path: '**',component: PageNotFoundComponent }
  10. ];
  11.  
  12. export const appRoutingProviders: any[] = [
  13.  
  14. ];
  15.  
  16. export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是我的@NgModule代码……

  1. @NgModule({
  2. imports: [
  3. BrowserModule,HttpModule,FormsModule,routing ],declarations: [
  4. AppComponent,AppBanner,AppLogin,HomeComponent,ScheduleComponent,PageNotFoundComponent
  5. ],bootstrap: [ AppComponent ],providers: [
  6. ApplicationState,appRoutingProviders
  7. ]
  8. })
  9. export class AppModule { }

这是计划组件……

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. template: `
  5. <div>Schedule</div>
  6. `
  7. })
  8. export class ScheduleComponent {
  9.  
  10. }

这是我的HTML,我试图添加我的路线…

  1. <a [routerLink]=" ['/schedule'] ">Schedule</a>

我知道这是很多代码,但这里也是我的webpack构建.如您所见,webpack任务不会触及我的HTML页面,因此这个webpack代码可能无关紧要……

  1. module.exports = {
  2. entry: {
  3. 'polyfills': __dirname + '/src/polyfills.ts','vendor': __dirname + '/src/vendor.ts','app': __dirname + '/src/main.ts'
  4. },output: {
  5. filename: '[name].bundle.js',path: __dirname + '/src/bundle/',publicPath: '/',sourceMapFilename: __dirname + '/src/bundle/[name].bundle.map.js'
  6. },resolve: {
  7. extensions: ['','.ts','.js'],alias: { 'rxjs': 'rxjs-es' }
  8. },module: {
  9. loaders: [
  10. {
  11. test: /\.js$/,loader: 'babel-loader',query: {
  12. presets: ['es2015']
  13. }
  14. },{
  15. test: /\.ts$/,loaders: ['awesome-typescript-loader']
  16. },{
  17. test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")
  18. },{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,loader: "file?name=/fonts/[name].[ext]" },{ test: /\.(woff|woff2)$/,loader:"url?prefix=font/&limit=5000&name=/fonts/[name].[ext]" },{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,loader: "url?limit=10000&mimetype=application/octet-stream&name=/fonts/[name].[ext]" },{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: "url?limit=10000&mimetype=image/svg+xml&name=/fonts/[name].[ext]" }
  19. ]
  20. },plugins: [
  21. new ExtractTextPlugin('css/[name].css')
  22. ]
  23. }

不幸的是,当我点击Schedule链接时,我只是收到一个错误.这是来自区域的详细错误信息……

  1. Unhandled Promise rejection: no elements in sequence ; Zone: angular ;
  2. Task: Promise.then ; Value: Error: no elements in sequence(…)
  3. EmptyError: no elements in sequence

有小费吗?这里有什么问题?

添加pathMatch:’full’
  1. { path: '',component: HomeComponent,pathMatch: 'full' },

否则两条路线

  1. { path: '',

匹配路线/时间表,因为”匹配,但不消耗路线中的任何东西,然后’安排’匹配.

猜你在找的Angularjs相关文章