Я успешно загрузил приложение Angular с примером компонента, используя webpack 4, но когда я передаю зависимости в конструкторе, я получаю следующую ошибку. Сначала я передал параметр ActivateRoute , и я подумал, что эта ошибка характерна именно для этой конкретной зависимости, но затем я попытался с образцом службы создать свою собственную, которая также не работает
Error
Web Pack Config
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 {}
Может кто-нибудь помочь мне решить эту проблему?