strictTemplates, Angular 9: compability with Ivy

andzejsw commented 4 years ago

Enabling the new strictTemplates flag in Angular 9's compiler options generates the following build error: This likely means that the library (@angular/platform-browser/animations) which declares BrowserAnimationsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy. Error appears for multiple components:

@angular/platform-browser/animations
@angular/router
@angular/material/sort
@angular/material/paginator
@angular/material/datepicker
@angular/material/icon
@angular/material/core
@angular/forms

And maybe in some other. But these ones i am using in my project.

jpelton-stroud commented 4 years ago

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

jschrbr commented 4 years ago

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

Yep, that's been working for me. (Also working on a brand new project).

All but the datepicker. Adding the mat-datepicker tag to HTML seems to stop my app rendering at the position the datepicker is called. With no errors.

@andzejsw I noticed the datepicker is on your list. This may also be causing your grief.

@jpelton-stroud Can you please try confirm this behavior? Try adding the datepicker near the top of your project, and see if it still renders.

Just confirm whether its just me or something bigger. Further discussions should be in a separate issue.

andzejsw commented 4 years ago

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

ng build with --watch --poll throws error for me

andzejsw commented 4 years ago

Error now isn't appearing for me, after i updated all dependencies. Is it fixed? Can anyone else confirm!?

jpelton-stroud commented 4 years ago

Angular CLI: 9.0.4
Node: 10.15.3
OS: linux x64

Angular: 9.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.4
@angular-devkit/build-optimizer   0.900.4
@angular-devkit/build-webpack     0.900.4
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.4
@angular/cdk                      9.1.0
@angular/fire                     5.4.2
@angular/material                 9.1.0
@ngtools/webpack                  9.0.4
@schematics/angular               9.0.4
@schematics/update                0.900.4
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

ng update says I'm current w/ the above.

added import {MatDatepickerModule} from '@angular/material/datepicker'; and to imports array in app.module, still got the error:

ERROR in node_modules/@angular/material/datepicker/datepicker-module.d.ts:8:22 - 
error NG6002: Appears in the NgModule.imports of AppModule, but could not be 
resolved to an NgModule class.

This likely means that the library (@angular/material/datepicker) which declares
MatDatepickerModule has not been processed correctly by ngcc, or is not compatible
with Angular Ivy. Check if a newer version of the library is available, and update if so.
Also consider checking with the library's authors to see if the library is expected to be
compatible with Ivy.

8 export declare class MatDatepickerModule {

dyingangel666 commented 4 years ago

Setting importHelpers in the tsconfig solved the issues for me too. I've also setup a new library project through the CLI and the importHelpers option in the tsconfig file is also set from the CLI. So i think it's necessary ;-)

Qarun-Qadir-Bissoondial commented 4 years ago

I can confirm that I'm having the same problem that @andzejsw is having, however with a library that I created myself.

I added the "enableIvy": false option in my tsconfig.lib.json.

But if i stop the application that's using the library and restart it, then it works fine for some reason. Can also confirm that the error is not showing up when running ng build --prod

dyingangel666 commented 4 years ago

Setup a new library with a current CLI version and compare your tsconfigs. With all stuff configured correctly all is running without any problem.

Qarun-Qadir-Bissoondial commented 4 years ago

Hey @dyingangel666, based on what you said, I realized that my library was originally created with Angular Version 8. I ran ng update on it around 2-3 weeks ago and I thought everything was fine. I just realized that my peerDependencies in my library package.json was still set to ^8.2.14.

I updated them and re-built the library and now everything works smoothly. So i didn't really create a new library but i realized my stuff was outdated even after i ran ng update.

Thanks a lot man!

dyingangel666 commented 4 years ago

Yeah you're right. Had the same issues with one of my projects. Since I've seen that I prefer to update my projects manually and going through the changelog and the update docs just to make sure. Never trust a program :D

s4m0r4m4 commented 4 years ago

I just upgraded to Angular 9 (from 8) using ng update, and am hitting the same error. Whenever I run ng build or ng serve,

node_modules/@angular/material/toolbar/toolbar-module.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule
class.

This likely means that the library (@angular/material/toolbar) which declares MatToolbarModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

This happens for all of the Angular Material modules that I use (TableModule, ButtonToggleModule, ListModule, IconModule, FormFieldModule, InputModule, StepperModule, etc.). I tried adding the postinstall task to package.json as recommended by the Update Guide, restarting my computer and retrying the build --> still the same error. I have importHelpers: true in tsconfig.json.

