We Keep Coding

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!

AsyncTestZoneSpec is needed for the async - Angular

The application was built on Angular v4 and was gradually updated with every release up until now. Currently we're on Angular v7 and finally the CEO has agreed to write unit test while it wasn't the case before.
I just created a simple spec to just get started with the tests and start implementing it throughout the project but got stuck for two days with the following error:
AsyncTestZoneSpec is needed for the async() test helper but could not be >found. Please make sure that your environment includes zone.js/dist/async->test.js
While googling for the above error, I found some answers but that was related to Wallaybyjs but rather specific to Angular.
I've tried to reproduce the issue with the brand new installation of the angular project but couldn't really. This might be issue with some dependencies required to be missing to run tests on Angular 7.
Following is the test.ts file:
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '#angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare const __karma__: any;
declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();
and Package.json:
{
"name": "frontend",
"version": "0.1.2-7",
"appVersion": "2.104",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-staging": "bash build-staging.sh",
"build-production": "bash build-production.sh",
"compodoc": "npx compodoc -p src/tsconfig.app.json"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular/animations": "7.0.3",
"#angular/common": "7.0.3",
"#angular/compiler": "7.0.3",
"#angular/core": "7.0.3",
"#angular/forms": "7.0.3",
"#angular/http": "7.0.3",
"#angular/platform-browser": "7.0.3",
"#angular/platform-browser-dynamic": "7.0.3",
"#angular/router": "7.0.3",
"#fortawesome/fontawesome-free": "^5.9.0",
"#mobiscroll/angular": "^4.7.3",
"#ng-bootstrap/ng-bootstrap": "^4.2.1",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"angular2-virtual-scroll": "^0.4.16",
"core-js": "^2.6.9",
"moment": "^2.22.2",
"ng-block-ui": "^2.1.5",
"ng2-charts": "^1.6.0",
"ngx-infinite-scroll": "^7.2.0",
"ngx-lazy-load-images": "^1.3.1",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular/cli": "7.0.5",
"#angular/compiler-cli": "^7.2.15",
"#angular/language-service": "7.0.3",
"#compodoc/compodoc": "^1.1.9",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^10.14.10",
"codelyzer": "^4.4.2",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"ts-node": "~7.0.1",
"tslint": "~5.7.0",
"typescript": "3.1.6"
}
}
Following is the component spec:
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { InsuranceComponent } from './insurance.component';
import { CartModule } from '../../cart/cart.module';
import { SharedModule } from '../../shared/shared.module';
import { CommonModule } from '#angular/common';
import { MbscModule } from '#mobiscroll/angular';
import { FormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { PipeModule } from '../../pipe/pipe.module';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { InsuranceRoutingModule } from '../insurance-routing/insurance-routing.module';
import { InsuranceSearchItemComponent } from '../insurance-search-item/insurance-search-item.component';
// tslint:disable-next-line:max-line-length
import { InsuranceSearchItemDetailsComponent } from '../insurance-search-item/insurance-search-item-details/insurance-search-item-details.component';
describe('Insurance Component', () => {
let component: InsuranceComponent;
let fixture: ComponentFixture<InsuranceComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CartModule,
SharedModule,
CommonModule,
MbscModule,
FormsModule,
NgbModule,
PipeModule,
InfiniteScrollModule,
InsuranceRoutingModule
],
declarations: [InsuranceComponent, InsuranceSearchItemComponent, InsuranceSearchItemDetailsComponent]
}).compileComponents();
fixture = TestBed.createComponent(InsuranceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
Any help would be appreciated alot.
Thanks

I was getting this error after Angular 11 upgrade.
This line must be the first line in test.ts, before all other imports:
import 'zone.js/dist/zone-testing'; // zone-testing needs to be first import!

The following command was likely deprecated:
ng test --main somecomponent.spec.ts
Instead, use:
ng test
To just run a specific spec instead of all, prefix your describe and it block with f:
fdescribe('whatever', () => {})

I use this command in order to test one file only:
ng test --include somecomponent.spec.ts
You are going to have issues with the --main option as #clean-code has stated.

I had the same problem with with the spectator testing framework.
The solution was, to import jest-preset-angular before the spectator imports.
wrong:
import { defineGlobalsInjections } from '#ngneat/spectator';
import 'jest-preset-angular';
correct:
import 'jest-preset-angular';
import { defineGlobalsInjections } from '#ngneat/spectator';

I had similar issue but with jest testing framework.
After you removed all the karma and jasmine related stuff and installed jest related staff you could have a similar error
zone-testing.js is needed for the async() test helper but could not be found.
Please make sure that your environment includes zone.js/dist/zone-testing.js
And here it is my setup-jest.ts file
import 'jest-preset-angular';
import 'jest-extended';
When I changed one of the imports in the file setup-jest.ts to this
import 'jest-preset-angular/setup-jest';
import 'jest-extended';
Everything works fine now.

To use async() functionality, you need to import zone-testing.
Try importing zone-testing package into your test.ts file.
import 'zone.js/dist/zone-testing'
Refer this link - Angular Documentation

How do I fix building errors with Angular Material Components?

Am I missing something in the configuration?
ng Version command
Versions
Angular CLI: 1.7.0
Node: 8.1.1
OS: win32 x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router
#angular/animations: 5.2.9
#angular/cdk: 5.2.4
#angular/cli: 1.7.0
#angular/material: 5.2.4
#angular-devkit/build-optimizer: 0.3.1
#angular-devkit/core: 0.3.1
#angular-devkit/schematics: 0.3.1
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.10.0
#schematics/angular: 0.3.1
#schematics/package-update: 0.3.1
typescript: 2.5.3
webpack-bundle-analyzer: 2.11.1
webpack: 3.11.0
Repro steps
Step 1 Create new project ng new any-name
Step 2 By following steps on https://material.angular.io/guide/getting-started
i.e
npm install --save #angular/material #angular/cdk
npm install --save #angular/animations
Step 3
Material.module.ts
import {MatButtonModule,
MatCheckboxModule} from '#angular/material';
#NgModule({
imports: [MatButtonModule, MatCheckboxModule],
})
export class MaterialModule { }
app.component.html
<div>
<input type="button" mat-button placeholder="Holla!">
<button mat-raised-button >Click me!</button>
<mat-checkbox>Check me!</mat-checkbox>
</div>
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {MaterialModule} from '../shared/material.module'
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
styles.css
/* You can add global styles to this file, and also import other style files */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Observed behavior
compiler.js:485 Uncaught Error: Template parse errors:
'mat-checkbox' is not a known element:
If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
Click me!
[ERROR ->]Check me!
"): ng:///AppModule/AppComponent.html#4:2
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach ()
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
syntaxError # compiler.js:485
TemplateParser.parse # compiler.js:24668
JitCompiler._parseTemplate # compiler.js:34621
JitCompiler._compileTemplate # compiler.js:34596
(anonymous) # compiler.js:34497
JitCompiler._compileComponents # compiler.js:34497
(anonymous) # compiler.js:34367
then # compiler.js:474
JitCompiler._compileModuleAndComponents # compiler.js:34366
JitCompiler.compileModuleAsync # compiler.js:34260
CompilerImpl.compileModuleAsync # platform-browser-dynamic.js:239
PlatformRef.bootstrapModule # core.js:5567
(anonymous) # main.ts:11
./src/main.ts # main.bundle.js:59
__webpack_require__ # inline.bundle.js:55
0 # main.bundle.js:75
__webpack_require__ # inline.bundle.js:55
webpackJsonpCallback # inline.bundle.js:26
(anonymous) # main.bundle.js:1
Desired behavior
What would like to see implemented?
It should load the angular material components.
Package.json
{
"name": "mat-learn",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.9",
"#angular/cdk": "^5.2.4",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.4",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~1.7.0",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

#import "~#angular/material/prebuilt-themes/indigo-pink.css";
add this in style.css

As per the example given here, you also need to export the material modules from your shared material module
https://material.angular.io/guide/getting-started#step-3-import-the-component-modules
import {MatButtonModule,
MatCheckboxModule} from '#angular/material';
#NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule]
})
export class MaterialModule { }

