数日前、私はAngular2を学び始めました。私はドキュメントをステップバイステップで実行し、いくつかのyoutubeチュートリアルも実行しました。
現在、ルートの構成で問題が発生しています。開発にはビジュアルスタジオコードを使用しています。以下はファイルの内容です。
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 { }
上記のファイルでは、ビジュアルスタジオコードは[、：などに赤い色を示しています。エラーは "[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">が、Angularドキュメントに含まれていないのはなぜですか。また、node_modules内のフォルダー構造には、フォルダー名angular2はなく、@ angularです。このように、チュートリアルに含まれているRxJxのような他の多くのライブラリがありますが、angularドキュメントには含まれていません。そのせいで戸惑っています。それはangular2のリリースバージョンが異なるためですか。
（2）ドキュメントの例では角かっこ（配列）が含まれていないため、routerLinkに角かっこ（配列）を含める場合。
tsconfig.jsonやsystemjs.config.jsなどの他のファイルコンテンツが必要な場合はお知らせください。
主な問題は、アプリケーション自体がコンソールにスローエラーをロードしていないことです "redirectTo is not defined index.js20"。
ファイルを含めるのを忘れましたか？
どんな助けでも大歓迎です!!!
ありがとう!!!
私があなただった場合=は、ルート定義にを配置し、コンポーネント値の前後の引用符を削除する必要があります。
export const router:Routes = [ //<-- here
{ path: '', redirectTo: '/', pathMatch: 'full'},
{ path:'contact', component: ContactusComponent},
{ path:'about', component: AboutusComponent}
];
しかし、私はあなたがそれを持っていると思います。もう1つの問題は、から''にリダイレクトすること'/'です。それは一体何の意味ですか？そこで何をしようとしていますか？パスに次の''ようなコンポーネントを使用HomeComponentさせ、''次の場所へのグローバルリダイレクトを設定することをお勧めします。
export const router:Routes = [
{ path: '', component: HomeComponent},
{ path:'contact', component: ContactusComponent},
{ path:'about', component: AboutusComponent},
{path: '**', redirectTo: '', pathMatch: 'full'}
];
追加
1）angular2は初期のアルファステータスで「公開」されており、アルファから最終リリースまで多くの重大な変更があったため、オンラインで見つけたチュートリアルやビデオの多くは古くなっています。投稿された日付を確認するか、angular.ioサイトを確認するのが最善です。経験則NgModuleとして、例で使用されているかどうかを確認することができます。その場合は、比較的新しいチュートリアルに出くわしました
2）決して（もう）。上記のように、これはそれを行うための古い方法でした。これですべてがモジュールに移動さRouterModuleれました。コンポーネントですべてのルーター機能を使用できるようにするには、モジュールにをインポートするだけで済みます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加