Any idea what's going on here? My angular config as as follows (not sure why devkit is still stuck on 8.3, I followed their update guide line-by-line):

Angular CLI: 9.0.5
Node: 12.4.0
OS: win32 x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      9.1.1
@angular/material                 9.1.1
@ngtools/webpack                  9.0.5
@schematics/angular               8.3.23
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

EDIT: I fixed the issue by deleting node_modules and then redoing npm install

youssefalaoui commented 4 years ago

This error happened to me when i upgraded to angular 9.

My current config is


Angular CLI: 9.0.5
Node: 13.7.0
OS: darwin x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@angular/cdk                      9.1.2
@angular/material                 9.1.2
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

A solution would be to remove "node_modules" and perform a npm install

dyingangel666 commented 4 years ago

Not sure if it's worth to say. When something goes wrong, then the first thing is always to remove the node_modules and perform a npm install... xD

mvhk commented 4 years ago

But if i stop the application that's using the library and restart it, then it works fine for some reason.

Worked For Me Thank you!!!

VineetKanwal1 commented 4 years ago

I am also facing this issue.Following is my angular version: Angular CLI: 9.1.0-next.3 Node: 12.16.1 OS: linux x64

Angular: 9.0.6 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.900.6 @angular-devkit/build-angular 0.900.6 @angular-devkit/build-optimizer 0.900.6 @angular-devkit/build-webpack 0.900.6 @angular-devkit/core 9.0.6 @angular-devkit/schematics 9.1.0-next.3 @angular/cdk 9.1.2 @angular/cli 9.1.0-next.3 @angular/flex-layout 9.0.0-beta.29 @angular/material 9.1.2 @angular/material-moment-adapter 9.1.2 @ngtools/webpack 9.0.6 @schematics/angular 9.1.0-next.3 @schematics/update 0.901.0-next.3 rxjs 6.5.4 typescript 3.7.5 webpack 4.41.2

Getting this error on ng build and ng build --prod both: ERROR in node_modules/@angular/material/list/list.d.ts:21:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/material/list) which declares MatNavList has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

If I set enableIvy to false, then also it doesnt work. Please help.

dozer75 commented 4 years ago

I find it facinating that Angular components themselves isn't compatible with Ivy and generates errors that states that this is a fact.

Was Ivy released to early when not even the Angular project itself was able to make their own components compatible?

ng version information

Angular CLI: 9.0.6
Node: 10.15.0
OS: win32 x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.6
@angular-devkit/build-angular      0.900.6
@angular-devkit/build-optimizer    0.900.6
@angular-devkit/build-webpack      0.900.6
@angular-devkit/core               9.0.6
@angular-devkit/schematics         9.0.6
@angular/cdk                       9.1.2
@angular/material                  9.1.2
@angular/material-moment-adapter   9.1.2
@ngtools/webpack                   9.0.6
@schematics/angular                9.0.6
@schematics/update                 0.900.6
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

jasonhodges commented 4 years ago

I get the same sort of errors but with flex-layout when trying to run tests:

_NOTE: removing nodemodules and reinstalling did not resolve the issue for me

