angularfire
angularfire copied to clipboard
[Angular 15 + Firebase 7] Build in production mode error: Component auth has not been registered yet
Error: Component auth has not been registered yet when building in production mode
Version info
Here is my packages.json
{
"name": "akademy",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"build:prod": "ng build --configuration production",
"build:staging": "ng build --configuration staging",
"test": "ng test"
},
"private": true,
"dependencies": {
"@ajite/editorjs-image-base64": "^0.0.2",
"@angular/animations": "^15.2.0",
"@angular/cdk": "^15.0.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/fire": "^7.6.1",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"@angular/service-worker": "^15.2.0",
"@editorjs/attaches": "^1.3.0",
"@editorjs/editorjs": "^2.28.1",
"@editorjs/embed": "^2.5.3",
"@editorjs/header": "^2.7.0",
"@editorjs/list": "^1.8.0",
"@editorjs/nested-list": "^1.3.0",
"@editorjs/paragraph": "^2.10.0",
"@editorjs/simple-image": "^1.6.0",
"@editorjs/table": "^2.2.2",
"@editorjs/underline": "^1.1.0",
"@ngrx/effects": "^15.4.0",
"@ngrx/store": "^15.4.0",
"@taiga-ui/addon-charts": "^3.56.0",
"@taiga-ui/addon-commerce": "^3.56.0",
"@taiga-ui/addon-doc": "^3.56.0",
"@taiga-ui/addon-mobile": "^3.56.0",
"@taiga-ui/addon-preview": "^3.56.0",
"@taiga-ui/addon-table": "^3.56.0",
"@taiga-ui/addon-tablebars": "^3.56.0",
"@taiga-ui/cdk": "^3.61.0",
"@taiga-ui/core": "^3.61.0",
"@taiga-ui/experimental": "^3.61.0",
"@taiga-ui/icons": "^3.56.0",
"@taiga-ui/kit": "^3.56.0",
"@taiga-ui/layout": "^3.56.0",
"@taiga-ui/styles": "^3.56.0",
"@tinkoff/ng-dompurify": "3.0.0",
"codex-notifier": "^1.1.2",
"codex-tooltip": "^1.0.5",
"dompurify": "2.2.9",
"editorjs-button": "^1.0.4",
"ngx-cookie-service": "^15.0.0",
"rxfire": "^6.0.4",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.10",
"@angular/cli": "~15.2.10",
"@angular/compiler-cli": "^15.2.10",
"@editorjs/checklist": "^1.5.0",
"@editorjs/code": "^2.8.0",
"@editorjs/delimiter": "^1.3.0",
"@editorjs/image": "^2.8.1",
"@editorjs/inline-code": "^1.4.0",
"@editorjs/link": "^2.5.0",
"@editorjs/marker": "^1.3.0",
"@editorjs/quote": "^2.5.0",
"@editorjs/raw": "^2.4.0",
"@editorjs/warning": "^1.3.0",
"@schematics/angular": "^17.0.0",
"@types/dompurify": "2.2.3",
"@types/jasmine": "~4.3.0",
"editorjs-undo": "^1.0.1",
"jasmine-core": "~4.5.0",
"javascript-obfuscator": "^4.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"simple-image-editorjs": "^1.4.0",
"typescript": "~4.9.4",
"webpack-obfuscator": "^3.5.1"
}
}
How to reproduce these conditions
Here is my angular.json file
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myapp": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/@taiga-ui/icons/src",
"output": "assets/taiga-ui/icons"
},
"src/manifest.webmanifest"
],
"styles": [
"node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
"node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
"node_modules/@taiga-ui/styles/taiga-ui-global.less",
"src/styles.scss"
],
"scripts": [],
"allowedCommonJsDependencies": [
"text-mask-core",
"dompurify"
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "1mb"
}
],
"outputHashing": "all",
"buildOptimizer": true,
"optimization": true,
"vendorChunk": true,
"extractLicenses": true,
"sourceMap": false,
"namedChunks": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"staging": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
},
"defaultConfiguration": "production"
},
...
I am trying to build in production mode and serve: ng s -c production
Debug output
Error: Component auth has not been registered yet
In development mode, everything is okay
This issue does not seem to follow the issue template. Make sure you provide all the required information.