web-dev-qa-db-ja.com

Angular 2 Httpサーバーに展開するとルーティングが機能しない

単純なAngular 2アプリケーションを開発します。 Angular CLIを使用してルーティングを伴うプロジェクトを作成し、「ng generate component」コマンドを使用していくつかのコンポーネントをアプリに追加しました。次に、app-routing.module.tsでルーティングを次のように指定しました。

import {NgModule} from '@ angular/core'; 
 import {Routes、RouterModule} from '@ angular/router'; 
 import {HomeComponent} from './home/home.component' ; 
 import {AboutComponent} from './about/about.component';
import {UserComponent} from' ./user/user.component';
import {ErrorComponent} from './error/error.component';
import {SpecialpageComponent} from' ./specialpage/specialpage.component';

const routes：Routes = 
 {
パス： ''、
コンポーネント：HomeComponent 
}、
 {
パス： 'about'、
コンポーネント：AboutComponent 
}、
 {
パス： 'user'、
コンポーネント：UserComponent 
}、
 {
パス： 'specialpage'、
コンポーネント：SpecialpageComponent 
}、
 {
パス： '**'、
コンポーネント：ErrorComponent 
} 
 
; 
 
 @ NgModule（{
 imports：[RouterModule.forRoot（r out））]、
 exports：[RouterModule]、
 provider：[] 
}）
 export class AppRoutingModule {}

app.module.tsは次のとおりです。

 import {BrowserModule}から '@ angular/platform-b​​rowser'; 
 import {NgModule} from '@ angular/core'; 
 import {FormsModule} from '@ angular/forms '; 
 import {HttpModule} from' @ angular/http '; 
 import {AppRoutingModule} from' ./app-routing.module';

 import {AppComponent} from './app.component';
import {HomeComponent} from' ./home/home.component';
import {AboutComponent} from './about/about。 component '; 
 import {ErrorComponent} from' ./error/error.component';
import {UserComponent} from './user/user.component';
import { SpecialpageComponent} from './specialpage/specialpage.component';

@NgModule({
宣言：
 AppComponent、
 HomeComponent、
 AboutComponent、
 ErrorComponent、
 UserComponent、
 SpecialpageComponent 
、
 imports：
 BrowserModule、
 FormsModule、
 HttpModu le、
 AppRoutingModule 
、
プロバイダー：[]、
ブートストラップ：[AppComponent] 
}）
 exportクラスAppModule {}

他のコンポーネントには変更を加えていません。次に、「ng serve」コマンドを使用してアプリケーションをデプロイしました。アプリはリンクで正常に動作します。例： http：// localhost：4200/about

enter image description here

しかし、プロジェクトをhttpサーバーにデプロイすると、リンクが期待どおりに機能しません。 「http-server ./dist」コマンドを使用してアプリをデプロイしましたが、アプリは正常にデプロイされますが、リンクは機能しません。 「 http：// localhost：4200/about 」に移動すると、404エラーが発生します。

enter image description here

私は何か間違っていますか？ 「ng-serve」が機能し、「http-server」が機能しないのはなぜですか？

任意の助けをいただければ幸いです。前もって感謝します。

プロジェクトを github にアップロードしました。

angularnpmangular2-routingangular-cliangular2-template
34
kinath_ru

この問題は、すべてのルートに#を追加するHashLocationStrategyを実装することで解決します。これを実現するには、HashLocationStrategy to AppModule providersを追加します。

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

対応するインポートを追加します

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

これで問題が解決します。

HashLocationStrategyを使用したくない場合は、PahtLocationStrategyを使用できます。したがって、AngularアプリはURLにハッシュを表示しません。詳細については、公式リンクを確認してください： https://angular.io/api/common/PathLocationStrategy

25
Manu

これは、http-serverがlite-serverやweb pack-devサーバーのようなfallbackをサポートしていないためです。これが、404 not foundを示す理由です。この問題を解決するには、2つのソリューションと2つのソリューションがあります。

  1. 上記のようにHashLocationStrategyを使用できます。
  2. ApacheまたはIISサーバーにデプロイする場合は、前述のように構成を追加できます here ！

注：開発には、lite-serverを使用できます。

これがあなたのお役に立てば幸いです。

13
Ashish Sharma

内部にまったく存在しないページaboutを見つけるために発生するため、404です。可能なオプション：

  1. Http-serverを使用する場合は、すべてを http：// localhost：your-port にリダイレクトするプロキシを使用します。

    オプション：-Pまたは--proxyは、指定されたURLにローカルで解決できないすべてのリクエストをプロキシします。例：-P http://someurl.com

  2. エクスプレスをまったく使用しないでください。 Expressを使用して独自のhttpサーバーを作成し、すべてをindex.htmlにリダイレクトします

    パブリックは、すべての変換されたものを保持するフォルダーであると想定しています。

    var express = require('express');
var app = express();

var path = __dirname + '/public';
var port = 8080;

app.use(express.static(path));
app.get('*', function(req, res) {
    res.sendFile(path + '/index.html');
});
app.listen(port);
6
Parth Ghiya

AppModule Providersにこれを追加することで、この問題を解決しました。

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}]

