Dependency injection 角度5中的Outlook加载项:Can';t解析组件的所有参数
我正在使用Angular 5创建Outlook加载项。我使用Yeoman生成文件,而不是angular cli。我有一个我编写的服务,MeetingsService,我正试图将它注入到我的一个组件BehaviorSearchComponent中。我在AppModule中将我的服务列为提供者,并将其导入BehaviorSearchComponent。当我运行外接程序时,我得到了错误信息Dependency injection 角度5中的Outlook加载项:Can';t解析组件的所有参数,dependency-injection,angular5,outlook-addin,Dependency Injection,Angular5,Outlook Addin,我正在使用Angular 5创建Outlook加载项。我使用Yeoman生成文件,而不是angular cli。我有一个我编写的服务,MeetingsService,我正试图将它注入到我的一个组件BehaviorSearchComponent中。我在AppModule中将我的服务列为提供者,并将其导入BehaviorSearchComponent。当我运行外接程序时,我得到了错误信息 Can't resolve all parameters for BehaviorsSearchComponen
Can't resolve all parameters for BehaviorsSearchComponent: (?)
如果我这样做,它会起作用
constructor (@Inject(MeetingsService) meetingsService: MeetingsService)
但我希望不用@Inject就可以做到这一点。我还尝试在我的taskpane.ts文件中导入core js/es7/reflect,它是我的根文件。我检查了我的webpack.config,为我的条目polyfill指定了babel/polyfill。我不认为这是一个循环依赖的问题;我安装了该软件包,但在构建过程中没有收到任何警告
有什么我遗漏的吗?我的package.lock.json中的依赖项是否存在问题?我的@angular软件包是5.2.11或5.2.5
应用程序模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { MeetingsService } from './meetings.service';
import AppComponent from './app.component';
import { BehaviorsSearchComponent } from './behaviors-search/behaviors-search.component';
import { EnableAddInComponent } from './enable-addIn/enable-addIn.component';
@NgModule({
imports: [
BrowserModule,
...
],
providers: [
MeetingsService
],
declarations: [
AppComponent,
BehaviorsSearchComponent,
EnableAddInComponent
],
bootstrap: [AppComponent]
})
export default class AppModule { }
import { Injectable } from '@angular/core';
@Injectable()
export class MeetingsService {
constructor() {}
}
import { Component } from '@angular/core';
import { MeetingsService } from '../meetings.service';
...
@Component({
templateUrl: 'src/taskpane/app/behaviors-search/behaviors-search.component.html',
styleUrls: ['src/taskpane/app/shared.css']
})
export class BehaviorsSearchComponent {
constructor(private meetingsService: MeetingsService) {}
...
}
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
taskpane: "./src/taskpane/taskpane.ts",
commands: "./src/commands/commands.ts"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"]
}),
new CopyWebpackPlugin([
{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
}
]),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"]
})
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
return config;
};
会议.服务.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { MeetingsService } from './meetings.service';
import AppComponent from './app.component';
import { BehaviorsSearchComponent } from './behaviors-search/behaviors-search.component';
import { EnableAddInComponent } from './enable-addIn/enable-addIn.component';
@NgModule({
imports: [
BrowserModule,
...
],
providers: [
MeetingsService
],
declarations: [
AppComponent,
BehaviorsSearchComponent,
EnableAddInComponent
],
bootstrap: [AppComponent]
})
export default class AppModule { }
import { Injectable } from '@angular/core';
@Injectable()
export class MeetingsService {
constructor() {}
}
import { Component } from '@angular/core';
import { MeetingsService } from '../meetings.service';
...
@Component({
templateUrl: 'src/taskpane/app/behaviors-search/behaviors-search.component.html',
styleUrls: ['src/taskpane/app/shared.css']
})
export class BehaviorsSearchComponent {
constructor(private meetingsService: MeetingsService) {}
...
}
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
taskpane: "./src/taskpane/taskpane.ts",
commands: "./src/commands/commands.ts"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"]
}),
new CopyWebpackPlugin([
{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
}
]),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"]
})
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
return config;
};
行为搜索.component.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { MeetingsService } from './meetings.service';
import AppComponent from './app.component';
import { BehaviorsSearchComponent } from './behaviors-search/behaviors-search.component';
import { EnableAddInComponent } from './enable-addIn/enable-addIn.component';
@NgModule({
imports: [
BrowserModule,
...
],
providers: [
MeetingsService
],
declarations: [
AppComponent,
BehaviorsSearchComponent,
EnableAddInComponent
],
bootstrap: [AppComponent]
})
export default class AppModule { }
import { Injectable } from '@angular/core';
@Injectable()
export class MeetingsService {
constructor() {}
}
import { Component } from '@angular/core';
import { MeetingsService } from '../meetings.service';
...
@Component({
templateUrl: 'src/taskpane/app/behaviors-search/behaviors-search.component.html',
styleUrls: ['src/taskpane/app/shared.css']
})
export class BehaviorsSearchComponent {
constructor(private meetingsService: MeetingsService) {}
...
}
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
taskpane: "./src/taskpane/taskpane.ts",
commands: "./src/commands/commands.ts"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"]
}),
new CopyWebpackPlugin([
{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
}
]),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"]
})
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
return config;
};
webpack.config.js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { MeetingsService } from './meetings.service';
import AppComponent from './app.component';
import { BehaviorsSearchComponent } from './behaviors-search/behaviors-search.component';
import { EnableAddInComponent } from './enable-addIn/enable-addIn.component';
@NgModule({
imports: [
BrowserModule,
...
],
providers: [
MeetingsService
],
declarations: [
AppComponent,
BehaviorsSearchComponent,
EnableAddInComponent
],
bootstrap: [AppComponent]
})
export default class AppModule { }
import { Injectable } from '@angular/core';
@Injectable()
export class MeetingsService {
constructor() {}
}
import { Component } from '@angular/core';
import { MeetingsService } from '../meetings.service';
...
@Component({
templateUrl: 'src/taskpane/app/behaviors-search/behaviors-search.component.html',
styleUrls: ['src/taskpane/app/shared.css']
})
export class BehaviorsSearchComponent {
constructor(private meetingsService: MeetingsService) {}
...
}
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
taskpane: "./src/taskpane/taskpane.ts",
commands: "./src/commands/commands.ts"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"]
}),
new CopyWebpackPlugin([
{
to: "taskpane.css",
from: "./src/taskpane/taskpane.css"
}
]),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"]
})
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
return config;
};
作为
构造函数注入(@Inject(MeetingsService)MeetingsService:MeetingsService)
似乎是唯一的方法,因为使用Yeoman(yo office
)生成的项目使用webpack而不是Angular CLI
您找到解决此问题的方法了吗?