This might be what you was looking for, you need to add few lines to styles in angular.json
"./node_modules/#angular/material/prebuilt-themes/pink-bluegrey.css"
This worked for me. Give a Try!

I was looking for something for a while. But I had just one typo in an import making the whole "Module import" clause fail.
My import was:
import { PopoverModule } from '_components/material/popover';
Instead of:
import { PopoverModule } from './_components/material/popover';
And it triggered 15+ unrelated errors about material ui components.

Angular's Zone.js hates RaphaelJS

I try to use RaphaelJS in Angular but zone.js doesn't want that:
"ERROR" TypeError: e is undefined Stack trace:
["../../../../raphael/raphael.min.js"]/engine.create#http://localhost:4200/vendor.bundle.js:3632:9420
e#http://localhost:4200/vendor.bundle.js:3630:896
PaperComponent#http://localhost:4200/main.bundle.js:146:22
createClass#http://localhost:4200/vendor.bundle.js:54805:26
createDirectiveInstance#http://localhost:4200/vendor.bundle.js:54639:37
createViewNodes#http://localhost:4200/vendor.bundle.js:56075:49
callViewAction#http://localhost:4200/vendor.bundle.js:56521:13
execComponentViewsAction#http://localhost:4200/vendor.bundle.js:56430:13
createViewNodes#http://localhost:4200/vendor.bundle.js:56102:5
createRootView#http://localhost:4200/vendor.bundle.js:55970:5
callWithDebugContext#http://localhost:4200/vendor.bundle.js:57353:39
debugCreateRootView#http://localhost:4200/vendor.bundle.js:56670:12
["../../../core/#angular/core.es5.js"]/.prototype.create#http://localhost:4200/vendor.bundle.js:53753:37
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40
["../../../core/#angular/core.es5.js"]/moduleDoBootstrap/<#http://localhost:4200/vendor.bundle.js:48442:74
["../../../core/#angular/core.es5.js"]/.prototype.moduleDoBootstrap#http://localhost:4200/vendor.bundle.js:48442:13
["../../../core/#angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke#http://localhost:4200/vendor.bundle.js:47787:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24
scheduleResolveOrReject/<#http://localhost:4200/polyfills.bundle.js:11019:52
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask#http://localhost:4200/vendor.bundle.js:47778:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28
drainMicroTaskQueue#http://localhost:4200/polyfills.bundle.js:10783:25
AppComponent.ngfactory.js:14:7
"ERROR CONTEXT" Object { view: Object, nodeIndex: 13, nodeDef: Object,
elDef: Object, elView: Object } AppComponent.ngfactory.js:14:7
"Unhandled Promise rejection:" "e is undefined" "; Zone:" "" ";
Task:" "Promise.then" "; Value:" TypeError: e is undefined Stack
trace:
["../../../../raphael/raphael.min.js"]/engine.create#http://localhost:4200/vendor.bundle.js:3632:9420
e#http://localhost:4200/vendor.bundle.js:3630:896
PaperComponent#http://localhost:4200/main.bundle.js:146:22
createClass#http://localhost:4200/vendor.bundle.js:54805:26
createDirectiveInstance#http://localhost:4200/vendor.bundle.js:54639:37
createViewNodes#http://localhost:4200/vendor.bundle.js:56075:49
callViewAction#http://localhost:4200/vendor.bundle.js:56521:13
execComponentViewsAction#http://localhost:4200/vendor.bundle.js:56430:13
createViewNodes#http://localhost:4200/vendor.bundle.js:56102:5
createRootView#http://localhost:4200/vendor.bundle.js:55970:5
callWithDebugContext#http://localhost:4200/vendor.bundle.js:57353:39
debugCreateRootView#http://localhost:4200/vendor.bundle.js:56670:12
["../../../core/#angular/core.es5.js"]/.prototype.create#http://localhost:4200/vendor.bundle.js:53753:37
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40
["../../../core/#angular/core.es5.js"]/moduleDoBootstrap/<#http://localhost:4200/vendor.bundle.js:48442:74
["../../../core/#angular/core.es5.js"]/.prototype.moduleDoBootstrap#http://localhost:4200/vendor.bundle.js:48442:13
["../../../core/#angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke#http://localhost:4200/vendor.bundle.js:47787:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24
scheduleResolveOrReject/<#http://localhost:4200/polyfills.bundle.js:11019:52
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask#http://localhost:4200/vendor.bundle.js:47778:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28
drainMicroTaskQueue#http://localhost:4200/polyfills.bundle.js:10783:25
"["../../../../raphael/raphael.min.js"]/engine.create#http://localhost:4200/vendor.bundle.js:3632:9420
e#http://localhost:4200/vendor.bundle.js:3630:896
PaperComponent#http://localhost:4200/main.bundle.js:146:22
createClass#http://localhost:4200/vendor.bundle.js:54805:26
createDirectiveInstance#http://localhost:4200/vendor.bundle.js:54639:37
createViewNodes#http://localhost:4200/vendor.bundle.js:56075:49
callViewAction#http://localhost:4200/vendor.bundle.js:56521:13
execComponentViewsAction#http://localhost:4200/vendor.bundle.js:56430:13
createViewNodes#http://localhost:4200/vendor.bundle.js:56102:5
createRootView#http://localhost:4200/vendor.bundle.js:55970:5
callWithDebugContext#http://localhost:4200/vendor.bundle.js:57353:39
debugCreateRootView#http://localhost:4200/vendor.bundle.js:56670:12
["../../../core/#angular/core.es5.js"]/.prototype.create#http://localhost:4200/vendor.bundle.js:53753:37
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16
["../../../core/#angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40
["../../../core/#angular/core.es5.js"]/moduleDoBootstrap/<#http://localhost:4200/vendor.bundle.js:48442:74
["../../../core/#angular/core.es5.js"]/.prototype.moduleDoBootstrap#http://localhost:4200/vendor.bundle.js:48442:13
["../../../core/#angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke#http://localhost:4200/vendor.bundle.js:47787:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24
scheduleResolveOrReject/<#http://localhost:4200/polyfills.bundle.js:11019:52
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask#http://localhost:4200/vendor.bundle.js:47778:24
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17
["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28
drainMicroTaskQueue#http://localhost:4200/polyfills.bundle.js:10783:25
" polyfills.bundle.js:10842:16
mutating the [[Prototype]] of an object will cause your code to run
very slowly; instead create the object with the correct initial
[[Prototype]] value using Object.create vendor.bundle.js:10011:4
I navigated to the compiled source and still not no clue there. So i tried to resolve it installing various shims, didn't work.
My source files:
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
typings.d.ts:
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
main.ts:
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);
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'sign-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent
{
title = 'app';
constructor()
{
}
}
app.component.html:
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div>
<p>Please put your sign below:</p>
<sign-paper></sign-paper>
</div>
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { PaperComponent } from './paper.component';
#NgModule({
declarations: [
AppComponent,
PaperComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
paper.component.ts:
import { Component } from '#angular/core';
import * as Raphael from 'raphael';
/// <reference path="../../node_modules/#types/raphael/index.d.ts" />
#Component({
selector: 'sign-paper',
templateUrl: './paper.component.html',
styleUrls: [ './app.component.css' ],
providers: []
})
export class PaperComponent
{
private paper: RaphaelPaper;
constructor()
{
this.paper = Raphael('paper', 640, 480);
this.draw();
}
private draw(): void
{
let thatCircle: RaphaelElement = this.paper.circle(10, 100, 100);
thatCircle.attr('stroke', '#0A0B0C');
}
}
paper.component.html:
<div id="paper"></div>
polyfills.ts:
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `#angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
import 'intl'; // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
import 'intl/locale-data/jsonp/en';
package.json:
{
"name": "Sign",
"version": "1.0.0",
"license": "BSD-3-Clause",
"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",
"#types/raphael": "^2.1.30",
"angular-polyfills": "^1.0.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"intl": "^1.2.5",
"raphael": "^2.2.7",
"rxjs": "^5.1.0",
"ts-helpers": "^1.1.2",
"yarn": "^0.27.5",
"zone.js": "^0.8.4"
},
"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"
},
"description": "Let's sign things.",
"main": "index.js",
"author": "RoestVrijStaal"
}

"ERROR" TypeError: e is undefined Stack trace:
Cause of error is using a variable without defining e.g.
(function(){"use strict";e})()
Fix
Define e
More
Your error is pointing to a minified file. This means that your posted code is essentially useless. Setup sourcemaps to get the proper error line and proceed from there.