Angular AOT Build: Internal error: unknown identifier undefined

Question

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?

On a project with many modules it helps to add console.out statements to "tokenExpr" method in "compiler.umd.js" to identify offending module, just print out the "ctx" parameter which should give you the path to broken module — Ruslans Uralovs, Oct 26 '18 at 11:47

score 14 · Accepted Answer · answered Nov 26 '18 at 19:02

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.

score 13 · Answer 2 · answered Oct 05 '17 at 06:22

13

This part of the application caused the problem:

export function windowFactory(): any {
    return window;
}

providers: [{
    provide: Window,
    useFactory: windowFactory
}],

Github: This fails with AoT compiler in Angular CLI, because Window (the browser window) is an interface

answered Oct 05 '17 at 06:22

im4ever

469
1
4
14

Hi, what you did to fix the factory in the provider ? – Cristiano Feb 03 '18 at 10:20
4

@Injectable() export class WindowWrapper extends Window { } export function getWindow() { return window; } – im4ever Feb 05 '18 at 06:32

score 3 · Answer 3 · edited Apr 28 '19 at 11:08

Had the same error when trying to provide Date for injection instead of an injection token.

So I did:

providers: [
    { provide: Date, useValue: new Date() }
  ]

and changed it to

providers: [
    { provide: NOW, useValue: new Date() },
  ],

where NOW is defined in the service that depends on it like this

export const NOW = new InjectionToken<Date>('now');

All documented on the Angular site.

score 2 · Answer 4 · answered May 31 '18 at 13:18

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.

score 2 · Answer 5 · answered Jul 19 '18 at 15:08

2

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.

answered Jul 19 '18 at 15:08

Jess

23,901
21
124
145

score 2 · Answer 6 · answered Jan 10 '21 at 03:09

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.

Gil Epshtain · Answer 7 · 2020-03-04T09:22:14.090

1

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.

edited Mar 04 '20 at 09:22

answered Mar 04 '20 at 09:03

Gil Epshtain

8,670
7
63
89

1

This was the issue in my case. Thanks for this. I would've spent hours debugging – Keff Aug 11 '20 at 14:53

score 1 · Answer 8 · answered Mar 09 '21 at 04:36

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:

In my-lib, there is one class:

@Injectable()
export class MyFirstService implement IMyFirstService {
}

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

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

score 0 · Answer 9 · answered Oct 04 '17 at 13:59

0

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

answered Oct 04 '17 at 13:59

Piyush Patel

1,212
15
19

score 0 · Answer 10 · answered Jul 19 '18 at 22:05

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.

score 0 · Answer 11 · answered Mar 01 '19 at 17:12

0

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.

answered Mar 01 '19 at 17:12

Marvin Dawson

59
3

Angular AOT Build: Internal error: unknown identifier undefined

11 Answers11