Angular AOT Build: Internal error: unknown identifier undefined

Viewed 11401

My current Angular 2 project started before Angular supported the AOT feature. Now, I’m trying to get it to work. I'm receiving the following error and I've no clue what this means and where I can start to debug the issue:

ERROR in Error: Internal error: unknown identifier undefined
at Object.importExpr$$1 [as importExpr] (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24211:23)
at tokenExpr (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18577:39)
at providerDef (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18480:20)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:18697:77
at Array.map (<anonymous>)
at NgModuleCompiler.compile (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18697:44)
at AotCompiler._compileModule (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24144:32)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:24056:66
at Array.forEach (<anonymous>)
at AotCompiler._compileImplFile (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24056:19)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:23969:87
at Array.map (<anonymous>)
at AotCompiler.emitAllImpls (...\node_modules\@angular\compiler\bundles\compiler.umd.js:23969:52)
at CodeGenerator.emit (...\node_modules\@angular\compiler-cli\src\codegen.js:42:46)
at ...\node_modules\@angular\compiler-cli\src\codegen.js:33:61
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

Dependencies

"@angular/animations": "^4.4.4",
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4",
"@angular/forms": "^4.4.4",
"@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.4.4",
"@angular/router": "^4.4.4",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"core-js": "^2.5.1",
"font-awesome": "^4.7.0",
"primeng": "^4.2.1",
"quill": "^1.3.2",
"rxjs": "^5.4.3",
"zone.js": "^0.8.18"

Has anyone an idea why this error occurs?

11 Answers

I faced the same error in my Angular 6 project.

when you run "ng build --prod", read the warning messages carefully. In which file it throws warning message (for eg:dataservice.ts).

then go to that (dataService.ts) file and remove the @Injectable.

@Injectable({
providedIn: 'root'
})

Then try to build again. It works for me.

Just for completeness since I stumbled upon the same error in a different context. The error occurred in my build when using an upgraded angularjs service class that was exported as default

// Service definition
export default class MyService { /* Registered AngularJS service here */ }

// Module
import MyService from './my-service'

// Upgrade 
export function myServiceFactory(i:any) {
  return i.get('myService');
}

// ngUpgraded Angular main module 
@NgModule({
  providers: [
    { provide: MyService, useFactory: myServiceFactory, deps: ['$injector'] }
  ]
})

Removing the default export resolved the issue.

For me, I created a base class for my services that uses HttpClient.

The base class and the sub class were marked as Injectable.

I removed Injectable from the base class and it solved the issue.

This happened to my due to Class Inheritance, where both the BaseClass and the DriveClass had @Injectable decorator.

@Injectable({
  providedIn: 'root'
})
export class BaseService { 
  ... 
}

@Injectable({
  providedIn: 'root'
})
export class DriveService extends BaseService {
 ... 
}

Removing the @Injectable from the BaseService solved the problem.

I'm running on Angular 11 (upgraded over time from 7). I just received this error but it was because I accidentally reverted my tsconfig.json file. The enableIvy line in angularCompilerOptions was reverted to the following setup that caused the error (for me at least):

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true,
    "enableIvy": false
  }

With Angular 11, the enableIvy line should be removed. My working angularCompilerOptions became:

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true
  }

I'm pretty sure the upgrade to 11 set this correctly but I messed up a revert.

I faced this problem twice and search for it twice. I just put my answer here for myself in future :)

In my case, this problem occurs when I create 2 projects:

  • my-lib (which contains common components that can be built as a library and publish to npmjs)
  • my-app (main application)

This is what I did:

  1. In my-lib, there is one class:
@Injectable()
export class MyFirstService implement IMyFirstService {
}
  1. In my-app, I declare one module which consume the service above:
@NgModule({
    providers: [
        {
            provide: MY_FIRST_SERVICE_INJECTION_TOKEN,
            useClass: MyFirstService
        }
    ]
})
export class MyLittleModule {
}
  1. When I ran ng build --prod, the exception occurs.

This is how I fix:

  • Remove the Injectable() annotation from MyFirstService class. The exception has gone.

Finally, I just want to say to my future me:

  • Hey myself, if you read this, that means this is nth times you forgot about this painful issue. :v

Check your templates maybe you used a variable in the template which is not defined in the component

Expanding on im4ever's answer, I ran into this same issue. It only showed up when doing a build when setting the configuration, not on ng serve or just ng build which led me to believe that it is an AOT issue.

When registering a service using a factory method, which I was doing so that I could inject localStorage, I had my module setup like this (shortened for brevity).

providers: [
    {provide: StateService, useFactory: provideStateService}
  ],

What I did to fix the issue was remove the @Injectable({}) decorator that I also had on the StateService class definition. Once I removed that, errors all went away.

Had this problem while running ng build --prod for Angular 7.1.4, so I removed the @Injectable that Karthi Coimbatore recommended for a TooltipService I created to use Angular Material tooltip's positions.

Related