Azure Question posted in
The official documentation to get you started can be found here.

Azure – Error comes when Installing MSAL to Angular App

Currently, I’m working on integrating Microsoft Authentication to Angular App. So, I’m following official documentation from Microsoft. Link to documentation.

According to that, I installed @azure/msal-angular and @azure/msal-browser. Then I imported those to src/app/app.module.ts like this.

  • Here is the code of app.module.ts
// For Microsoft Authentication
import {
  IPublicClientApplication,
  PublicClientApplication,
  BrowserCacheLocation,
  LogLevel,
  InteractionType,
} from '@azure/msal-browser';
import {
  MSAL_INSTANCE,
  MSAL_INTERCEPTOR_CONFIG,
  MsalInterceptorConfiguration,
  MSAL_GUARD_CONFIG,
  MsalGuardConfiguration,
  MsalBroadcastService,
  MsalService,
  MsalGuard,
  MsalRedirectComponent,
  MsalModule,
  MsalInterceptor,
} from '@azure/msal-angular';

Next I will attach code of package.json

{
  "name": "material",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle:report": "source-map-explorer dist/**/*.js"
  },
  "private": true,
  "dependencies": {
    "-": "0.0.1",
    "@angular-devkit/core": "9.0.2",
    "@angular/animations": "^9.1.4",
    "@angular/cdk": "^8.2.3",
    "@angular/cli": "^9.1.7",
    "@angular/common": "^9.0.1",
    "@angular/compiler": "9.0.1",
    "@angular/core": "^9.0.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "9.0.1",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "9.0.1",
    "@angular/platform-browser-dynamic": "9.0.1",
    "@angular/router": "9.0.1",

    "@azure/msal-angular": "^3.0.13",
    "@azure/msal-browser": "^3.10.0",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.7",
    "@angular/compiler-cli": "9.0.1",
    "@angular/language-service": "9.0.1",
    "@types/chartist": "^0.9.47",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/jquery": "^3.3.32",
    "@types/node": "^12.11.1",
    "protractor": "^7.0.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "3.7.5"
  }
}

Error is :

ERROR in node_modules/@azure/msal-common/dist/index.d.ts:13:10 - error TS1005: 'from' expected.

13 export * as AuthToken from "./account/AuthToken";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:13:13 - error TS1005: ';' expected.

13 export * as AuthToken from "./account/AuthToken";
               ~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:13:23 - error TS1005: ';' expected.

13 export * as AuthToken from "./account/AuthToken";
                         ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:13:28 - error TS1005: ';' expected.

13 export * as AuthToken from "./account/AuthToken";
                              ~~~~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:20:10 - error TS1005: 'from' expected.

20 export * as AuthorityFactory from "./authority/AuthorityFactory";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:20:13 - error TS1005: ';' expected.

20 export * as AuthorityFactory from "./authority/AuthorityFactory";
               ~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:20:30 - error TS1005: ';' expected.

20 export * as AuthorityFactory from "./authority/AuthorityFactory";
                                ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:20:35 - error TS1005: ';' expected.

20 export * as AuthorityFactory from "./authority/AuthorityFactory";
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:29:10 - error TS1005: 'from' expected.

29 export * as CacheHelpers from "./cache/utils/CacheHelpers";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:29:13 - error TS1005: ';' expected.

29 export * as CacheHelpers from "./cache/utils/CacheHelpers";
               ~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:29:26 - error TS1005: ';' expected.

29 export * as CacheHelpers from "./cache/utils/CacheHelpers";
                            ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:29:31 - error TS1005: ';' expected.

29 export * as CacheHelpers from "./cache/utils/CacheHelpers";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:84:10 - error TS1005: 'from' expected.

84 export * as AADServerParamKeys from "./constants/AADServerParamKeys";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:84:13 - error TS1005: ';' expected.

84 export * as AADServerParamKeys from "./constants/AADServerParamKeys";
               ~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:84:32 - error TS1005: ';' expected.

84 export * as AADServerParamKeys from "./constants/AADServerParamKeys";
                                  ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:84:37 - error TS1005: ';' expected.

84 export * as AADServerParamKeys from "./constants/AADServerParamKeys";
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:88:10 - error TS1005: 'from' expected.

88 export * as TimeUtils from "./utils/TimeUtils";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:88:13 - error TS1005: ';' expected.

88 export * as TimeUtils from "./utils/TimeUtils";
               ~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:88:23 - error TS1005: ';' expected.

88 export * as TimeUtils from "./utils/TimeUtils";
                         ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:88:28 - error TS1005: ';' expected.

88 export * as TimeUtils from "./utils/TimeUtils";
                              ~~~~~~~~~~~~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:89:10 - error TS1005: 'from' expected.

