redirectTo未定义index.js 20：angular2路由

几天后我才开始学习Angular2。我一步一步跟踪文档以及一些YouTube教程。redirectTo未定义index.js 20：angular2路由

目前我在配置路由时遇到了问题。我正在使用Visual Studio代码进行开发。以下是文件内容。

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 
import { HeroFormComponent } from './heroComponent/hero-form.component'; 

import {Routes, RouterModule} from '@angular/router'; 
import {ModuleWithProviders} from '@angular/core'; 
import {ContactusComponent} from './contactUs/contactus.component'; 
import {AboutusComponent} from './AboutUs/aboutus.component'; 

export const router:Routes [ 
    { path: '', redirectTo: '/', pathMatch: 'full'}, 
    { path:'contact', component:'ContactusComponent'}, 
    { path:'about', component:'AboutusComponent'} 
]; 


@NgModule({ 
    imports:  [ BrowserModule , FormsModule,RouterModule.forRoot(router)], 
    declarations: [ AppComponent , HeroFormComponent, ContactusComponent,AboutusComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

在上述文件Visual Studio代码是否显示在红色[，：等，误差是"[ts] is expected"

的index.html

<html> 
    <head> 
    <base href="/"> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
     href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <base href="/"> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

这是我的一些其他疑问

（1）我看到一些Youtube和其他教程包含<script src="route.dev.js">，但为什么角度文档没有包括它。而且在node_modules里面的文件夹结构中没有文件夹名称angular2，它是@ angular.Like这里有很多其他的库，比如RxJx，它们已经包含在教程中，但是角文件没有。我因此而感到困惑。 是否因为angular2的发布版本不同而不同。（2）何时为routerLink包含方括号（数组），因为在文档示例中它们没有包含它。

如果您需要其他文件内容（如tsconfig.json或systemjs.config.js），请告诉我。

主要问题是我的应用程序本身没有在控制台上加载抛出错误“redirectTo is not defined index.js 20”。

我忘了包含任何文件吗？

任何帮助表示赞赏！

谢谢！

来源

2016-11-15 shreyansh

如果我是你，我应该把一个=在你的路由定义并消除周围的元件值引号：

export const router:Routes = [ //<-- here 
    { path: '', redirectTo: '/', pathMatch: 'full'}, 
    { path:'contact', component: ContactusComponent}, 
    { path:'about', component: AboutusComponent} 
];

但我猜你有。另一个问题是，您从''重定向到'/'。那有什么意思？你想在那里做什么？更好的办法是有路径''使用组件像HomeComponent和具有全球重定向到''：

export const router:Routes = [ 
    { path: '', component: HomeComponent}, 
    { path:'contact', component: ContactusComponent}, 
    { path:'about', component: AboutusComponent}, 
    {path: '**', redirectTo: '', pathMatch: 'full'} 
];

额外

1）由于angular2是在早期的alpha状态取得“公”，并且由于从alpha版本到最终版本发生了很多突破性变化，因此您在网上找到的很多教程和视频都已过时。最好的方法是查看它发布的日期，或者只是查看angular.io网站。经验法则可以看他们是否在他们的例子中使用NgModule。如果是这样，你偶然发现一个相对较新的教程

2）从不（再）。如上所述，这是旧的做法。现在一切都已移到模块中，并且您只需在模块中导入RouterModule即可使用组件中的所有路由器功能

来源

2016-11-15 13:56:33 PierreDuc

非常感谢。你可以请评论我提出的其他疑问 – shreyansh

@shreyansh更新了我的答案 – PierreDuc

非常感谢你:-) – shreyansh

redirectTo未定义index.js 20：angular2路由

回答

相关问题