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路由

回答

相關問題