fail to build with (COMPILER_PROVIDERS (@angular/compiler)) as a provider

OS

Microsoft Windows [Version 10.0.14393]

Versions

angular-cli: 1.0.0-beta.22-1
node: 6.6.0
os: win32 x64

Repro steps

1. ng new testApp
2. go to "app.module.ts".
3. add "import { COMPILER_PROVIDERS } from '@angular/compiler';" in topp.
4. and add "COMPILER_PROVIDERS" as a provider.
5. and finally "ng server"

The log given by the failure.

C:\Users\johan\Desktop\TestProj\src\app>ng server
** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 2/2 modules 0 activeError: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 54:17 in the original .ts file), resolving symbol COMPILER_PROVIDERS in C:/Users/johan/Desktop/TestProj/node_modules/@angular/compiler/src/compiler.d.ts, resolving symbol AppModule in C:/Users/johan/Desktop/TestProj/src/app/app.module.ts, resolving symbol AppModule in C:/Users/johan/Desktop/TestProj/src/app/app.module.ts
    at positionalError (C:\Users\johan\Desktop\TestProj\node_modules\@angular\compiler-cli\src\static_reflector.js:595:18)
    at simplifyInContext (C:\Users\johan\Desktop\TestProj\node_modules\@angular\compiler-cli\src\static_reflector.js:473:27)
    at StaticReflector.simplify (C:\Users\johan\Desktop\TestProj\node_modules\@angular\compiler-cli\src\static_reflector.js:478:22)
    at StaticReflector.annotations (C:\Users\johan\Desktop\TestProj\node_modules\@angular\compiler-cli\src\static_reflector.js:60:36)
    at AotPlugin.getNgModuleMetadata (C:\Users\johan\Desktop\TestProj\node_modules\@ngtools\webpack\src\plugin.js:330:41)
    at AotPlugin._processNgModule (C:\Users\johan\Desktop\TestProj\node_modules\@ngtools\webpack\src\plugin.js:271:42)
    at C:\Users\johan\Desktop\TestProj\node_modules\@ngtools\webpack\src\plugin.js:242:39
    at process._tickCallback (internal/process/next_tick.js:103:7)
 70% building modules 679/679 modules 0 active

Mention any other details that might be useful.

you can get around the problem by commenting "providers: [COMPILER PROVIDERS],".
save and run ng server and then uncomment the line. this complis but the problem recurs if you restart ng server.

[clydin]

As of beta.22, the CLI requires your app to be statically analyzable even in JIT mode.

@clydin that's a bug; not a new feature...

[filipesilva]

@rolandoldengarm that is by design actually.

[SebastianFree]

Could someone please drop a line or two on how to reference COMPILER_PROVIDERS in the 'providers' sections of an NgModule correctly? It resides in @angular/compiler just like the JitCompiler class.

We seriously need the functionality to create dynamic components and can't work around this. Thanks!

I am using Angular 2.4.1 and angular-cli 1.0.0-beta.24.

[deebloo]

@SebastianFree if you need to dynamically create instances of components you can do something like the following. Keep in mind that any components you want to dynamically create need to be in the entryComponents list in the NgModule.

For Future reference quests like this are probably best for Stack Overflow. (especially since this issue is closed)

import { Injectable, ComponentRef, ComponentFactoryResolver, Injector } from '@angular/core';

@Injectable()
export class ComponentCreatorService {
  constructor(private resolver: ComponentFactoryResolver, private injector: Injector) { }

  createComponent<T>(ComponentClass: any): ComponentRef<T> {
    // the component factory resolver is used to create a component factory
    const factory = this.resolver.resolveComponentFactory(ComponentClass);

    // factory.create() accepts a single argument which is an Injector reference
    const component: ComponentRef<any> = factory.create(this.injector);

    return component;
  }
}

@filipesilva

@rolandoldengarm that is by design actually.

I meant that it's a bug that Angular CLI always builds in AOT mode. I hope that that is not by design?

[clydin]

It doesn't. Both JIT and AOT mode require statically analyzable code which is why it may look like it does.

[SebastianFree]

Hi, thanks for replying. There is in fact a question regarding this topic on StackOverflow. It didn't have an answer until now, when I found the good workaround, or actually it does seem to be a proper solution.

There is the 'JitCompilerFactory' in '@angular/compiler'. When using this factory, you can leave out COMPILER_PROVIDERS and JitCompiler from the 'providers' section of the module, and use the factory directly. I included this answer in the SO link, as well as here for others to not have the same problem.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}