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 にアップロードしました。

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)onSameUrlNavigationimports arrayRouterModule.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