web-dev-qa-db-ja.com

angular 2でローカルに構築されたアプリケーションを実行Chromeノードサーバーなしでangle-cliを使用

Angular 2質問を非常に正確にします。

1。使っています：

Angular 2、angular-cli：1.0.0-beta.15、（webpack building）ノード：6.4.0、os：linux x64

2。私が達成したいこと：

ビルド後にプロジェクトをビルドしたい（ng build project-name）私のAngular 2アプリケーションの静的ファイルを取得する、chromeから直接実行できますng serveまたはノードサーバーを使用せずに。 index.htmlをクリックして、アプリをローカルで実行します。

3。一方、生成されたindex.htmlをダブルクリックすると、chromeブラウザーコンソール出力に表示されます：

file：///inline.jsリソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUND file：///styles.b52d2076048963e7cbfd.bundle.jsリソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUND file：///main.c45bb457f14bdc0f5b96.bundle.jsリソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUND file：///favicon.icoリソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUND

  1. 私が理解しているように、これはパスに関連しています。ビルドおよびバンドルされたアプリケーションは正しいパスを見つけることができません。だから私の質問はwhereとhow私はパスを変更する必要があります私のパスアプリまたは任意のビルド構成ファイルで、アプリがポイント番号2で説明した方法で動作するように動作させる

  2. 他のトピックではその主題の完全な範囲を説明していないため、そのトピックに関する直接かつ完全な回答を事前にありがとうございます。

javascriptangularwebpackember-cliangular-cli
25
BartB

最初のステップ：

コマンドを実行する

ng build

または

ng build -prod (then it will compact all files for production version)

2番目のステップ：

Index.htmlの変更

<base href="/"> to <base href="./">

番目のステップ：

すべてのファイルをサーバーに配置します（localhostまたは任意のサーバーのhtdocsの場合があります）

うまくいけばうまくいくでしょう。

25
sabuz

サーバーなしのソリューション：

最初のステップ：

index.htmlの変更：

<base href="/">を削除

2番目のステップ：

app.module.tsの変更：

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

@NgModule({
   providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]
})

番目のステップ：

コマンドを実行する

ng build

または

ng build -prod

dist/index.htmlをダブルクリックして結果を確認します。

22
Jakša Bašić

Angular-Cliを使用している場合、プロジェクトをビルドした後にindex.htmlを修正する必要はありません。 Angular-CLi github document https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml に従って、プロジェクトのビルド中に引数を簡単に変更できます。

    Example: ng build --prod --base-href .

実際の使用法は次のとおりです。

ng build --base-href <base>

baseの代わりに特定のURLを単に導入できます。この例では、を使用します。 （ドット）引数として

10
Nelly Sattari

簡単なソリューション：ビルド時にベースhrefを変更します。

ng build --prod --base-href .

これで、index.htmlファイルとそれは動作します。

この動作の例を次に示します。 https://mattspaulding.github.io/angular-material-starter/

9
Matt

/distフォルダーはHTTPサーバーを使用します。ファイルをローカルに読み込むとセキュリティ上の理由からコードを実行できないため、これを回避することはできません。

サーバーは、Expressのような重いものである必要はなく、HapiJSのような高度な機能を備えたミニマリストである必要さえありません。ビルトインNode http-serverは問題なく動作します。すでにApache、nginx、またはIISを設定している場合は、これらを使用して、アプリを提供します。

編集：私はいくつかの道徳的な検索を行い、個人的には使用しないソリューションを提供することを決めましたが、あなたにぴったりかもしれません： Web Server for Chrome Extension =

4
gelliott181

必要なのは、次の1行のコードを使用してアプリをビルドすることだけです。

ng build --prod --base-href ./
2
Nikolay_R

<base href="/">からindex.htmlを削除するとうまくいきました。

1
achola

私はExpressjsを使用することをお勧めします、なぜサーバーはxampp、laragonなど...ルートがうまく機能しないのか、私はそれをしました：ネームサーバーで新しいフォルダーを作成し、内部にコピーされたファイルindex.js、ルート"src/assets/server/index.js"になります。

Index.jsコンテンツ

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/../../';

app.set('port', (process.env.PORT || 80));

app.use(express.static(staticRoot));

app.use(function(req, res, next){
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }
    fs.createReadStream(staticRoot + 'index.html').pipe(res);

});
app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Package.jsonで、プロジェクトのルート内

{
    "dependencies": {
        "express": "4.13.4"
    }
}

後で、コンソールコマンドng build prodで実行し、実行します

node dist/assets/server /

このコマンドは、エクスプレスサーバーを実行し、サーバーのファイル構成の方向を示します。この場合、ファイルindex.js preconfigured

p.s：英語が下手でごめんなさい、私は学んでいます

1
Wilder Perozo

たとえば、nw.js（またはelectron）を使用して、このようなことを実現できます。 angular 2を使用するアプリを自分で作成しました。これは魅力のように動作します;）

nwjs.io

0
kristóf baján