EXCEPTION: Runtime compiler is not loaded

Question

Versions.

Repro steps.

ng build -prod -e prod

The log given by the failure.

vendor.380a744….bundle.js:218 Error: Runtime compiler is not loaded
    at new Error (native)
    at Error.d (http://localhost:9000/portal/assets/dist/polyfills.a61f849adcea6ec74b69.bundle.js:36:1731)
    at r (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1410:3338)
    at t.compileModuleAndAllComponentsAsync (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1417:702)
    at e.ngOnChanges (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:1171229)
    at e.ngDoCheck (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:914180)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:332790)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:329907)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.R2h3.t.internalDetectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5542)
    at t.YSmj.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:662563)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "Origianlly fomr a webpack starter for angular 2",
  "scripts": {
    "build": "ng build -dev -e dev",
    "build:aot": "ng build -prod -e prod --aot true",
    "build:prod": "ng build -prod -e prod",
    "postbuild": "node build.js",
    "postbuild:prod": "node build.js",
    "watch": "ng build -dev -w true",
    "postinstall": "typings install",
    "start": "ng serve",
    "lint": "ng lint --format stylish",
    "test": "ng test --watch false --single-run false",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "prepush": "npm test && npm run lint"
  },
  "author": "Mikeumus",
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/flex-layout": "2.0.0-rc.1",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/material": "2.0.0-beta.2",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "@types/lodash": "4.14.50",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.4.1",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "lodash": "4.15.0",
    "moment": "2.17.1",
    "moment-timezone": "0.5.11",
    "ng2-interceptors": "1.2.4",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.1.0",
    "snapsvg": "0.5.1",
    "snapsvg-cjs": "0.0.4",
    "web-animations-js": "^2.2.2",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    "@angular/compiler-cli": "2.4.0",
    "@types/core-js": "0.9.37",
    "@types/jasmine": "2.5.38",
    "@types/moment-timezone": "0.2.34",
    "@types/node": "6.0.60",
    "@types/selenium-webdriver": "3.0.0",
    "@types/snapsvg": "0.4.27",
    "autoprefixer": "6.7.7",
    "codelyzer": "2.0.0",
    "husky": "0.13.2",
    "istanbul-instrumenter-loader": "0.2.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.0.0",
    "karma-jasmine": "1.0.2",
    "karma-mocha-reporter": "2.0.3",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.30",
    "protractor": "5.1.0",
    "remap-istanbul": "0.6.4",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typedoc": "0.5.7",
    "typescript": "2.0.3"
  }
}

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "../public/dist",
      "assets": [],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "",
      "styles": [],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    },
    "viewEncapsulation": "Emulated",
    "changeDetection": "Default"
  }
}

I've taken a lot of time to make sure my app is matching packages and conventions of a fresh cli-rc2 app (ng new) with no luck yet. Much of the app renders fine, I think it's one part of the code that uses compiler.compileModuleAndAllComponentsAsync<any>( this.moduleType ).

Hi @R.Richards, package.json and angular-cli.json are there now above. — Mikeumus
– Mikeumus, Commented Mar 17, 2017 at 2:08
prod configuration in angular-cli includes aot by default AFAIK — yurzui
– yurzui, Commented Mar 17, 2017 at 4:49

golfadas · Accepted Answer · 2019-03-07 15:32:20Z

21

Loading children with a function instead of a module string path can cause production builds to raise Runtime compiler is not loaded.

In order to fix the error, look out for loadChildren declarations in the format of:

{
    path: ':id',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: () => SubModule
      }
    ]
  }

and change them to:

  {
    path: ':id',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './sub-module/sub-module.module#SubModule'
      }
    ]
  }

answered Mar 7, 2019 at 15:32

golfadas

5,5513 gold badges34 silver badges39 bronze badges

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

3 Comments

MiKr13 Over a year ago

But what if I don't want lazy loading, can you suggest any good alternatives in that case? Thanks. I am facing the issue of chunk not loading in case of lazy loading and the way my app is configured, so I would love a solution that doesn't include lazy loading while solving this issue.

golfadas Over a year ago

Remove loadChildren, and move all submodule and its routes to the top level module? Haven't worked with angular in a while, so it might not be the best solution.

MiKr13 Over a year ago

thanks for the help, it won't be a good solution actually but thanks.

halfer · Accepted Answer · 2020-03-21 21:35:26Z

2

I had this problem in Angular 7

The Angular 7 docs are here - https://v7.angular.io/guide/lazy-loading-ngmodules#lazy-loading-feature-modules

When I used this approach (seen in the Angular docs) I get a runtime error as follows:

loadChildren: './customers/customers.module#CustomersModule'

Could not resolve module relative to app\app.module.ts

When I used this approach AOT build would not work, failing with "Runtime compiler is not loaded":

loadChildren: () => import('./customers/customers.module').then((mod) => mod.CustomersModule)

I fixed it by adding a path to tsconfig.app.json for the customers directory as follows:

"@customers/*": ["app/customers/*"]

And using the path when lazy loading as follows:

loadChildren: '@customers/customers.module#CustomersModule'

edited Mar 21, 2020 at 21:35

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 20, 2020 at 14:58

danday74

58.1k56 gold badges273 silver badges337 bronze badges

1 Comment

Hansaka Sandaruwan Over a year ago

loadChildren: '@customers/customers.module#CustomersModule' does this give same performance as the import method?

Community · Accepted Answer · 2017-05-23 12:25:43Z

0

This happens in @angular/[email protected] when doing a production build (ng build -prod) while using the compiler class in your code.

To replace the compiler you'll want to use "dynamic component creation". See this SO:

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Related To:

angular-cli build prod "Runtime compiler is not loaded”

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 18, 2017 at 0:52

Mikeumus

3,97410 gold badges44 silver badges71 bronze badges

Collectives™ on Stack Overflow

EXCEPTION: Runtime compiler is not loaded

Versions.

Repro steps.

The log given by the failure.

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Versions.

Repro steps.

The log given by the failure.

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related