Angular4 + AoTと共通コードを持つ2つのプロジェクトで重複宣言エラーが発生する

Question

私は2つのメインプロジェクトに分割されたAngular4プロジェクトを持っています。つまり、ほとんどのエンドユーザーがヒットしたメインアプリケーションと管理アプリケーション特権ユーザーがヒットしたこれらのアプリはどちらも共通のコードを共有しています。ここでは、一般的なフォルダ構造です：私はプロジェクトをパッケージ化するwebpack2を使用してい

-src 
    -app 
    -common (contains several subfolders for utilities, pipes, models, etc.) 
    -main (contains the main angular4 app with associated module, route, and lazy loaded component files) 
    -management (contains the management angular4 app with associated module, route, and lazy loaded component files) 

、すべてはJITコンパイルを持つ偉大な仕事をしているが、今、私はIBMアカデミーを有効にしようとしているが、私は重複するため、エラーを取得しています宣言：

Error: Type OrderByPipe in W:/MyApp/src/app/common/pipes/orderBy.ts is part of the declarations of 2 modules: 
SharedModule in W:/MyApp/src/app/main/shared.module.ts and SharedModule in W:/MyApp/src/app/management/shared.module.ts! 
Please consider moving OrderByPipe in W:/MyApp/src/app/common/pipes/orderBy.ts to a higher module that imports SharedModule in W:/MyApp/src/app/main/shared.module.ts and SharedModule in W:/MyApp/src/app/management/shared.module.ts. 
You can also create a new NgModule that exports and includes OrderByPipe in W:/MyApp/src/app/common/pipes/orderBy.ts then import that NgModule in SharedModule in W:/MyApp/src/app/main/shared.module.ts and SharedModule in W:/MyApp/src/app/management/shared.module.ts 

この場合、OrderByPipeは共通のフォルダに定義されています。これらの2つのプロジェクトは共通の共通コードを指しており、それらの間には接続はありません。私は別のプロジェクトのファイルを見ることから（私が仮定した）プロジェクトを防ぐためにwebpackの設定に除外がありますが、それは私が期待するように動作していないように見えますか？私は、プロセスが、私ははっきりとそれがWebPACKのコンフィグからのフォルダの除外しています管理アプリを検討している理由として損失によ

var webpack = require('webpack'); 
var ngToolsWebpack = require('@ngtools/webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 
require('es6-promise').polyfill(); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: { 
     MyAppApp: './src/app/main/main.ts', 
     polyfills: './src/app/main/polyfills.ts', 
     vendor: './src/app/main/vendor.ts' 
    }, 
    resolve: { 
     extensions: ['.ts', '.js'] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/host')], 
       use: [{ loader: '@ngtools/webpack' }, { loader: 'angular-router-loader' }] 
      }, 
      { test: /\.html$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/host')], 
       use: [{ loader: 'html-loader' }] 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/host')], 
       use: [{ loader: 'file-loader?name=images/[name].[ext]' }] 
      }, 
      { 
       test: /myapp-main-core\.scss$/, 
       include: helpers.root('src', 'app/css'), 
       use: ExtractTextPlugin.extract({ use: [{ loader: "css-loader?sourceMap" }, { loader: "sass-loader?sourceMap" }] }) 
      }, 
      { 
       test: /\.scss$/, 
       exclude: [helpers.root('src', 'app/management'), helpers.root('src', 'app/host'), helpers.root('src', 'app/css')], 
       use: ['to-string-loader'].concat(ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader?sourceMap', 'sass-loader?sourceMapp'] })) 
      } 
     ] 
    }, 

    output: { 
     path: helpers.root('app'), 
     publicPath: 'https://localhost:8080/app/', 
     filename: 'js/[name].js?[hash]-' + process.env.buildNumber, 
     chunkFilename: 'js/MyAppApp-[id].chunk.js?[hash]-' + process.env.buildNumber 
    }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['MyAppApp', 'vendor', 'polyfills'] 
     }), 
     new HtmlWebpackPlugin({ 
      template: 'src/app/main/index.html' 
     }), 
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
     new ExtractTextPlugin('./css/myapp-main-core.css'), 
     new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/, 
      helpers.root('doesnotexist') 
     ), 
     new ngToolsWebpack.AotPlugin({ 
      tsConfigPath: './tsconfig.json', 
      entryModule: './src/app/main/app.module#AppModule' 
     }) 
    ] 
}; 

：ここでの主なプロジェクトのための私のWebPACKの設定です。私は明らかな何かが欠けていると確信していますが、手掛かりはありません。

ご協力いただければ幸いです！

UPDATE 2017年7月17日： 私は新しいtsconfig.jsonファイル（tsconfig.main.aot.json）を作成し、その内の管理ディレクトリの除外を追加し、そのファイルへのWebPACKの設定を指摘しましたAoTPluginの設定で、それは私が見ていた重複宣言のエラーを過ぎているようだが、今はextract-text-webpack-pluginに問題があるので、AoT用に設定されている方法に何か問題があると思う。私は2つのdiffereにcomponentにpipeである可能性があり1本を追加したとき

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin 

Answer 1

は、私はこのエラーを取得しますこれは2つの異なるプロジェクトである可能性があります。私が常にやることは、新しい*.module.tsファイルを作成し、そのコンポーネントをインポートすることです。新しいモジュールを必要な場所にインポートします。

@NgModule({ 
 
    imports: [CommonModule], 
 
    declarations: [ 
 
    YouComponent 
 
    ], 
 
    exports: [ 
 
    YouComponent 
 
    ], 
 
    providers: [] 
 
}) 
 

 
export class commonsModule {}