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
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 { }
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.
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
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.