../node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class GridModule {
                       ~~~~~~~~~~
../node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class GridModule {

Angular CLI: 9.0.5
Node: 12.13.1
OS: darwin x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@angular/cdk                      9.1.1
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.1.2
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5

petebacondarwin commented 4 years ago

I think we should close this issue as it seems to me that it appears to be errors that are fixed (mostly by deleting node_modules and reinstalling). If anyone here still has a problem please create a new issue with a reproduction that I can install and debug.

jasonhodges commented 4 years ago

@petebacondarwin I've tried every single 'fix' or 'workaround' mentioned in the various issues open around this. None of which have worked. At my company we have a very large mono in which I am experiencing this issue. I will see if I can create a reproduction as I am not able to share our code.

petebacondarwin commented 4 years ago

@jasonhodges - I am sorry you are having no joy with this. I would really like to help you. Can you tell me if you make use of symlinks in your node_modules or other library folders? ngcc is not able to traverse such links so that could be why certain libraries are not being compiled...

jasonhodges commented 4 years ago

Yes, we have in our root level package.json file multiple projects listed as workspaces. This mono is not configured with a root level angular.json file nor is it a nx mono. Please let me know if you would like additional details

petebacondarwin commented 4 years ago

If you have a yarn workspace setup, can you tell if you have symlinked packages between the workspaces? Are these the errors? I really could do with a reproduction to debug.

jasonhodges commented 4 years ago

Here is the output I just received when running ng build in one of the projects listed as a workspace:

ERROR in Failed to compile entry-point @angular/flex-layout (es2015 as esm2015) due to compilation errors:
../../../shared/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../shared/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../shared/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class GridModule {
                       ~~~~~~~~~~
../../../shared/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../shared/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../shared/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class GridModule {

This project should be getting 'shared' modules from the root level node_modules directory as declared in this tsconfig path entry:

"@root_shared/*": [
        "../../../../node_modules/@spectrum-web/shared/src/app/*"
      ],

Within the project node_modules there are no symlinks to the other projects however in the root level node_modules directory there are symlinks to the various projects, which I'd expect since they are declared as workspaces in the root package.json

petebacondarwin commented 4 years ago

Let me take a look tomorrow.

jasonhodges commented 4 years ago

@petebacondarwin Thanks! Here is a repo that produces the same error with @angular/flex-layout

https://github.com/jasonhodges/issue-NG6002

Just pull it down, run yarn at root and then ng build under /alpha

petebacondarwin commented 4 years ago

@jasonhodges - this repository does not contain a dohicky.module file.

petebacondarwin commented 4 years ago

Also I had to blow away the yarn.lock file as it refers to your internal npm repository.

petebacondarwin commented 4 years ago

I changed the code to refer to the shared component instead:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DohickyComponent } from '@root_shared/dohicky/dohicky.component';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    DohickyComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This allows the build to get to the point where I think you are stuck:

yarn ng build
yarn run v1.21.1
$ ng build
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/core : es2015 as esm2015

ERROR in ../shared/src/app/dohicky/dohicky.component.ts
Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: issue-NG6002/shared/src/app/dohicky/dohicky.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (issue-NG6002/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:933:23)
    at issue-NG6002/node_modules/@ngtools/webpack/src/loader.js:41:31
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./src/app/app.module.ts 3:0-74 13:8-24 19:20-36
 @ ./src/main.ts
 @ multi ./src/main.ts
error Command failed with exit code 1.

jasonhodges commented 4 years ago

The module is there now and the yarn.lock has been deleted. That should not have been committed.

Now that the module is there you should revert the AppModule to its original state of importing the DohickyModule. Then if you run ng build within the /alpha directory you should see 3 NG6002 errors and 3 NG6003 errors. All related to @angular/flex-layout

@petebacondarwin I just read your comment here and wanted to point out that my errors area also preceded with @angular/flex-layout trying to compile:

╰─❯ ng build
0% compiling
Compiling @angular/flex-layout : es2015 as esm2015

ERROR in Failed to compile entry-point @angular/flex-layout (es2015 as esm2015) due to compilation errors:

michaelfaith commented 4 years ago

I am experiencing this same issue with a local library in mono-repo setup. I don't have any symlinks, and it only happens when I build the library with the --prod flag, and then try to build the app. When the app build gets to the component in the library it gives this error:

Compiling @fabric/components/breadcrumbs : es2015 as esm2015

ERROR in node_modules/@fabric/components/breadcrumbs/fab-breadcrumbs.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@fabric/components/breadcrumbs) which declares FabBreadcrumbsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if s
o. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class FabBreadcrumbsModule {
                       ~~~~~~~~~~~~~~~~~~~~

I've upgraded to the latest CLI and core (9.1.0), as well as the latest TypeScript (3.8.3). I tried recreating the issue with a fresh project and a single component, but was unable to reproduce. I compared the tsconfigs and angular.json from both, and they're fairly identical. Looking in the dist folder for the library in each project, the component folder in the project that's failing is missing a bunch of the __ivy_ngcc_bak files, that the working simple project has in its dist folder. So not sure if that's an indication that the library build isn't producing everything it should, or what. Oh, and this is setup using all secondary entry points. Any suggestions on how to get to the root of this?

Happy to open a new issue if you think that would be more appropriate.

michaelfaith commented 4 years ago

As a last resort i wiped out the library's folder in my node_modules dir, added "postinstall": "ngcc" to my package.json and ran npm install again. That ran ngcc on everything including my lib. The app build works after that. Is that postinstall step necessary? or does it indicate an issue with my library build? Whenever i publish the library i don't want folks to have issues consuming it. Might be best to open this as a new issue. Seems the problem might be that the app build isn't recognizing that the library build was done as viewengine and running ngcc itself?

hwebb commented 4 years ago

If this can help anybody, I got the same error with MatRipple and I (wrongly) thought that it was linked to this issue, but after disabling Ivy the error message changed to :

ERROR in Unexpected directive 'MatRipple in C:/Users/shado/Projects/world-wine/node_modules/@angular/material/core/index.d.ts' imported by the module 'AppModule in C:/Users/shado/Projects/world-wine/src/app/app.module.ts'. Please add a @NgModule annotation.

Then I realised that I was trying to import MatRipple instead of MatRippleModule. The mistake is clearly on my side, but I think the error message in Ivy was not very helpful.

dyapasrikanth commented 4 years ago

Hi all,

I just created new angular project and added material. When I am running ng build --prod it is compiling all of the material components even I am not using it. Is it expected behaviour ??

yarn run v1.21.0
$ ng build --prod
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/material/sort : es2015 as esm2015
Compiling @angular/material/badge : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/bottom-sheet : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/grid-list : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/select : es2015 as esm2015
Compiling @angular/material/autocomplete : es2015 as esm2015
Compiling @angular/material/icon/testing : es2015 as esm2015
Compiling @angular/material/chips : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/paginator : es2015 as esm2015
Compiling @angular/material/datepicker : es2015 as esm2015
Compiling @angular/material/radio : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/slider : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/material/table : es2015 as esm2015
Compiling @angular/material/stepper : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/tree : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

ng version

yarn run v1.21.0
$ ng version

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

Angular CLI: 9.1.1
Node: 10.16.3
OS: darwin x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@angular/material                 9.2.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

✨  Done in 1.26s.

The prod build took almost 50 sec.

michaelfaith commented 4 years ago

Hi all,

I just created new angular project and added material. When I am running ng build --prod it is compiling all of the material components even I am not using it. Is it expected behaviour ??

Yeah, the first build after your dependencies change, the Ivy compiler will precompile the library modules. Shouldn't do that on any subsequent builds, until your dependencies change again, and then it'll just need to compile the ones that've changed.

dozer75 commented 4 years ago

Hi all, I just created new angular project and added material. When I am running ng build --prod it is compiling all of the material components even I am not using it. Is it expected behaviour ??

Yeah, the first build after your dependencies change, the Ivy compiler will precompile the library modules. Shouldn't do that on any subsequent builds, until your dependencies change again, and then it'll just need to compile the ones that've changed.

The problem with this is that in a CI/CD environment you often clean it before starting a build and then these componentes has to be compiled all the time, that's a pity :/

I am wondering why these angular modules isn't distributed as esm2015 since it's whats Ivy works with? It would have saved a lot of issues and compile time.

petebacondarwin commented 4 years ago

We cannot yet distribute libraries compiled via ivy because the underlying ivy instruction set has not been stabilized yet. So instead we must publish them compiled via ViewEngine and then use ngcc to convert them to ivy when you install. In your CI, can you consider caching the node_modules after you have run ngcc? As long as your lockfile (yarn.lock/package-lock.json) has not changed then the output of ngcc should not change either.

michaelfaith commented 4 years ago

The problem with this is that in a CI/CD environment you often clean it before starting a build and then these componentes has to be compiled all the time, that's a pity :/

Definitely true, at least in my experience. My CI/CD builds (via Jenkins) have to do that pre-compile step every time. We have multiple build slaves, and you're never gauranteed which you'll end up with, and basically start with a clean workspace each time. It does lengthen our builds. But it's never been enough to bother me, personally.

We cannot yet distribute libraries compiled via ivy because the underlying ivy instruction set has not been stabilized yet. So instead we must publish them compiled via ViewEngine and then use ngcc to convert them to ivy when you install.

@petebacondarwin: i definitely get this logic for almost every other library that someone might distribute, but Angular 9 itself, is Ivy by default. Though i guess you can opt out of Ivy. Is that what you mean, in the case where someone's found an issue and needs to opt out of Ivy, doing it this way makes that case possible?

petebacondarwin commented 4 years ago

Opting out of ivy is definitely a use case that needs to be supported, so yes that is one reason for this approach. We could consider a dual distributable but we felt that this would add a lot more complexity to the build and cause opportunities for confusing build failures. Also we need to be forward compatible, if we offered a dual distributable, then we would need to support this going forward, even once we have stopped distributing ViewEngine, which again makes the process unduly complex.

Finally, it is worth knowing that our goal is to drop ViewEngine support and only release libraries that can be built directly with the Angular compiler (and so make ngcc obselete to a large extent). We are currently trying to work out what the most effective approach would be. It may be that we distribute pre-built ivy instructions, but it may also be a more nuanced hybrid approach... watch this space over the next few months.

grabieldelanieve commented 4 years ago

you just to have to run this: ng add @angular/localize

Lipi727 commented 4 years ago

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

Yep, I used it. It's working.

rdelormeCHS commented 4 years ago

I'm following two different threads on this as i have the same issues. But i have one project that has the issue and the other that doesn't. Could be helpful to figure out the difference, I just don't know where to look...I'm too new to angular to understand yet these inner workings. If someone wants to point into what to share here, i will do so. (https://github.com/angular/angular/issues/36060)

petebacondarwin commented 4 years ago

I think it is best @rdelormeCHS if you create a new issue and post the project that is failing - assuming that you are able to. If not perhaps you could try removing dependencies and until you get to a point where it is no longer failing.

rdelormeCHS commented 4 years ago

I think it is best @rdelormeCHS if you create a new issue and post the project that is failing - assuming that you are able to. If not perhaps you could try removing dependencies and until you get to a point where it is no longer failing.

I opened this issue 5 days ago: https://github.com/angular/components/issues/19080

There is not much to remove out. Literally, create a new project, install material, and you get the Ivy errors with ng serve. I have gone through all the json files of the 2 projects i have line by line and compared them, and compared in notepad++ but do not see any differences. I made sure to install the same versions of everything in the new project. And, any new project i create has this issue.

it works if you ng build first, then ng serve. so have to stop ng serve every time adding imports in app.module. it just points to something not working out of the box here, if having a project that works and one that doesn't helps, i will post whatever will help. Many people are reporting the issue so it is not just my environment, but somehow, my first ever angular projects works correctly. but any subsequent ones do not.

KonstantinWilson commented 4 years ago

If this can help anybody, I got the same error with MatRipple and I (wrongly) thought that it was linked to this issue, but after disabling Ivy the error message changed to :

ERROR in Unexpected directive 'MatRipple in C:/Users/shado/Projects/world-wine/node_modules/@angular/material/core/index.d.ts' imported by the module 'AppModule in C:/Users/shado/Projects/world-wine/src/app/app.module.ts'. Please add a @NgModule annotation.

Then I realised that I was trying to import MatRipple instead of MatRippleModule. The mistake is clearly on my side, but I think the error message in Ivy was not very helpful.

@hwebb OMG, I'm an idiot. Thank you!

Jadamae77 commented 4 years ago

If this can help anybody, I got the same error with MatRipple and I (wrongly) thought that it was linked to this issue, but after disabling Ivy the error message changed to :

ERROR in Unexpected directive 'MatRipple in C:/Users/shado/Projects/world-wine/node_modules/@angular/material/core/index.d.ts' imported by the module 'AppModule in C:/Users/shado/Projects/world-wine/src/app/app.module.ts'. Please add a @NgModule annotation.

Then I realised that I was trying to import MatRipple instead of MatRippleModule. The mistake is clearly on my side, but I think the error message in Ivy was not very helpful.

I made this same error. Spent almost an hour trying to fix it before I saw this. Am I the only one who wishes the documentation would give examples of the modules to import when using certain components?

michaelfaith commented 4 years ago

Am I the only one who wishes the documentation would give examples of the modules to import when using certain components?

You mean like this?

Jadamae77 commented 4 years ago

Yes, thanks so much for pointing that out to me! I am still pretty new to this.

itayperry commented 4 years ago

I also missed the 'Module' when I imported :) In addition my VSCode went crazy.. I restarted it and then all the material errors disappeared, Problem Solved.

devversion commented 4 years ago

Closing this as we have strict template checks enabled and everything passes. Ivy is official supported and we run our test suites and dev-app against it.

Please create separate issues if something comes up. Thanks!

yoni333 commented 4 years ago

If this can help anybody, I got the same error with MatRipple and I (wrongly) thought that it was linked to this issue, but after disabling Ivy the error message changed to :

ERROR in Unexpected directive 'MatRipple in C:/Users/shado/Projects/world-wine/node_modules/@angular/material/core/index.d.ts' imported by the module 'AppModule in C:/Users/shado/Projects/world-wine/src/app/app.module.ts'. Please add a @NgModule annotation.

Then I realised that I was trying to import MatRipple instead of MatRippleModule. The mistake is clearly on my side, but I think the error message in Ivy was not very helpful.

thx . you help me a lot / i made the same mistake with MatProgressSpinner instead of MatProgressSpinnerModule

angular / components

strictTemplates, Angular 9: compability with Ivy #18637

Package Version