Uncaught Error: Can't resolve all parameters for AppComponent: (?)

Question

When adding the formbuilder in the constructor. I've been getting the error. I've added the ReactiveFormsModule in the app.module already.

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

Sample app.module.ts

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

Here is the error:

https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters — Radonirina Maminiaina, Apr 11 '18 at 11:05
How about removing the `constructor(private fb: FormBuilder) {}` and put the `FormBuilder` into another method? — Radonirina Maminiaina, Apr 11 '18 at 11:08
template and styles tag are not the issue. I've been using require because my template is a pug and my style is a scss file. — user8956707, Apr 11 '18 at 11:20
could you please add more info about your local versions? If this is a cli project, use ng -v — Jota.Toledo, Apr 11 '18 at 11:24

score 4 · Accepted Answer · answered Apr 14 '18 at 19:08

4

Added emitDecoratorMetadata: true to tsconfig.json file

answered Apr 14 '18 at 19:08

user8956707

113
8

ForestG · Answer 2 · 2018-04-13T08:55:41.510

This works for me in a Stackblitz example.

Some comments though:

Why do you require the pug file as a template? If you are using pug (and pug-watch), the html file should be there as well.
why do you require the css? Just use simply styleUrls: [ './app.component.css' ] .
Are you sure your node, npm and angular version is up to date and compatible?

Edit: If removing the 'require' parts helps, try this:

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

There is no native pug support in angular yet, so you should rely on other tools to translate your page to a html file. In the @Component decorator you should try to stick to the official angular documentation. Personally, I use Gulp js for starting my dev app and a pug watcher at the same time. Here is my 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']);

(in the package.json I have an entry:"ngbuild": "ng build --aot --progress=false" )

I've been using angular-fullstack-generator. I don't know if it's their issue — user8956707, Apr 11 '18 at 11:23
You can see FormsModule in the example project only couse they import it by default. [Angular fullstack generator](https://github.com/angular-fullstack/generator-angular-fullstack) is an AngularJS tool? — ForestG, Apr 11 '18 at 13:10
It is a generator for creating files and folders for angular, node and mongodb — user8956707, Apr 12 '18 at 07:06
does it build without error, if you remove the `require` parts? — ForestG, Apr 12 '18 at 07:10
Yup. If you are adding scss and pug file require parts are needed — user8956707, Apr 13 '18 at 07:49
updated my answer. Please consider removing the require parts and use other methods instead. — ForestG, Apr 13 '18 at 08:56
I've edited your Stackblitz example. If you dont mind, please check the code — user8956707, Apr 14 '18 at 18:47
already fixed it. i've added `emitDecoratorMetadata: true` in my tsconfig — user8956707, Apr 14 '18 at 19:07

Uncaught Error: Can't resolve all parameters for AppComponent: (?)

2 Answers2