未捕获的错误：无法解析 AppComponent 的所有参数：（？）

Posted 2023-03-13

【中文标题】未捕获的错误：无法解析 AppComponent 的所有参数：（？）

【英文标题】：Uncaught Error: Can't resolve all parameters for AppComponent: (?)

【发布时间】：2018-09-21 05:17:24

【问题描述】：

在构造函数中添加表单生成器时。我一直在收到错误。我已经在 app.module 中添加了 ReactiveFormsModule。

import  Component  from '@angular/core';
import  FormBuilder, FormGroup, Validators, FormControl  from '@angular/forms';
@Component(
    selector: 'app',
    template: require('./app.component.pug'),
    styles: [require('./app.component.scss')]
)
export class AppComponent 
    private loginForm: FormGroup;
    constructor(private fb: FormBuilder) 

示例 app.module.ts

import  ReactiveFormsModule  from '@angular/forms';
@NgModule(
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
)

这是错误：

【问题讨论】：

您是否尝试过导入 FormsModule？

尝试从模板和样式标签中删除需求

***.com/questions/37997824/…

如何删除constructor(private fb: FormBuilder) 并将FormBuilder 放入另一个方法中？

模板和样式标签不是问题。我一直在使用 require，因为我的模板是 pug，而我的样式是 scss 文件。

【参考方案1】：

在 tsconfig.json 文件中添加了emitDecoratorMetadata: true

【参考方案2】：

这在Stackblitz example 中对我有用。

虽然有一些 cmets：

为什么需要 pug 文件作为模板？如果您使用 pug（和 pug-watch），html 文件也应该在那里。 为什么需要css？只需简单地使用styleUrls: [ './app.component.css' ]。 您确定您的节点、npm 和 Angular 版本是最新且兼容的吗？

编辑： 如果删除 'require' 部分有帮助，试试这个：

@Component(
    selector: 'app',
    template: './app.component.html',
    styles: ['./app.component.scss']
)

Angular 中还没有原生 pug 支持，因此您应该依靠其他工具将您的页面转换为 html 文件。在 @Component 装饰器中，您应该尽量遵守官方的 angular 文档。 就个人而言，我使用Gulp js 同时启动我的开发应用程序和哈巴狗观察者。 这是我的 gulpfile：

const gulp = require('gulp');
const clean = require('gulp-clean');
const pug = require('gulp-pug');
const git = require('gulp-git');
const file = require('gulp-file');
const spawn = require('child_process').spawn;
const shell = require('gulp-shell');
const install = require('gulp-install');
const notify = require('gulp-notify');

// *********
// BUILD APP
// *********
gulp.task('npm-install', function () 
  gulp.src(['./package.json'])
    .pipe(install());
);
gulp.task('clean-dist', ['npm-install'], function () 
  return gulp.src('./dist', read: false)
    .pipe(clean())
);
gulp.task('pug-build', function buildHTML() 
  return gulp.src('./src/**/*.pug')
    .pipe(pug(doctype: 'html', pretty: false))
    .on('error', notify.onError(function (error) 
      return 'An error occurred while compiling pug.\nLook in the console for details.\n' + error;
    ))
    .pipe(gulp.dest('./src'))
);
gulp.task('ng-build', ['clean-dist', 'pug-build'], function (cb) 
  spawn('npm', ['run', 'ngbuild'], stdio: 'inherit') 
);
gulp.task('build', ['ng-build'], function () 
);


// ****************
// DEVELOPMENT MODE
// ****************
gulp.task('pug-watch', ['pug-build'], function (cb) 
  gulp.watch('./src/**/*.pug', ['pug-build'])
);
gulp.task('ng-serve', function (cb) 
  spawn('ng', ['serve'], stdio: 'inherit');
);
gulp.task('dev-start', ['pug-watch', 'ng-serve']);

（在 package.json 我有一个条目："ngbuild": "ng build --aot --progress=false"）

【讨论】：

不使用 FormsModule 为什么还要导入它？

我一直在使用 angular-fullstack-generator。不知道是不是他们的问题

您只能在示例项目中看到 FormsModule，因为它们默认导入它。 Angular fullstack generator 是 AngularJS 工具？

它是一个为angular、node和mongodb创建文件和文件夹的生成器

如果您删除 require 部分，它的构建是否正确？