およびインポート

import { PathLocationStrategy, LocationStrategy } from '@angular/common';

次に、.htaccessを作成しました。

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

URLに＃がなくてもすべてうまくいきます:)

6
Maciej Socha

この方法で解決されます。

ケース-1：Angular 5.1未満のバージョンの場合

1）以下のようにHashLocationStrategyを使用します。AppModuleで以下を実行します。

1.1）import { HashLocationStrategy, LocationStrategy } from '@angular/common';

1.2）providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

ケース-2：Angular 5.1以上のバージョンの場合

2.1）Angularはこのプロパティを導入しましたonSameUrlNavigationサーバーの更新の問題を克服します。

2.2）onSameUrlNavigationをimports arrayのRouterModule.forRootに追加します。

a）アプリケーションのメインルーティングモジュール、つまりapp.routing.module.ts/app.routing.tsでプロパティを追加します

下記参照：

@ngModule({

    imports: 
    [
       RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})
    ],

    exports: [RouterModule],
 });

それが誰かを助けることを願っています。

4
ArunDhwaj IIITH

私のように、コードをまったく変更したくない場合は、代わりにこれを使用してください：

https://www.npmjs.com/package/angular-http-server

1
Sharpiro

Apacheサーバーの場合：

本番サーバーで

プロジェクトルートに「.htaccess」ファイルを追加または作成し、次のように.htaccessファイルに書き換えルールを追加します。

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]
  # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
1
Tanvir Sarker

この特定の問題に直面している正確な理由は、サーバーの設定が原因です。

そのため、アプリケーションを実装するときに、特定の手順を実行する必要があります。必須の手順の1つは、パスの特定のセグメントにマークを付けることです。 http：// domain-name/main wheremainパス設定であることは、サーバー設定で識別子として使用する必要がありますserver.jsまたはapp .jsノードバックエンドまたはIISおよびTomcatのwebconfigファイルの場合展開。

特定のセグメントにマークを付ける理由は、サーバーがその特定のセグメントと追加のリクエストを受信すると、angularルーターが起動するようにwwwまたはパブリックフォルダーのアプリケーションに再ルーティングするためです。

このプロセスはurl rewritingとして知られています。したがって、アプリケーションサイズに応じてWebサーバーまたはアプリケーションサーバーが制御できない場合は、hashLocationStratergyを使用してください。そうでない場合は、常に使用できますpathLocationStartergyは、履歴の追跡やその他の美的およびパフォーマンス上の利点に関して有用です。

詳細については、次のリンクをご覧ください。

IISの場合： https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7 =

0
abhay

アプリが初期化するポイントからビルドでURLを指定してみてください：

Ng build --prod --base-href="http://your.url.com/subdirectory/etc"
0
bardat

ベースhref文字列にドットを追加します。

正しい

<base href="./home">

違う

<base href="/home">

http://www.wisdomofjim.com/blog/solved-problems-with-resource-loading-failures-when-deploying-angular-2-webapps-live

0
Akrime

Apacheサーバーの場合

  • ファイル名を作成します.htaccess
  • そのファイルを編集し、index.htmlの代わりにindex.phpを書き込みます

  • コードを持っていない人は、.htaccessファイルに以下のコードを書くことができます：RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

  • このコードはSSL証明書では機能しない可能性があります-ホスティングプロバイダーにお問い合わせくださいOR訪問 https://httpd.Apache.org/docs/current/howto/htaccess.html を参照してくださいdocs。

0
Smit Patel

https://angular.io/guide/deployment のドキュメントに従って（Apache、nginxも検索できます）.htaccessファイルを使用して、サーバーがindex.htmlを指すようにする必要があります。

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html

RewriteRule ^ /index.html

0
Shiva Sheshendra