Angular Errors and Solutions

Property ‘auth’ does not exist on type ‘AngularFireAuth’.ts(2339)

Error code:

 this.afAuth.auth.signOut().then(() => {
      this.router.navigate(['/']);
    });

Working Code:

this.afAuth.signOut().then(() => {
      this.router.navigate(['/']);
    });

And afAuth is,

import { AngularFireAuth } from '@angular/fire/auth';
Constructor(private afAuth: AngularFireAuth)

error TS2339: Property ‘map’ does not exist on type ‘Observable’.

Error code:

this.productService.uploadCSV(this.formData).map( res => res.json()).subscribe();

Fixed code:

this.productService.uploadCSV(this.formData).pipe(map(( res:any) => res.json())).subscribe();

And the “map” is imported from

import { map } from 'rxjs/operators';

Could not find module “@angular-devkit/build-angular”

Solution: Install the @angular-devkit/build-angular as dev dependency.

Command to install @angular-devkit/build-angular:

npm install --save-dev @angular-devkit/build-angular

An unhandled exception occurred: Cannot find module ‘typescript’

Solution: install typescript

npm install -g typescript (or) npm install -g typescript@3.5.3
npm link typescript

Then remove node_modules then run npm_install again.

error TS1086: An accessor cannot be declared in an ambient context. – firebase

Solution 1: Install gtoken

npm install gtoken@4.1.3

Solution 2: skipLibCheck to true in tsconfig.json [Worked for us]

"skipLibCheck": true,  add this in your tsconfig.json

Cannot find module ‘@angular-devkit/schematics’

npm i @angular-devkit/schematics

This below one is not required actually, but if you get the same error for this package, then do npm install for this as well

npm i @angular-devkit/core

Cannot find module ‘./plugins/architect’

delete node_modules and run

npm install

Repository is not clean. Please commit or stash any changes before updating.

Just run the same command with this

--allow-dirty

Example – on how to use allow-dirty property:

Error command:

ng update jasmine-spec-reporter

Working command:

ng update jasmine-spec-reporter --allow-dirty

ERROR in ./src/icons.ts

include icons.ts file in your tsconfig.app.json file

Error Code

"files": [  
	"main.ts",
    "polyfills.ts",  
  ]

Working Code

"files": [  
	"main.ts",
    "polyfills.ts",    
    "icons.ts"
  ]

Cannot find module ‘@schematics/angular/utility/config’

npm i --save-dev @nativescript/schematics

Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

Solution 1: Update angular universal (express engine)

Your angular universal @nguniversal/express-engine is currently may be using 8.2.6. You must use minimum 9.1.0 for angular 9 in order to use the angular universal with angular 9.

ng update @nguniversal/express-engine

Solution 2: Add enableIvy:false in tsconfig.server.json

Error code

"angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule",    
  },

Working code

"angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule",
    "enableIvy": false
  },

ERROR in The target entry-point “@nguniversal/express-engine/tokens” has missing dependencies: – express-serve-static-core

npm install --save @types/express-serve-static-core

Error: No NgModule metadata found for ‘[object Object]’.

Solution 1:

You need to remove “bundleDependencies”: “all” from angular.json file (under server -> options). Not sure why it’s breaking, but it sure does fix the issue.

"bundleDependencies": "all"

Solution 2:

Remove the below from angular.json file:

"outputHashing": "all",

Module not found: Error: Can’t resolve ‘events’ in ‘D:\userpanel\node_modules\webpack\hot’

Solution: npm install compression

npm install compression

Module not found: Error: Can’t resolve ‘compression’

Solution: npm install compression

npm install compression

An unhandled exception occurred: Configuration ‘production’ is not set in the workspace.

Solution: Make sure you have below snippet in your angular.json.

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/ng-userpanel/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },

Credits to Stackoverflow.com and github.com, as I have referred many answers from this site.