We Keep Coding

Compiler fails - ERROR in No NgModule metadata found for 'AppModule'

Compile fails with this error. I have looked through all the posts with similar titles and not found anything helpful yet. Angular 7. I was trying to update some dependencies to resolve prod vulnerabilities, the change list for this was moving angular-devkit/build-angular to dev dependencies, removing abandoned and unused packages, adding ngx-toastr 10, upgrading jasmine-core from 3.3 to 3.8.
I have deleted, cleared cache, and reinstalled all node packages and then tried specifically doing that to angular/cli (7.1.1) and webpack (4.12.0). Edited+saved a random ts file. Added app/app.module.ts specifically to tsconfig.app.json's files param and include param. Added strictMetadataEmit:false to tsconfig.json and tsconfig.app.json compilerOptions (unknown compiler param error).
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "./src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"types": [
"jasmine"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"#app/*": [ "app/*" ],
"#env/*": [ "environments/*" ]
}
},
"include": [
"src/**/*"
]
}
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
"include": [
"./**/*"
]
}
package.json
{
"name": "pds.ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"inc-ram": "set NODE_OPTIONS=--max-old-space-size=12000",
"build-prod": "npm run-script inc-ram && ng build --prod --source-map false --aot"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.1.3",
"#angular/common": "^7.1.3",
"#angular/compiler": "^7.1.3",
"#angular/core": "^7.1.3",
"#angular/forms": "^7.1.3",
"#angular/http": "^7.1.3",
"#angular/platform-browser": "^7.1.3",
"#angular/platform-browser-dynamic": "^7.1.3",
"#angular/router": "^7.1.3",
"#progress/kendo-angular-buttons": "^4.1.1",
"#progress/kendo-angular-dateinputs": "^3.5.2",
"#progress/kendo-angular-dialog": "^3.1.2",
"#progress/kendo-angular-dropdowns": "^3.0.2",
"#progress/kendo-angular-excel-export": "^2.1.0",
"#progress/kendo-angular-grid": "^3.5.0",
"#progress/kendo-angular-inputs": "^3.1.3",
"#progress/kendo-angular-intl": "^1.3.1",
"#progress/kendo-angular-l10n": "^1.1.0",
"#progress/kendo-angular-layout": "^3.1.1",
"#progress/kendo-angular-pdf-export": "^1.0.4",
"#progress/kendo-angular-upload": "^4.1.2",
"#progress/kendo-data-query": "^1.2.0",
"#progress/kendo-drawing": "^1.5.5",
"#progress/kendo-theme-bootstrap": "^2.13.4",
"#progress/kendo-theme-default": "^2.53.1",
"angular-calendar": "^0.27.15",
"angular2-draggable": "^2.1.1",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"date-fns": "^1.30.1",
"font-awesome": "^4.7.0",
"guid-typescript": "^1.0.9",
"jasmine-tfs-reporter": "^1.0.2",
"json2typescript": "1.0.6",
"moment": "^2.20.1",
"ngx-bootstrap": "^3.0.0",
"ngx-permissions": "^6.0.1",
"ngx-quill": "^5.2.0",
"ngx-toastr": "^10.1.0",
"node-sass": "^4.7.2",
"npm": "^6.4.1",
"quill": "^1.3.7",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"ts-helpers": "^1.1.2",
"typescript": "3.2.4",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.11.4",
"#angular-devkit/build-optimizer": "^0.11.3",
"#angular/cli": "^7.1.1",
"#angular/compiler-cli": "^7.1.3",
"#types/applicationinsights-js": "1.0.9",
"#types/jasmine": "3.3.1",
"#types/node": "^10.3.2",
"codelyzer": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "~3.1.3",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.1.0",
"protractor": "^5.4.1",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"webpack": "^4.12.0"
},
"engines": {
"node": ">= 8.6.0",
"npm": ">= 5.4.2"
}
}
app.module.ts
// Angular
import { NgModule, OnInit, APP_INITIALIZER } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule, Title } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { Injector } from '#angular/core';
// Kendo & 3rd Party
import { InputsModule } from '#progress/kendo-angular-inputs';
import { ModalModule } from 'ngx-bootstrap';
import { UploadModule } from '#progress/kendo-angular-upload';
import { CoreModule, ConfigService } from '#app/core';
import { SharedModule } from '#app/shared';
// App
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { HeaderComponent } from './header/header.component';
import { AdminModule } from './admin/admin.module';
import { MasterProjectModule } from './master-project/master-project.module';
import { ContractModule } from './contract/contract.module';
import { FAQComponent } from './shared/faq/faq.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { AngularDraggableModule } from 'angular2-draggable';
// Services
import { RepositoryService } from '#app/shared/repository.service';
import { ServiceLocator } from '#app/shared/service-locator';
import { EmailService } from '#app/shared/email.service';
import { CanDeactivateGuardService } from '#app/shared/candeactivate-guard.service';
import { NavigationEnd, Router, ActivatedRoute } from '#angular/router';
import { MasterProjectRoutingModule } from '#app/master-project/master-project-routing.module';
import { ContractRoutingModule } from '#app/contract/contract-routing.module';
import { DashboardRoutingModule } from '#app/dashboard/dashboard-routing.module';
import { DialogModule } from '#progress/kendo-angular-dialog';
import { NgxPermissionsModule } from 'ngx-permissions';
import { NgxPermissionsService } from 'ngx-permissions';
import { Role } from '#app/core/role';
import { NgxRolesService } from 'ngx-permissions';
import { HttpClientModule, HttpClient } from '#angular/common/http';
import { AcknowledgementsComponent } from './shared/acknowledgements/acknowledgements';
import { ToastrModule } from 'ngx-toastr';
import { ProgressBarComponent } from './shared/ProgressBar/ProgressBar';
import { LoadingBarService } from './shared/LoadingBarService/LoadingBarService';
export function initConfig(config: ConfigService): Function {
return () => config.getAll();
}
#NgModule({
imports: [
FormsModule,
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
DashboardModule,
AngularDraggableModule,
DashboardRoutingModule,
AdminModule,
MasterProjectRoutingModule,
MasterProjectModule,
ContractRoutingModule,
ContractModule,
InputsModule,
DialogModule,
UploadModule,
ToastrModule.forRoot(),
NgxPermissionsModule.forRoot(),
// App Core & Shared
CoreModule,
SharedModule,
ModalModule.forRoot()
],
exports: [SharedModule],
declarations: [
AppComponent,
ProgressBarComponent,
HeaderComponent,
FAQComponent,
AcknowledgementsComponent
],
providers: [
Title,
LoadingBarService,
EmailService,
CanDeactivateGuardService,
RepositoryService,
ServiceLocator,
ConfigService,
NgxRolesService,
NgxPermissionsService,
{
provide: APP_INITIALIZER,
useFactory: (http: HttpClient, configService: ConfigService, rs: NgxRolesService, ps: NgxPermissionsService ) => function() {
return configService.getAll().then((config) => {
return http.get(`${config.BaseApiURL}GetMyRoles`,
{ withCredentials: true }).do((roles: any) => {
for (const role of roles.value as Array<Role>) {
rs.addRole(role.Name, role.Permissions);
ps.addPermission(role.Permissions);
}
}).toPromise()
});
},
deps: [HttpClient, ConfigService, NgxRolesService, NgxPermissionsService],
multi: true
}
],
bootstrap: [
AppComponent]
})
export class AppModule implements OnInit {
constructor(
readonly router: Router,
readonly activatedRoute: ActivatedRoute,
readonly titleService: Title,
readonly loadingBarService: LoadingBarService,
private injector: Injector) { // Create global Service Injector.
ServiceLocator.injector = this.injector;
}
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from '#app/app.module';
import { environment } from '#env/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

I reverted to a previous commit and re-applied the updates while ensuring it still built between each update. Didn't see the error again.

Angular Material UI errors after upgrading from 11 to 12

I'm trying to update my angular application from angular 11 to 12 with angular-material and getting some errors,
Error No.1
- error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mat-select'.
1. If 'mat-select' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
2697 <mat-select placeholder="Vorgesetzter" style="width: 60%; margin-bottom:10px" [(ngModel)]="vorgesetzter">
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.2
```- error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2 <mat-toolbar role="toolbar" class="task-header mt_toolbar">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.3
- error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2691 <mat-icon style="color: black;">close</mat-icon>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error No.4
- error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2230 <mat-form-field class="mb-1" style="width: 100%;height: 60px;">
Error No.5
- Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: #2813e4 is not a map.
╷
43 │ default: map.get($base-palette, $default),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/#angular/material/core/theming/_theming.scss 43:14 define-palette()
node_modules/#angular/material/core/theming/_theming-deprecated.scss 16:11 palette()
src/assets/styles/scss/_material.variables.scss 7:11 #import
src/assets/styles/app.scss 1:9 root stylesheet
at processResult (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/webpack/lib/NormalModule.js:701:19)
at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.callback (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/sass-loader/dist/index.js:54:7)
at Worker.<anonymous> (/Users/muzafarali/Sites/angular/a11-erbium/Frontend/node_modules/#angular-devkit/build-angular/src/sass/sass-service.js:134:25)
at Worker.emit (events.js:314:20)
at MessagePort.<anonymous> (internal/worker.js:201:53)
at MessagePort.emit (events.js:314:20)
at MessagePort.onmessage (internal/worker/io.js:80:8)
at MessagePort.exports.emitMessage (internal/per_context/messageport.js:11:10)
Here is my package.json
{
"name": "project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"now-build": "ng build --prod --output-path dist",
"prod-aot": "ng build --prod --aot --build-optimizer --common-chunk",
"prod": "ng build --prod --aot false --build-optimizer false",
"postinstall": "ngcc"
},
"engines": {
"node": "12.x"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular/animations": "^12.0.5",
"#angular/cdk": "^12.0.5",
"#angular/cdk-experimental": "^12.0.5",
"#angular/common": "12.0.5",
"#angular/compiler": "12.0.5",
"#angular/core": "^12.0.5",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "12.0.5",
"#angular/http": "^7.2.16",
"#angular/localize": "^12.0.5",
"#angular/material": "^12.0.5",
"#angular/material-experimental": "^12.0.5",
"#angular/material-moment-adapter": "^12.0.5",
"#angular/platform-browser": "12.0.5",
"#angular/platform-browser-dynamic": "12.0.5",
"#angular/router": "12.0.5",
"#asymmetrik/ngx-leaflet": "^8.1.0",
"#ngx-loading-bar/core": "^5.1.2",
"#ngx-loading-bar/router": "^5.1.2",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#shtian/ng-pick-datetime": "^11.0.0",
"#swimlane/ngx-datatable": "^19.0.0",
"#techiediaries/ngx-qrcode": "^9.1.0",
"#types/googlemaps": "^3.43.3",
"angular-calendar": "^0.28.26",
"angular-highcharts": "^12.0.0",
"angular2-image-upload": "^1.0.0-rc.2",
"angular2-signaturepad": "^3.0.4",
"chart.js": "^2.8.0",
"core-js": "3.2.1",
"d3": "5.12.0",
"date-fns": "1.30.1",
"dayjs": "^1.10.5",
"dragula": "3.7.2",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"highcharts": "^7.2.1",
"intl": "1.2.5",
"leaflet": "1.5.1",
"moment": "^2.29.1",
"ng-material-multilevel-menu": "^5.5.3",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.4.2",
"ng2-dragula": "2.1.1",
"ng2-file-upload": "1.3.0",
"ng2-validation": "4.2.0",
"ngx-currency": "^2.5.2",
"ngx-daterangepicker-material-dayjs": "^4.0.7",
"ngx-device-detector": "^1.3.20",
"ngx-logger": "^4.2.2",
"ngx-perfect-scrollbar": "8.0.0",
"ngx-quill": "^13.4.0",
"ngx-socket-io": "^3.3.1",
"ngx-toastr": "^12.0.5",
"quill": "1.3.7",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"sass": "^1.35.1",
"screenfull": "5.0.0",
"tslib": "^2.3.0",
"util": "^0.12.4",
"zone.js": "^0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.5",
"#angular/cli": "~12.0.5",
"#angular/compiler-cli": "~12.0.5",
"#angular/language-service": "~12.0.5",
"#types/chartist": "0.9.46",
"#types/jasmine": "^3.6.11",
"#types/jasminewd2": "^2.0.9",
"#types/node": "^12.20.15",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.6.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "^4.2.4"
},
"resolutions": {
"moment": "2.29.1"
}
}
and tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/erbium",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": false,
"noImplicitAny": false,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"strictPropertyInitialization": false,
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false
}
}
i have import all material modules inside app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { RouterModule } from '#angular/router';
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
// import { HttpModule, Http } from '#angular/common/http';
import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '#angular/common/http';
import { DeviceDetectorModule } from 'ngx-device-detector';
import { MatPaginatorModule } from '#angular/material/paginator';
// import Toaster module for ui
import { CommonModule } from '#angular/common';
import { ToastrModule } from 'ngx-toastr';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import {MatCheckboxModule} from '#angular/material/checkbox'
import {MatIconModule} from '#angular/material/icon'
import {MatCardModule, MatCardContent} from '#angular/material/card'
import {MatButtonToggleModule} from '#angular/material/button-toggle'
import {MatListModule} from '#angular/material/list'
import {MatGridListModule} from '#angular/material/grid-list'
import {MatMenuModule} from '#angular/material/menu'
import {MatSidenavModule} from '#angular/material/sidenav'
import {MatToolbarModule} from '#angular/material/toolbar'
import {MatSelectModule} from '#angular/material/select'
import {MatOptionModule, MatNativeDateModule} from '#angular/material/core'
import {MatProgressBarModule} from '#angular/material/progress-bar'
import {MatSlideToggleModule} from '#angular/material/slide-toggle'
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatDialog, MatDialogRef, MatDialogConfig } from '#angular/material/dialog';
import { MatInputModule } from '#angular/material/input';
import { MatButtonModule } from '#angular/material/button';
import { MatRadioModule } from '#angular/material/radio';
import { MatTableModule } from '#angular/material/table'
import { MatTab, MatTabsModule } from '#angular/material/tabs'
import {MatDatepickerModule} from '#angular/material/datepicker';
import {MatTooltipModule} from '#angular/material/tooltip';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
// import { MaterialModule } from '#angular/material';
import { FlexLayoutModule } from '#angular/flex-layout';
import { NGXLogger, LoggerModule, NgxLoggerLevel } from "ngx-logger";
import { AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
// Common Module
import { SharedModule } from './shared/shared.module';
import { Config } from './config/config';
import { LocalStorage } from './libs/localstorage';
import { AuthGuard } from './authentication/auth-guard.service';
import { SearchPipe } from './search.pipe';
import { LoaderModule } from './loader/loader.module';
import { LoaderService } from './loader/loader.service';
import { LoaderInterceptorService } from './services/interceptor.service';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
// const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
// suppressScrollX: true
// };
#NgModule({
declarations: [
AppComponent,
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
SharedModule,
MatPaginatorModule,
ReactiveFormsModule,
RouterModule.forRoot(AppRoutes, {
useHash: true, anchorScrolling: 'enabled',
scrollPositionRestoration: 'top',
relativeLinkResolution: 'legacy'
}),
HttpClientModule,
PerfectScrollbarModule,
FormsModule,
DeviceDetectorModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
LoggerModule.forRoot({ serverLoggingUrl: '/v1/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR }),
// MaterialModule,
FlexLayoutModule,
LoaderModule,
ToastrModule.forRoot(),
MatButtonModule,
MatIconModule,
MatCardModule,
MatInputModule,
MatButtonToggleModule,
MatListModule,
MatGridListModule,
MatMenuModule,
MatSidenavModule,
MatProgressBarModule,
MatTabsModule,
MatOptionModule,
MatSelectModule,
MatToolbarModule,
MatTooltipModule
],
providers: [
LocalStorage,
Config,
AuthGuard,
SharedService,
LoaderService,
RequestService,
{
provide: HTTP_INTERCEPTORS,
useClass: LoaderInterceptorService,
multi: true
},
],
exports: [
MatToolbarModule,
MatInputModule,
MatFormFieldModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
entryComponents: [],
bootstrap: [AppComponent]
})
export class AppModule { }
anything else required to sort out please reply

rebuild package.json and yarn.lock
generate new angular project and copy the package.json and yarn.lock into your existing projects. It works for me
I referred below link to fix my error
https://github.com/angular/angular-cli/issues/20967

How to fix 'Can't resolve all parameters for ComponentName'

I am trying to run ng serve command for my angular project. It works, it builds but when I want to access to localhost:4200 (my local host angular access) the screen is blank and console says:
Uncaught Error: Can't resolve all parameters for
CreateContractComponent: (?, ?, ?).
Everything worked before I re-checkout project as a new project to my computer. When I deploy app it perfectly works (For example heroku)
I spent 1 day googling and trying something from the different topics, but still bad. If you need/want more files, let me know.
shortly component code:
import { Component, OnInit } from '#angular/core';
import { ContractService } from '../offer-page/contract.service';
import { ActivatedRoute, Router } from '#angular/router';
#Component({
selector: 'app-create-contract',
templateUrl: './create-contract.component.html',
styleUrls: ['./create-contract.component.css']
})
export class CreateContractComponent implements OnInit {
constructor(private contractService: ContractService, private route: ActivatedRoute,private router: Router) {
}
}
contractService shortly
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Contract } from './object-model/contract';
#Injectable()
export class ContractService {
constructor(
private http: HttpClient
) { }
}
What I need is just to run ng serve command and be able to work in dev mode. Now it is possible only with deployment (to heroku).
EDIT for request files:
this is my package.json file
{
"name": "name-of-the-project",
"version": "0.0.0",
"engines": {
"node": "8.9.x",
"npm": "5.5.x"
},
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"deploy": "git push heroku master",
"postinstall": "ng build --aot -prod"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/cli": "^1.6.3",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/compiler-cli": "^5.1.3",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#angular/http": "7.2.15",
"core-js": "^2.4.1",
"express": "^4.16.2",
"express-basic-auth": "1.2.0",
"nouislider": "^11.1.0",
"rxjs": "^5.5.2",
"tslib": "^1.9.0",
"typescript": "~2.4.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.800.0",
"#angular/cli": "^1.6.3",
"#angular/compiler-cli": "^5.1.3",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.4",
"#types/node": "~6.0.60",
"codelyzer": "^5.0.1",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
and this is my app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { HttpModule } from '#angular/http';
import { Routes, RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ProductsComponent } from './client-page/products/products.component';
import { ClientService } from './client-page/client-offers/client.service';
import { ContractService } from './offer-page/contract.service';
import { FooterComponent } from './footer/footer.component';
import { ClientPageComponent } from './client-page/client-page.component';
import { FirstScreenComponent } from './offer-page/first-screen/first-screen.component';
import { BonusesComponent } from './offer-page/first-screen/bonuses/bonuses.component';
import { DebitCardsComponent } from './offer-page/first-screen/debit-cards/debit-cards.component';
import { ServicesComponent } from './offer-page/first-screen/services/services.component';
import { OfferPageComponent } from './offer-page/offer-page.component';
import { ClientOffersComponent } from './client-page/client-offers/client-offers.component';
import { ProductsService } from './offer-page/first-screen/products.service';
import { ClientPageService } from './client-page/client-page.service';
import { OfferService } from './offer-page/offer.service';
import { RefreshPageService } from './offer-page/first-screen/refresh-page.service';
import { CreateContractComponent } from './create-contract/create-contract.component';
import { AcceptancePageComponent } from './acceptance-page/acceptance-page.component';
import { AttributesComponent } from './offer-page/first-screen/attributes/attributes.component';
import { PricesComponent } from './offer-page/first-screen/prices/prices.component';
import { NamePriceComponent } from './offer-page/first-screen/name-price/name-price.component';
const appRoutes: Routes = [
{ path: '', component: ClientPageComponent },
{ path: 'createContract/:userId/:offerId', component: CreateContractComponent },
{ path: 'offerPage/:contractId', component: OfferPageComponent },
{ path: 'contractCreated/:contractId', component: AcceptancePageComponent }
];
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
ProductsComponent,
FooterComponent,
ClientPageComponent,
FirstScreenComponent,
BonusesComponent,
DebitCardsComponent,
ServicesComponent,
OfferPageComponent,
ClientOffersComponent,
CreateContractComponent,
AcceptancePageComponent,
AttributesComponent,
PricesComponent,
NamePriceComponent
],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
providers: [ ClientService, ContractService,
ProductsService, ClientPageService, OfferService,
RefreshPageService],
bootstrap: [AppComponent]
})
export class AppModule { }

Well after check a lot of commits I found the problem. I miss this line in this file
src/polyfills.ts
import 'core-js/es7/reflect';
Description why it is needed:
Evergreen browsers require these. Used for reflect-metadata in JIT.
But don`t know, what does it do but it works!

Angular 4 material project is not compiling

I am new to the angular. I have made the set up for angular project.First time when i fired the ng serve --open command , it opened the url and was working fine. After that i have installed angular material .Now if i run the application it is taking me the new browser tab. But showing compilation error. Could someone please help me to sort out the exact issue. I was trying this past 3 hours. please help.
npm install --save #angular/material #angular/cdk
npm install --save #angular/animations
npm install --save hammerjs
npm install --save #angular/flex-layout#latest
my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from '#angular/material';
import { FlexLayoutModule } from '#angular/flex-layout';
import { AppComponent } from './app.component';
import 'hammerjs';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
my package.json
{
"name": "con-fusion",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.4.3",
"#angular/cdk": "^2.0.0-beta.11",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/flex-layout": "^2.0.0-beta.9",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/material": "^2.0.0-beta.11",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.3",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
My app.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<md-toolbar color="primary"> <span>Ristorante Con Fusion</span> </md-toolbar>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
My style.scss
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
body {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
}

See Getting Started With Angular Material 2
(September 4, 2017)
Custom Material Module
Prior to Angular Material 2 Beta 3, there was a global MaterialModule
that could be imported in the app module to make the components
available. The downside to that is that tree-shaking is not efficient
enough to remove all the unused code.
MaterialModule has therefore been deprecated in favor of defining a
project-specific custom material module where you import and export
only the needed components. Here’s what our module can look like:
Unfortunately the official guide is a not as explicit as the above article. You need to go through each component you use and import the module for for it, then add it to the imports section of AppModule.
Looks like you are just using Toolbar, so the only module you need is MdToolbarModule.
import { MdToolbarModule } from '#angular/material';
#NgModule({
imports: [
...
MdToolbarModule,
],
Essentially, as the article above explains, you 'roll-your-own' MaterialModule. The main purpose seems to be avoiding deploying of unused material components in your app.

Actually, MaterialModule is not importable anymore, you need to import the only module that you want, you can see this info here:
CHANGELOG.md#breaking-changes
So, if you want material, import only the component module that you want, you can see the components list here:
https://material.angular.io/components
as for example, if I want material input, you go to API tab see what you want to import:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatMenuModule} from '#angular/material';
import { FlexLayoutModule } from '#angular/flex-layout';
import { AppComponent } from './app.component';
import 'hammerjs';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatMenuModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And this is the official plunker example:
http://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview
Anyway, I don't see where you are using the material component in your HTML, so not sure which one you want to use.

Angular2: Web Speech API - Voice recognition

After reading the documentation of webkitSpeechRecognition (voice recognition in Javascript) I tried to implement it in Angular 2.
But when I did this:
const recognition = new webkitSpeechRecognition();
TypeScript say this error:
[ts] Cannot find name 'webkitSpeechRecognition'. any
And if I try to extract webkitSpeechRecognition from window:
if ('webkitSpeechRecognition' in window) {
console.log("Enters inside the condition"); // => It's printing
const { webkitSpeechRecognition } = window; // => TypeScript Error
const recognition = new webkitSpeechRecognition();
}
If I comment the last two lines the console.log is printed, enters to the condition! webkitSpeechRecognition exists inside window!! But if not comment the last two lines the TypeScript error now is this:
[ts] Type 'Window' has no property 'webkitSpeechRecognition' and no string index signature.
const webkitSpeechRecognition: any
How can I create a new recognition in Angular 2? Has anybody tried it?

Finally I solved creating an interface!!
export interface IWindow extends Window {
webkitSpeechRecognition: any;
}
And:
const {webkitSpeechRecognition} : IWindow = <IWindow>window;
const recognition = new webkitSpeechRecognition();

In Angular 9, it worked me but using const speechRecognition = window['webkitSpeechRecognition'];
note that the window 'w' is lowercase.

home.component.html
<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div id="chart" (click)="voice()">ChartData</div>
<div id="table">TableData</div>
<input type="text" placeholder="Speak out"/>
<p>RxCompoent.message: {{message}}</p>
<p><input type="text" value="{{message}}"></p>
<button
[disabled]="service.started$ | async"
(click)="listen()"
>listen</button>
<p>lang: ja</p>
<p>grammars: none</p>
home.component.ts
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import Speech from 'speak-tts';
import { RxSpeechRecognitionService, resultList, } from '#kamiazya/ngx-speech-recognition';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [ RxSpeechRecognitionService ]
})
export class HomeComponent implements OnInit {
data:any;
nestedjson:any;
message = '';
constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {
}
ngOnInit() {
// this.voicex();
}
listen() {
this.service
.listen()
.pipe(resultList)
.subscribe((list: SpeechRecognitionResultList) => {
this.message = list.item(0).item(0).transcript;
console.log('RxComponent:onresult', this.message, list);
});
}
voice(){
this.voicex();
}
voicex(){
const ut = new SpeechSynthesisUtterance('Speak out');
speechSynthesis.speak(ut);
}
onChangeEvent(ev) {
console.log(ev.target.value); // should print option1
}
}
app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsermanagementComponent } from './usermanagement/usermanagement.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoginComponent } from './login/login.component';
import {HttpModule} from '#angular/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { ChartModule,HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as exporting from 'highcharts/modules/exporting.src';
import * as exportdata from 'highcharts/modules/export-data.src';
import {SpeechRecognitionModule} from '#kamiazya/ngx-speech-recognition';
#NgModule({
declarations: [
AppComponent,
UsermanagementComponent,
HomeComponent,
HeaderComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
ChartModule,
SpeechRecognitionModule.withConfig({ lang: 'en-US', interimResults: true, maxAlternatives: 10, })
],
providers: [{provide:HIGHCHARTS_MODULES,useFactory:() =>[exporting,exportdata]}],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json
{
"name": "sampleproject",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.8",
"#angular/common": "~8.2.8",
"#angular/compiler": "~8.2.8",
"#angular/core": "~8.2.8",
"#angular/forms": "~8.2.8",
"#angular/http": "^7.2.15",
"#angular/platform-browser": "~8.2.8",
"#angular/platform-browser-dynamic": "~8.2.8",
"#angular/router": "~8.2.8",
"#kamiazya/ngx-speech-recognition": "^0.4.3",
"angular-highcharts": "^8.0.3",
"highcharts": "^7.2.0",
"jquery": "^3.4.1",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.3",
"speak-tts": "^2.0.8",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.6",
"#angular/cli": "~8.3.6",
"#angular/compiler-cli": "~8.2.8",
"#angular/language-service": "~8.2.8",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

You can solve the problem by
const speechRecognition = Window['webkitSpeechRecognition'];
Or if You are using jQuery
const sr = $(window).get(0).webkitSpeechRecognition;