I recently upgraded an existing Angular 6 App to Angular 7. Most of my App was built on Angular 6 and then I upgraded it.
Here's my package.json:
{
"name": "app-name",
"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": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.0.0",
"@angular/cdk": "^7.0.0",
"@angular/common": "^7.0.0",
"@angular/compiler": "^7.0.0",
"@angular/core": "^7.0.0",
"@angular/fire": "^5.0.2",
"@angular/forms": "^7.0.0",
"@angular/http": "^7.0.0",
"@angular/material": "^7.0.0",
"@angular/platform-browser": "^7.0.0",
"@angular/platform-browser-dynamic": "^7.0.0",
"@angular/router": "^7.0.0",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"firebase": "^5.5.1",
"npm": "^6.4.1",
"rxjs": "^6.3.3",
"sweetalert2": "^7.28.7",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~7.0.2",
"@angular/compiler-cli": "^7.0.0",
"@angular/language-service": "^7.0.0",
"@types/googlemaps": "^3.30.13",
"@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",
"typescript": "~3.1.3"
}
}
And here's the warning that I'm getting when I'm running ng build --prod:
C:\Development\Angular\MyApp>ng build --prod
Date: 2018-10-24T17:36:28.367Z
Hash: a03e526b7e8175b25c06
Time: 32695ms
chunk {0} 0.cafd68819f30185de9af.js () 74.8 kB [rendered]
chunk {1} 1.00224f689303f6e8aae8.js () 33.7 kB [rendered]
chunk {2} 2.c9d485747518d5177cf8.js () 29.7 kB [rendered]
chunk {3} 3.e25546a8136eb13e9af3.js () 31.5 kB [rendered]
chunk {4} 4.120580aa06e187956a3a.js () 51.3 kB [rendered]
chunk {5} 5.890208a2f9c910b04821.js () 62.8 kB [rendered]
chunk {6} 6.659eb84df5c798c5ff39.js () 29.4 kB [rendered]
chunk {7} runtime.4ee86023cc00ae14666e.js (runtime) 1.99 kB [entry] [rendered]
chunk {8} styles.f6067b501f9d2a5208bf.css (styles) 215 kB [initial] [rendered]
chunk {9} polyfills.644a401562606166b860.js (polyfills) 59.6 kB [initial] [rendered]chunk {10} main.be4cab576441165d61f9.js (main) 1.13 MB [initial] [rendered]
WARNING in ./src/app/tv/components/add-program-card/add-program-card.component.ngfactory.js
31:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/tv/components/edit-program-card/edit-program-card.component.ngfactory.js
31:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/news/components/edit-article-card/edit-article-card.component.ngfactory.js
33:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/news/components/add-news-card/add-news-card.component.ngfactory.js
33:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/team/components/add-player-card/add-player-card.component.ngfactory.js
33:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/team/components/edit-player-card/edit-player-card.component.ngfactory.js
33:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/boutique/components/add-merchandise-card/add-merchandise-card.component.ngfactory.js
39:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i6') was not found in '@angular/forms'
WARNING in ./src/app/boutique/components/edit-merchandise-card/edit-merchandise-card.component.ngfactory.js
39:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i6') was not found in '@angular/forms'
WARNING in ./src/app/games/components/edit-game-card/edit-game-card.component.ngfactory.js
45:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/games/components/add-game-card/add-game-card.component.ngfactory.js
45:52-87 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i2') was not found in '@angular/forms'
WARNING in ./src/app/components/login/login.component.ngfactory.js
49:53-88 "export 'ɵangular_packages_forms_forms_bh' (imported as 'i5') was not found in '@angular/forms'
I didn't think much of the warnings initially. But when I tried to navigate to my App that is hosted on Firebase Hosting, my App is not loading and I'm also getting this error on the console:
Uncaught TypeError: e is not a constructor
at main.be4cab576441165d61f9.js:1
at Xr (main.be4cab576441165d61f9.js:1)
at main.be4cab576441165d61f9.js:1
at new t (main.be4cab576441165d61f9.js:1)
at Object.mi [as createNgModuleRef] (main.be4cab576441165d61f9.js:1)
at e.create (main.be4cab576441165d61f9.js:1)
at main.be4cab576441165d61f9.js:1
at e.invoke (polyfills.644a401562606166b860.js:1)
at Object.onInvoke (main.be4cab576441165d61f9.js:1)
at e.invoke (polyfills.644a401562606166b860.js:1)
Things I've tried so far:
Searched for
ɵangular_packages_forms_forms_bhand found that it was referenced inangular/forms-builds/bundles/forms.umd.min.js.mapand was updated about 20 min. ago but didn't understand what to make of it.A similar issue was found in this GitHub Issue, which points to this comment, but doesn't look related to my error. It suggests that I need to export everything from
src/index.tswhich I don't have as of now.
Could someone please point me in the right direction as to how do I fix this error?
UPDATE
I created a Custom Form Control Element in my SharedModule that implements ControlValueAccessor. Here's the template of the same:
import { Component, EventEmitter, forwardRef, HostBinding, Input, OnInit, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-category-list',
templateUrl: './category-list.component.html',
styleUrls: ['./category-list.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CategoryListComponent),
multi: true
}
]
})
export class CategoryListComponent implements OnInit, ControlValueAccessor {
myControl = new FormControl();
selectedValue;
filteredOptions: Observable<string[]>;
question = 'Would you like to add ';
@Input() options: string[];
@Output() added = new EventEmitter();
// Function to call when the option changes.
onChange(option: string) {
}
// Function to call when the input is touched (when the autocomplete is clicked).
onTouched() {
}
get value() {
return this.selectedValue;
}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(option => option ? this.filter(option) : this.options.slice())
);
}
optionSelected(option) {
if (option.value.indexOf(this.question) === 0) {
const newOption = option.value.substring(this.question.length).split('?')[0];
this.options.push(newOption);
this.added.emit(newOption);
this.myControl.setValue(newOption);
this.writeValue(newOption);
} else {
this.myControl.setValue(option.value);
this.writeValue(option.value);
}
}
enter() {
const controlValue = this.myControl.value;
if (!this.options.some(entry => entry === controlValue)) {
this.added.emit(controlValue);
const index = this.options.push(controlValue);
setTimeout(
() => {
this.myControl.setValue(controlValue);
this.writeValue(controlValue);
}
);
} else {
this.writeValue(controlValue);
}
}
// Allows Angular to update the model (option).
// Update the model and changes needed for the view here.
writeValue(option: string): void {
console.log(`writeValue called with ${option}`);
this.selectedValue = option;
this.myControl.setValue(option);
this.onChange(option);
}
// Allows Angular to register a function to call when the model (rating) changes.
// Save the function as a property to call later here.
registerOnChange(fn: (option: string) => void): void {
this.onChange = fn;
}
// Allows Angular to register a function to call when the input has been touched.
// Save the function as a property to call later here.
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
private filter(value: string): string[] {
let results;
if (value) {
results = this.options
.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
if (results.length < 1) {
results = [this.question + value + '?'];
}
} else {
results = this.options.slice();
}
return results;
}
}
Do these warnings have something to do with this?