We Keep Coding

How to Display Modal Popup Form in Angular using NgBootstrap and FormsModule

I will appreciate any support
I am trying to Display Modal Popup Form in Angular using NgBootstrap and FormsModule but the module NgbModule is not imported. I have:
node 16.15.1
cli 15.1.5
core 15.1.5
I go to the app.modules.ts and I add the module NgbModule in Imports but I get several errors
I have installed the packets:
font-awesome --save
bootstrap --save
I add #ng-bootstrap/ng-bootstrap
angular-material --save
One of the Errors:
enter image description here
{"name": "cragcity-website",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"build-prod": "ng build --prod",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "15.1.4",
"#angular/cdk": "15.1.4",
"#angular/common": "15.1.4",
"#angular/compiler": "15.1.4",
"#angular/core": "15.1.4",
"#angular/flex-layout": "12.0.0-beta.34",
"#angular/forms": "15.1.4",
"#angular/material": "15.1.4",
"#angular/platform-browser": "15.1.4",
"#angular/platform-browser-dynamic": "15.1.4",
"#angular/router": "15.1.4",
"#ckeditor/ckeditor5-angular": "^2.0.2",
"#ckeditor/ckeditor5-build-classic": "^31.0.0",
"#ckeditor/ckeditor5-upload": "^31.0.0",
"angularx-social-login": "3.5.7",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.2",
"font-awesome": "^4.7.0",
"jquery": "^3.6.3",
"ng-recaptcha": "^8.0.1",
"ngx-toastr": "14.0.0",
"ngx-treeview": "10.0.2",
"ngx-ui-loader": "13.0.0",
"popper.js": "^1.16.1",
"rxjs": "~6.6.0",
"tslib": "2.2.0",
"zone.js": "0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "15.1.5",
"#angular/cli": "15.1.5",
"#angular/compiler-cli": "15.1.4",
"#types/jasmine": "3.8.1",
"#types/node": "12.11.1",
"jasmine-core": "3.8.0",
"karma": "^6.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"typescript": "4.9.5"
}
}
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { SocialLoginModule, FacebookLoginProvider, GoogleLoginProvider, SocialAuthServiceConfig } from "angularx-social-login";
import { environment } from '../environments/environment';
// components
import { AppComponent } from './app.component';
import { MtlComponent } from './components/mtl/mtl.component';
import { AvatarIconComponent } from './svg-icons/avatar/avatar-icon/avatar-icon.component';
import { HeartIconComponent } from './svg-icons/heart/heart-icon/heart-icon.component';
import { DownloadIconComponent } from './svg-icons/download/download-icon/download-icon.component';
import { ShareIconComponent } from './svg-icons/share/share-icon/share-icon.component';
import { CragcityLogoComponent } from './components/cragcity-logo/cragcity-logo.component';
import { CragcityFooterComponent } from './components/cragcity-footer/cragcity-footer.component';
import { LandingComponent } from './components/mtl/landing/landing.component';
import { SharedModule } from './components/shared/shared.module';
import { SubcategoryComponent } from './components/mtl/subcategory/subcategory.component';
import { RequestInterceptor } from './core/interceptors/request.interceptor';
import { ResponseInterceptor } from './core/interceptors/response.interceptor';
import { ToastrModule } from 'ngx-toastr';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { ngxConfig } from './shared/constants'
import { SubCategoryUserComponent } from './components/mtl/subcategory/users/subcategoryuser.component';
import { SubcategoryUserAssignComponent } from './components/mtl/subcategory-user-assign/subcategory-user-assign.component';
import { TreeviewModule } from 'ngx-treeview';
import { DropdownIconComponent } from './svg-icons/dropdown/dropdown-icon/dropdown-icon.component';
import { AboutComponent } from './components/about/about.component';
import { ContactComponent } from './components/contact/contact.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { ForgotPasswordComponent } from './components/account/forgot-password/forgot-password.component';
import { AccountModule } from './components/account/account.module';
import { AuthenticationComponent } from './components/authentication/authentication.component';
import { AuthenticationModule } from './components/authentication/authentication.module';
import { ResetPasswordComponent } from './components/authentication/reset-password/reset-password.component';
import { NewsFeedComponent } from './components/news-feed/news-feed.component';
import { PostComponent } from './components/news-feed/post/post.component';
import { NewsFeedDetailsComponent } from './components/news-feed/news-feed-details/news-feed-details.component';
import { SocialMShareComponent } from './components/mtl/socialM-share/socialM-share.component';
#NgModule({
declarations: [
AppComponent,
MtlComponent,
AvatarIconComponent,
HeartIconComponent,
DownloadIconComponent,
ShareIconComponent,
CragcityLogoComponent,
CragcityFooterComponent,
LandingComponent,
SubcategoryComponent,
SubCategoryUserComponent,
SubcategoryUserAssignComponent,
DropdownIconComponent,
AboutComponent,
ContactComponent,
NewsFeedComponent,
PostComponent,
NewsFeedDetailsComponent,
SocialMShareComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
ToastrModule.forRoot(),
NgxUiLoaderModule.forRoot(ngxConfig),
TreeviewModule.forRoot(),
HttpClientModule,
SocialLoginModule,
SharedModule,
AccountModule,
NgbModule
],
exports: [
CragcityLogoComponent
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: RequestInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: ResponseInterceptor,
multi: true
},
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(environment.googleClientId)
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider(environment.facebookAppId)
}
]
} as SocialAuthServiceConfig,
},
],
bootstrap: [AppComponent]
})
export class AppModule { }

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!

Error while rendering the page with the help of Angular 5

I'm doing a project with the help of Angular 5. I am calling an API in it.
I am getting following error:
Error: StaticInjectorError(AppModule)[Router -> ApplicationRef]:
StaticInjectorError(Platform: core)[Router -> ApplicationRef]:
NullInjectorError: No provider for ApplicationRef!
at NullInjector.push../node_modules/#angular/core/fesm5/core.js.NullInjector.get (core.js:951)
at resolveToken (core.js:1195)
at tryResolveToken (core.js:1140)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
at resolveToken (core.js:1195)
at tryResolveToken (core.js:1140)
at StaticInjector.push../node_modules/#angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
at resolveNgModuleDep (core.js:8071)
at _callFactory (core.js:8143)
at _createProviderInstance$1 (core.js:8091)
My Package.json is:
{
"name": "demo-app",
"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": "^6.0.3",
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/forms": "^6.0.3",
"#angular/http": "^6.0.3",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/compiler-cli": "^6.0.3",
"#angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"#angular/cli": "~6.0.8",
"#angular/language-service": "^6.0.3",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
I have app.module.ts as follows, in which I am giving a route "fetch" and calling the corresponding controller.
import { NgModule } from '#angular/core';
import { FetchApiComponent } from './fetch-api/fetch-api.component';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: 'fetch', component: FetchApiComponent },
];
#NgModule({
declarations: [
FetchApiComponent
],
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
The main.ts is following
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
It is showing that the error is thrown by main.ts file because of the following code.
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
Screenshot of the error:

To achieve expected result without eror, import BrowserModule
import { NgModule } from '#angular/core';
import { FetchApiComponent } from './fetch-api/fetch-api.component';
import { Routes, RouterModule } from '#angular/router';
import { BrowserModule } from '#angular/platform-browser';
const routes: Routes = [
{ path: 'fetch', component: FetchApiComponent },
];
#NgModule({
declarations: [
FetchApiComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
code sample for reference - https://stackblitz.com/edit/angular-2xbbzj?file=src/app/app.module.ts
Note: Remove BrowserModule from imports to see the same error

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;