4

I'm trying to follow the ahead of time (AOT) compiler instructions here:

https://angular.io/guide/aot-compiler

The project I'm working on has been developed using the quickstart seed, as described here:

https://angular.io/guide/setup

The project has been working fine without using the AOT compiler, but when I try to follow the instructions to get the AOT compiler working, I get the following error (this is on Windows 8):

C:\Users\zzzzz\Desktop\quickstart>"node_modules/.bin/ngc" -p ./src
TypeError: this.compiler.analyzeModulesAsync is not a function
    at CodeGenerator.codegen (C:\Users\zzzzz\Desktop\quickstart\node_modules\@angular\compiler-cli\src\codegen.js:32:14)
    at codegen (C:\Users\zzzzz\Desktop\quickstart\node_modules\@angular\compiler-cli\src\main.js:13:81)
    at Object.main (C:\Users\zzzzz\Desktop\quickstart\node_modules\@angular\tsc-wrapped\src\main.js:98:16)
    at main (C:\Users\zzzzz\Desktop\quickstart\node_modules\@angular\compiler-cli\src\main.js:19:16)
    at Object.<anonymous> (C:\Users\zzzzz\Desktop\quickstart\node_modules\@angular\compiler-cli\src\main.js:35:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
Compilation failed

My package.json file looks like this:

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/compiler-cli": "^4.2.2",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/platform-server": "^4.2.2",
    "@angular/router": "~4.0.0",
    "@ngrx/core": "~1.2.0",
    "@ngrx/store": "~2.2.2",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.1.0"
  },
  "repository": {}
}

When I check what version of @angular/compiler I have installed, I get 4.2.2, which appears to be the most current version:

C:\Users\zzzzz\Desktop\quickstart>npm view @angular/compiler version
4.2.2

Viewing source on Github, I see that there is a function called analyzeModulesAsync in angular/packages/compiler/src/aot/compiler.ts:

https://github.com/angular/angular/blob/master/packages/compiler/src/aot/compiler.ts

However, when I do a grep on my node_modules folder for analyzeModulesAsync, I only see calls to that function. I don't see a definition for it. In fact, the class definition in the compiler.d.ts appears to have several differences from the compiler.ts file on Github.

I've tried "reinstalling" by deleting the entire node_modules folder and re-running npm install, and the error message is the same.

I do see a somewhat similar question here: Angular AOT failing at compilation (something with angular/compiler-cli), but I don't know enough about npm versioning to know what could be out of whack, or how to fix it.

Any ideas on whether I botched some instructions somewhere, or there is something deeper at work?

SOLUTION

The problem was with the mismatched versions of @angular/compiler-cli and @angular/platform-server in package.json. Once I changed those to "~4.0.0" to match the rest of the angular modules, deleted the node_modules folder and re-ran npm install, the compiler worked.

My working theory is that, because I cloned the quickstart two weeks ago, and ran this command: npm install @angular/compiler-cli @angular/platform-server --save from the tutorial yesterday, that's what lead to the version mismatch.

2
  • 1
    Why do you use different version compiler("~4.0.0") and compiler-cl("^4.2.2")i? Commented Jun 15, 2017 at 15:29
  • 1
    That may have happened when I tried to fix issues I got with running this command from the tutorial: npm install @angular/compiler-cli @angular/platform-server --save. Regardless, I made all the versions consistent in my package.json, deleted node_modules, re-ran npm install, and now it appears that the compiler worked! Commented Jun 15, 2017 at 15:42

2 Answers 2

1

@Rolandus : You smashed it, I had cloned the quickstart a while ago, then added aot packages today which were set to latest. Matching the version numbers to 4.0.0 worked but only once I used the tilde ~ rather than caret ^

Sign up to request clarification or add additional context in comments.

Comments

1

The problem is with the mismatched versions of @angular/compiler-cli and other angular packages. So we suggest you to install @angular/compiler-cli package in the same version of other angular packages in your application.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.