使用 webpack 时 Angular 不解析构造函数依赖项答案

【问题标题】：Angular not resolving constructor dependencies when using webpack使用 webpack 时 Angular 不解析构造函数依赖项
【发布时间】：2018-08-30 20:04:30
【问题描述】：

我已经使用 webpack 4 成功加载了一个带有示例组件的 Angular 应用程序，但是当我在构造函数中传递依赖项时，我得到了以下错误。最初我传递了 ActivateRoute 参数，我认为这个错误是特定于这个特定依赖项的，但后来我尝试使用我自己创建的示例服务也失败了

错误

网页包配置

module.exports = {
    mode: 'development',
    entry: {
        'main.microfrontendhost.bundle': ['main.ts', "./somestyle.css"]
    },
    optimization: {
        splitChunks: {

               cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    output: {
        publicPath: '/dist/',
        filename: '[id].js',
        chunkFilename: "[name].js",
        path: path.resolve(__dirname, 'dist'),

    },
    module: {
        rules: [{
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'exports-loader?module.exports.toString()',
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                loader: 'babel-loader',
            },
            {
                // This plugin will allow us to use html templates when we get to the angularJS app
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader',
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            }
        ]
    },
    node: {
        fs: 'empty'
    },
    resolve: {
        modules: [
            __dirname,
            'node_modules',
        ],
        extensions: [".ts", ".tsx", ".js"]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HashOutput({
            validateOutput: false,
        }),
        new MiniCssExtractPlugin({
            filename: 'microfrontend.bundle.css',
            chunkFilename: '[name].css'
        })
    ],
    devtool: 'source-map',
    externals: [],
    devServer: {
        historyApiFallback: true
    }
};

组件

import { Component, OnInit,Injector } from "@angular/core";
import { MicroFrontEndHostService } from "./microfrontendhost.service";
@Component({
  selector: "microfrontend-host",
  template: `
    <div class="app2class" style="margin-top: 100px;">
      Angular 
    </div>

  `
})
export class MicroFrontEndHostComponent implements OnInit {
  constructor(
    //services failing here
    private microFrontEndHostService:MicroFrontEndHostService
  ) {

  }
  ngOnInit(): void {

  }
}

服务

import { Injectable } from "@angular/core";

@Injectable()
export class MicroFrontEndHostService {
  constructor() {}

}

AppModule

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      [
        {
          path: "",
          redirectTo: "Portal",
          pathMatch: "full",
        },
        {
          path: "Portal",
          component: MicroFrontEndHostComponent,
          data: { applicationId: "0002bc92-240b-4f6a-9c26-1b8ba57c964c" }
        }
      ],
      { enableTracing: true, useHash: true } // <-- debugging purposes only
    )
  ],
  providers: [MicroFrontEndHostService],
  schemas: [],
  exports:[],
  declarations: [HostComponent, MicroFrontEndHostComponent],
  bootstrap: [HostComponent]
})
export default class HostModule {}

谁能帮我解决这个问题？？

【问题讨论】：

标签： angular webpack angular6 webpack-4

【解决方案1】：

我的问题是 Typescript 没有解析装饰器。为了解决这个问题，我在 tsconfig.json 文件中设置了 emitDecoratorMetadata=true