Неперехваченная ошибка: не удается разрешить все параметры для appcomponent: (?)

При добавлении формбилдера в конструктор. Я получаю сообщение об ошибке. Я уже добавил ReactiveFormsModule в app.module.

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]
})

Вот ошибка:

enter image description here

Вы пробовали импортировать FormsModule?

Mohib Wasay 11.04.2018 12:56

Попробуйте удалить требование из тега шаблона и стилей

Arash 11.04.2018 13:04

Как насчет того, чтобы удалить constructor(private fb: FormBuilder) {} и поместить FormBuilder в другой метод?

Radonirina Maminiaina 11.04.2018 13:08

шаблон и тег стилей не являются проблемой. Я использую require, потому что мой шаблон - это мопс, а мой стиль - это файл scss.

user8956707 11.04.2018 13:20

не могли бы вы добавить больше информации о ваших локальных версиях? Если это проект cli, используйте ng -v

Jota.Toledo 11.04.2018 13:24
4
6
1 764
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У меня это работает в Пример Stackblitz.

Некоторые комментарии:

  • Почему вам нужен файл мопса в качестве шаблона? Если вы используете pug (и pug-watch), файл html тоже должен быть там.
  • зачем вам CSS? Просто используйте просто styleUrls: [ './app.component.css' ].
  • Вы уверены, что ваша версия node, npm и angular обновлена ​​и совместима?

Редактировать: Если удаление требуемых частей помогает, попробуйте следующее:

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

В angular пока нет встроенной поддержки мопсов, поэтому вам следует полагаться на другие инструменты для перевода своей страницы в файл html. В декораторе @Component вы должны стараться придерживаться официальной документации угловатый. Лично я использую 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, если не используете его?

user8956707 11.04.2018 13:22

Я использую angular-fullstack-generator. Я не знаю, это их проблема

user8956707 11.04.2018 13:23

Вы можете увидеть FormsModule в примере проекта только потому, что они импортируют его по умолчанию. Угловой генератор полного стека - это инструмент AngularJS?

ForestG 11.04.2018 15:10

Это генератор для создания файлов и папок для angular, node и mongodb.

user8956707 12.04.2018 09:06

он строится без ошибок, если вы удалите части require?

ForestG 12.04.2018 09:10

Ага. Если вы добавляете scss и файл pug, требуются детали

user8956707 13.04.2018 09:49

обновил свой ответ. Пожалуйста, подумайте об удалении требуемых частей и используйте другие методы.

ForestG 13.04.2018 10:56

Опять же, проблема не в этом.

user8956707 14.04.2018 20:41

Я отредактировал ваш пример Stackblitz. Если не возражаете, проверьте код

user8956707 14.04.2018 20:47

уже исправил. я добавил emitDecoratorMetadata: true в свой tsconfig

user8956707 14.04.2018 21:07
Ответ принят как подходящий

Добавлен emitDecoratorMetadata: true в файл tsconfig.json

Другие вопросы по теме