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.
Related
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 { }
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
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!
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
Trying to query my graphql endpoint, which is accessible with a postman call, using the ApolloClient.Query call provided by the Apollo Client and return results. Following the guidelines from the docs here, I should be able to do something quick and crude like the following in a custom angular 4 component:
import { Component } from '#angular/core';
import { AuthService } from '../services/auth.service';
import { User } from '../models/user';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
user: User = new User();
constructor(private auth: AuthService, private apollo: Apollo) {}
onLogin(): void {
this.apollo.query({
context: {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
opts: {
mode: 'no-cors',
}
},
query: gql`{
allUsers {
id
emailAddress
password
}
}`}).subscribe(
(response) => console.log(response),
(error) => console.log(error),
() => console.log('completed!')
);
}
}
with the following Apollo Client creation in my main app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import {HttpClientModule} from '#angular/common/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './services/auth.service';
import { RegisterComponent } from './register/register.component';
import { StatusComponent } from './status/status.component';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginComponent,
RegisterComponent,
StatusComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ApolloModule,
HttpLinkModule,
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'status', component: StatusComponent }
])
],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(
apollo: Apollo,
httpLink: HttpLink
) {
apollo.create({
link: httpLink.create({ withCredentials: false,
uri: 'http://localhost:8080/graphql'}),
cache: new InMemoryCache()
});
}
}
However, in my debug console I am getting the following error. Thoughts? Scroll below to see the versioning of my javascript libraries
Error: Network error: req.headers.forEach is not a function
at new ApolloError (ApolloError.js:34)
at QueryManager.js:277
at QueryManager.js:655
at Array.forEach (<anonymous>)
at QueryManager.js:654
at Map.forEach (<anonymous>)
at QueryManager.webpackJsonp.../../../../apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:649)
at QueryManager.js:226
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
package.json
{
"name": "frontend",
"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.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"apollo-angular": "^1.0.0",
"apollo-angular-link-http": "^1.0.1",
"apollo-cache-inmemory": "^1.1.1",
"apollo-client": "^2.0.3",
"core-js": "^2.4.1",
"graphql": "^0.11.7",
"graphql-tag": "^2.5.0",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.2.3",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.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.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I had the same problem. What solved it for me was to swap out the headers to be inserted into the middleware instead, and then pass the middleware as a concat() result into link.
https://www.apollographql.com/docs/angular/basics/network-layer.html
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
operation.setContext({
headers: new HttpHeaders().set('Authorization', yourToken)
});
return forward(operation);
});
... <other code>
apollo.create({
link: concat(authMiddleware, http),
cache: new InMemoryCache()
});
Of course, you can probably swap Authorization for Content-Type and any other header you want.