ローカルで実行されるすべての角度プロジェクトで共通のリソースを共有するにはどうすればよいですか？

Question

共通/共有リソースを持つ1つのディレクトリから複数のアプリケーションを実行するローカル環境を設定しようとしています。

|AngularApps 
|-App1 
|-App2 
    |---app 
    |---index.html 
    |---tsconfig.json 
    |---tslint.json 
    |---typings.json 
    |---systemjs.config.js 
|-node_modules 
|-package.json 

そして、私はルートにLITE-サーバを使用するが、それゆえ私はsystemjs.config.jsパスを変更した：

paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'App2/app', 

私は（局所的に）、このディレクトリ構造を有します私はApp1ののzone.jsを読み込むとき

は、今私のコンポーネントのほとんどを見つけることができません：

同じトピックを指すオンライントピックは見つかりませんでした。

アイデアは、すべてのリソースを複製しないようにすることです。

Answer 1

systemjs.config.jsでこのような何か：Index.htmlと

<app-root>Loading Client...</app-root> 

で

paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     'angularstuffhere':'angularstuffhere' 
    }, 
packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 

は今appフォルダおよびリファレンスアプリ/ App1の中であなたのapp.moduleを作成/ appとapp/App2/app;コンポーネントを持つか、モジュール自体である可能性があります。これがあなたが必要とするものです。

あなたは二つの異なる無関係のアプリをしたい場合は、（2 systemjs.configは不要）あなたのsystemjs.config.jsに次ないでください：Index.htmlと

<app1-root>Loading Client...</app1-root> 
<app2-root>Loading Client...</app2-root> 

で

paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'App1/app', 
      app2: 'App2/app', 
      'angularstuffhere':'angularstuffhere' 
     }, 
    packages: { 
      app: { 
      main: './main.js', 
      defaultExtension: 'js' 
      }, 
      rxjs: { 
      defaultExtension: 'js' 
      } 
     } 

アップデート：

は、以下にbsconfig.jsonの提供するフォルダを変更してみてください：

"baseDir": "dirofyourapp", 

あなたが問題をコンパイルする必要がありますので、package.jsonに次のように変更：あなたはスクリプトの1セットで異なるアプリケーションに実行することはできません

"scripts": { 
    "build": "tsc -p dirofyourapp/", 
    "build:watch": "tsc -p dirofyourapp/ -w", 
    "build:e2e": "tsc -p e2edirofyourapp/", 

と独自のカスタムスクリプトを作成する必要がありますin package.json

再利用可能なコードが必要な場合は、再利用可能な独立したモジュールを作成し、複雑なメンテナンス可能な開発環境を作成するのではなく、インポートすることでアプリで使用します。

アプリケーションの多くで使用することができ、再利用可能なモジュールを作成する方法の例：

https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts

Answer 2

は、最後にそれが求職者が助けを持っているように、答えを投稿し、取り組んで作られました。

解決策は、すべての角型プロジェクトの共通ライブラリをすべて保持するために空のフォルダ（ホーム）を最初に作成することです。ホームフォルダに

package.jsonを追加し、すべての角度のプロジェクト(an ideal one https://github.com/angular/quickstart/blob/master/package.json)

に使用しようとしているすべての依存関係は、今、あなたはLITE-サーバー（https://github.com/johnpapa/lite-server）の-globalをインストールしていることを確認してください言及し、この

ここでルートにbs-config.jsonを作成します。この方法でローカルホストをスコープします。つまり、実行するプロジェクトを教えてください。

これを取得したら、そのアプリケーションの下で使用したいすべてのアプリケーションの子ディレクトリを使用できます。どのアプリでもパスを変更する必要はありません。

すべてがスムーズに実行されます。複数のプロジェクトの追加

：