Issue with Angular 9

[VBobCat]

For those willing to reproduce the problem, I have done only this:

1. created a new project with ng new (myproject);
2. installed Angular Material with ng add @angular/material ;
3. created two components and its routes;
4. installed this library with npm i adal-angular4;
5. updated app.module.ts and app-routing.module.ts exactly as directed in this project's README.md;

This was enough to make my browser, previously showing only "LandingPageComponent works", to get all blank and the error below to be shown in browser's console:

Error: "Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping."

These are the specs of my project:

Angular CLI: 9.1.0
Node: 13.7.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/material                 9.2.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

package.json:

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/localize": "^9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "adal-angular4": "^4.0.12",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { MatIconModule } from '@angular/material/icon';
import { registerLocaleData } from '@angular/common';
import ptBr from '@angular/common/locales/pt';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { MainPageComponent } from './main-page/main-page.component';
import { AdalGuard, AdalInterceptor, AdalService } from 'adal-angular4';

registerLocaleData(ptBr);

@NgModule({
    declarations: [
        AppComponent,
        LandingPageComponent,
        MainPageComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MatToolbarModule,
        MatButtonModule,
        MatIconModule,
    ],
    providers: [
        {provide: LOCALE_ID, useValue: 'pt-BR'},
        AdalService,
        AdalGuard,
        {provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { MainPageComponent } from './main-page/main-page.component';
import { AdalGuard } from 'adal-angular4';

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'portal'},
    {path: 'portal', component: LandingPageComponent},
    {path: 'main', component: MainPageComponent, canActivate: []},
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

What can I do in order to make it work? Thank you guys already...

[ectalactus]

https://github.com/benbaran/adal-angular4/issues/141

It's the same problem... for the moment disabled Ivy in tsconfig.json

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }

[VBobCat]

https://github.com/benbaran/adal-angular4/issues/141

It's the same problem... for the moment disabled Ivy in tsconfig.json

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }

Thank you, @ectalactus, that worked for me, too.

[martinvillysson]

Might be related to this https://github.com/angular/angular/issues/35788 which can be solved with this: https://github.com/angular/angular/issues/35788#issuecomment-605631297

[benbaran]

Hey all. I am working on updating this for angular 9. Stay tuned.

Sent from my iPhone

On Apr 2, 2020, at 8:27 AM, martinvillysson notifications@github.com wrote:

 Might be related to this angular/angular#35788 which can be solved with this: angular/angular#35788 (comment)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ectalactus]

Hey all. I am working on updating this for angular 9. Stay tuned. … Sent from my iPhone On Apr 2, 2020, at 8:27 AM, martinvillysson @.***> wrote:  Might be related to this angular/angular#35788 which can be solved with this: angular/angular#35788 (comment) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Many Thanks Benbaran

[benbaran]

I published version 9.0.0-beta.0 on npm if you would like to give it a try.

Sent from my iPhone

On Apr 2, 2020, at 11:57 AM, ectalactus notifications@github.com wrote:

 Hey all. I am working on updating this for angular 9. Stay tuned. … Sent from my iPhone On Apr 2, 2020, at 8:27 AM, martinvillysson @.***> wrote:  Might be related to this angular/angular#35788 which can be solved with this: angular/angular#35788 (comment) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Many Thanks Benbaran

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ectalactus]

It's work for me with version 9.0.0-beta.0. But it's normal to have a dependency to "adal-angular" ? I have test with "adal-angular": "~1.0.17"

Regards

[benbaran]

Yes, adal-angular is the normal Javascript library that this one wraps so it will work with Angular. It used to be included as a direct dependency so it would get installed automatically, but now they are recommending using peer dependencies instead.

On Thu, Apr 2, 2020 at 2:15 PM ectalactus notifications@github.com wrote:

It's work for me with version 9.0.0-beta.0. But it's normal to have a dependency to "adal-angular" ? I have test with "adal-angular": "~1.0.17"

Regards

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/benbaran/adal-angular4/issues/142#issuecomment-608052617, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGOS5VUBQRVEMZQIJJSP3KDRKTP33ANCNFSM4LZUSPXA .

[mattmelton]

FWIW the module format also causes issues with Jest - I have to work around it via this hack: https://github.com/kulshekhar/ts-jest/issues/970#issuecomment-463636388

[benbaran]

Thanks for letting me know. Have you tried the version 9 beta? It provides all the formats.

Sent from my iPhone

On May 6, 2020, at 8:31 AM, Matt Melton notifications@github.com wrote:

 FWIW the module format also causes issues with Jest - I have to work around it via this hack: kulshekhar/ts-jest#970 (comment)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[johanroug]

looking foreward to a version 9 stable version. We are also upgrading our Angular applications, and ran in to the same issue

[benbaran]

Did you try to test with the beta? If everything is working fine I can release a stable version.

Sent from my iPhone

On May 14, 2020, at 9:45 AM, Johan Roug notifications@github.com wrote:

 looking foreward to a version 9 stable version. We are also upgrading our Angular applications, and ran in to the same issue

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[VBobCat]

Hello, @benbaran! I've noticed that now I have to manually install adal-angular via npm after installing adal-angular4. Previous versions would get it as a dependency, I guess?

[benbaran]

Yes. NPM now recommends adding it as a peer dependency instead. I will update the documentation.

Thanks!

Sent from my iPhone

On May 15, 2020, at 9:08 AM, VBobCat notifications@github.com wrote:

 Hello, @benbaran! I've noticed that now I have to manually install adal-angular via npm after installing adal-angular4. Previous versions would get it as a dependency, I guess?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[VBobCat]

Yes. NPM now recommends adding it as a peer dependency instead. I will update the documentation. Thanks! … Sent from my iPhone On May 15, 2020, at 9:08 AM, VBobCat @.***> wrote:  Hello, @benbaran! I've noticed that now I have to manually install adal-angular via npm after installing adal-angular4. Previous versions would get it as a dependency, I guess? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Thank you. I've found no more issues with Ivy after upgrading to version 9.0.0-beta.0 so I'm closing this issue.