Angular-cli: Enabling Ivy breaks build and serve

Created on 16 Aug 2018 · 10Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [X] build
- [X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.9.1
OS: win32 x64
Angular: 6.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.3
@angular-devkit/build-angular     0.7.3
@angular-devkit/build-optimizer   0.7.3
@angular-devkit/build-webpack     0.7.3
@angular-devkit/core              0.7.3
@angular-devkit/schematics        0.7.3
@ngtools/webpack                  6.1.3
@schematics/angular               0.7.3
@schematics/update                0.7.3
rxjs                              6.2.2
typescript                        2.9.2
webpack

Repro steps

Create a new project and enable Ivy using one of the flags in tsconfig example

  "angularCompilerOptions": {
    "enableIvy": "tsc"
  }

The log given by the failure

this._compilerHost.resolve is not a function
TypeError: this._compilerHost.resolve is not a function
    at compiler.hooks.environment.tap (/PATH_TO_PROJECT/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:455:53)
    at SyncHook.eval [as call] (eval at create (/PATH_TO_PROJECT/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
    at SyncHook.lazyCompileHook [as _call] (/PATH_TO_PROJECT/node_modules/tapable/lib/Hook.js:35:21)
    at webpack (/PATH_TO_PROJECT/node_modules/webpack/lib/webpack.js:40:30)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (/PATH_TO_PROJECT/node_modules/@angular-devkit/build-webpack/src/webpack/index.js:21:37)
    at Observable._trySubscribe (/PATH_TO_PROJECT/node_modules/rxjs/internal/Observable.js:43:25)
    at Observable.subscribe (/PATH_TO_PROJECT/node_modules/rxjs/internal/Observable.js:29:22)
    at /PATH_TO_PROJECT/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (/PATH_TO_PROJECT/node_modules/rxjs/internal/util/subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (/PATH_TO_PROJECT/node_modules/rxjs/internal/operators/mergeMap.js:75:38)
    at MergeMapSubscriber._tryNext (/PATH_TO_PROJECT/node_modules/rxjs/internal/operators/mergeMap.js:72:14)
    at MergeMapSubscriber._next (/PATH_TO_PROJECT/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
    at MergeMapSubscriber.Subscriber.next (/PATH_TO_PROJECT/node_modules/rxjs/internal/Subscriber.js:64:18)
    at TapSubscriber._next (/PATH_TO_PROJECT/node_modules/rxjs/internal/operators/tap.js:62:26)
    at TapSubscriber.Subscriber.next (/PATH_TO_PROJECT/node_modules/rxjs/internal/Subscriber.js:64:18)
    at MergeMapSubscriber.notifyNext (/PATH_TO_PROJECT/node_modules/rxjs/internal/operators/mergeMap.js:84:26)

Desired functionality

It works.

Mention any other details that might be useful

There was another issue re this, but it was closed:
https://github.com/angular/angular-cli/issues/11909

devkibuild-angular

Source

alan-agius4

Most helpful comment

got the same errors today using angular cli 7

fabianedl777 on 28 Oct 2018

👍8

All 10 comments

Are you using --experimental-ivy on ng new? There are differences between Ivy and non-Ivy projects (for the time being).

hansl on 17 Aug 2018

it works thanks

alan-agius4 on 17 Aug 2018

I generated a new project with Angular CLI 7 RC3 using below command:

ng new temp --experimental-ivy

Now when I try ng serve, the app compiles successfully but when I run it in browser its broken and shows below error in console:

Uncaught Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ngComponentDef' property.
    at throwError (core.js:1811)
    at assertComponentType (core.js:1805)
    at renderComponent (core.js:6483)
    at Module../src/main.ts (main.ts:17)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:17)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1

I also tried ng serve --aot but it throws below error:

ERROR in Child compilation failed:
Entry module not found: Error: Can't resolve 'D:\temp\D:\temp\src\app\app.component.html' in 'D:\temp':
Error: Can't resolve 'D:\temp\D:\temp\src\app\app.component.html' in 'D:\temp'