I generate a new component and I get this:
Unable to resolve signature of class decorator when called as an expression.
Argument of type 'ClassDecoratorContext<typeof DatatablesMasterComponent>' is not assignable to parameter of type 'string | symbol | undefined'.ts(1238)
This, for the <mat-card> is throwing an error even though MatCardModule is imported along with all the other Material components and CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA is there too.
'mat-card' is not a known element:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
contacts.component.ts(26, 7): Error occurs in the template of component
Then, this:
Can't bind to 'formGroup' since it isn't a known property of 'form'.ngtsc(-998002)
calg-contacts.component.ts(26, 7): Error occurs in the template of component ContactsComponent.
This is my <form> in HTML:
<form id="contactForm" [formGroup]="ContactForm" ngForm #ContactForm (ngSubmit)="submitForm(ContactForm, $event)">
and in my .ts file, I have this:
export class ContactsComponent implements OnInit, AfterContentInit, AfterViewInit {
@ViewChild('ContactForm', { static: false }) ContactForm: NgForm;
this used to be and worked:
@ViewChild('ContactForm', null) ContactForm: NgForm;
but if I fix it with the new {static: false} the HTML breaks and FormGroup can't be found.
If I use NULL, the HTML is fixed but the .ts file throws an error, but even with the error both ways, it compiles fine with zero errors, again, which makes no sense.
Here's my tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noImplicitThis": false,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"module": "es2020",
/// but now THESE are throwing errors... so I remove them
"emitDecoratorMetadata": true,
"experimentalDecorators": false,
///
"moduleResolution": "node",
"allowJs": true,
"importHelpers": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"target": "es2020",
"lib": [
"es2020",
"dom"
],
"typeRoots": [
"node_modules/@types",
"src/types",
"mocha"
],
"paths": {
"@angular/*": [
"./node_modules/@angular/*"
]
}
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"enableIvy": true
}
}
This is a the new error:
Option 'emitDecoratorMetadata' cannot be specified without specifying option 'experimentalDecorators'.ts
Emit design-type metadata for decorated declarations in source files.
See more: https://www.typescriptlang.org/tsconfig#emitDecoratorMetadata
I've read the URL and it's all React.
What is going on? I've deleted node_modules, package-lock.json and did a cache clean, etc.
Here's my Angular, Node and NPM versions
Angular CLI: 14.2.12
Node: 16.14.2
Package Manager: npm 8.5.1
OS: win32 x64
Angular: 14.2.12
... animations, cli, common, compiler, core
... platform-browser-dynamic, platform-server
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.12
@angular-devkit/build-angular 14.2.12
@angular-devkit/core 14.2.12
@angular-devkit/schematics 14.2.12
@angular/cdk 14.2.7
@angular/compiler-cli 14.3.0
@angular/elements 14.3.0
@angular/flex-layout 14.0.0-beta.41
@angular/forms 14.3.0
@angular/language-service 14.3.0
@angular/localize 14.3.0
@angular/material 14.2.7
@angular/platform-browser 14.3.0
@angular/router 14.3.0
@schematics/angular 14.2.12
rxjs 7.5.7
typescript 4.7.4
webpack 5.88.2