89 export * as UrlUtils from "./utils/UrlUtils";
            ~~
node_modules/@azure/msal-common/dist/index.d.ts:89:13 - error TS1005: ';' expected.

89 export * as UrlUtils from "./utils/UrlUtils";
               ~~~~~~~~
node_modules/@azure/msal-common/dist/index.d.ts:89:22 - error TS1005: ';' expected.

89 export * as UrlUtils from "./utils/UrlUtils";
                        ~~~~
node_modules/@azure/msal-common/dist/index.d.ts:89:27 - error TS1005: ';' expected.

89 export * as UrlUtils from "./utils/UrlUtils";
                             ~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

I have removed some unnecessary codes from this to make these codes more clear.

I tried this solution in Stackoverflow. But could not fix it. I need to clarify this error and need to know how to fix or avoid this. Thank you 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed the issue. The problem is we can not use MSAL Version 03 with Angular 9. So I installed MSAL packages - version 2 and now it's working.


  2. 0

    I followed this MS DOC, changed the app-routing.module.ts and auth-config.ts codes as given below. I successfully logged in with the Azure B2C tenant.

    Use the commands below to create the Angular project and install the msal and material packages.

    ng new msal-angular --routing=true --style=css --strict=false --no-standalone

npm install @azure/msal-browser @azure/msal-angular

npm install @angular/material @angular/cdk

    Note: The styles.css code from the above MS DOC gives errors. As it is optional, I didn’t use it in my Angular project.

    Code :

    src/app/app-routing.module.ts :

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { WebapiComponent } from './webapi/webapi.component';

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [MsalGuard]
  },
  {
    path: 'webapi',
    component: WebapiComponent,
    canActivate: [MsalGuard]
  },
  {
    path: '',
    component: HomeComponent
  }
];

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

    src/app/auth-config.ts :

    import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isBrowser = typeof window !== 'undefined';
const isIE = isBrowser && /(MSIE|Trident/|Edge/)/i.test(window.navigator.userAgent);

const b2cPolicies = {
    names: {
        signUpSignIn: "<signUpSignIn_policy_name>",
        editProfile: "<editProfile_policy_name>"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://<tenant_name>.b2clogin.com/<tenant_name>.onmicrosoft.com/<signUpSignIn_policy_name>",
        },
        editProfile: {
            authority: "https://<tenant_name>.b2clogin.com/<tenant_name>.onmicrosoft.com/<editProfile_policy_name>"
        }
    },
    authorityDomain: "<tenant_name>.b2clogin.com"
};

const msalConfig: Configuration = {
    auth: {
        clientId: '<client_ID>',
        authority: isBrowser ? b2cPolicies.authorities.signUpSignIn.authority : '',
        knownAuthorities: isBrowser ? [b2cPolicies.authorityDomain] : [],
        redirectUri: isBrowser ? '/' : '',
    },
    cache: {
        cacheLocation: isBrowser ? BrowserCacheLocation.LocalStorage : null,
        storeAuthStateInCookie: isBrowser && isIE,
    },
    system: {
        loggerOptions: {
            loggerCallback: (logLevel, message, containsPii) => {
                console.log(message);
            },
            logLevel: LogLevel.Verbose,
            piiLoggingEnabled: false
        }
    }
};

const protectedResources = {
    todoListApi: {
        endpoint: "http://localhost:5000/api/todolist",
        scopes: ["https://<tenant_name>.onmicrosoft.com/api/tasks.read"],
    },
};
const loginRequest = {
    scopes: []
};
export { msalConfig, protectedResources, loginRequest };

    package.json :

    {
  "name": "msal-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:msal-angular": "node dist/msal-angular/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.0",
    "@azure/msal-angular": "^3.0.13",
    "@azure/msal-browser": "^3.10.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

    I added the Angular output URL in the B2C app Authentication as below.

    http://localhost:4200/

    enter image description here

    I enabled the scope for the B2C tenant as below.

    enter image description here

    I granted openid, offline_access, and the (scope) tasks.read in B2C app API permissions as below.

    enter image description here

    Output :

    The following Angular project ran successfully, as shown below:

    enter image description here
    enter image description here

    Browser output :

    I received the output below in the browser with the Angular output URL. Then, I clicked on the Login button, as shown below:

    enter image description here

    I entered my account details for login and clicked on the Sign in button, as shown below:

    enter image description here

    After successfully logging in, I clicked on Profile, as shown below:

    enter image description here

    I viewed my profile details and clicked on Web API, as shown below:

    enter image description here
    enter image description here

    I saw the following in the Web API and clicked on the Logout button to log out, as shown below.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search