angular2 CLI and angular2-adal error

Question

I need to implement adal for authentication against Microsoft Windows Azure AD. I´m using angular2 CLI and angular2-adal.

The problem is that when I add the AdalService to the providers gives this error:

Uncaught Error: Cannot find module "adal"
at webpackMissingModule (adal.service.js:20)
at Object.<anonymous> (adal.service.js:20)
at __webpack_require__ (bootstrap dd353fe…:52)
at Object.<anonymous> (services.js:8)
at __webpack_require__ (bootstrap dd353fe…:52)
at Object.<anonymous> (core.js:12)
at __webpack_require__ (bootstrap dd353fe…:52)
at Object.638 (create-users.component.ts:15)
at __webpack_require__ (bootstrap dd353fe…:52)
at Object.647 (header.component.ts:47)

and this one to:

    client?93b6:80./~/angular2-adal/services/adal.service.js
Module not found: Error: Can't resolve 'adal' in 'D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\angular2-adal\services'
resolve 'adal' in 'D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\angular2-adal\services'
  Parsed request is a module
  using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\angular2-adal\package.json (relative path: ./services)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\angular2-adal\package.json (relative path: ./services)
    resolve as module
      looking for modules in D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src
        using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./src)
          using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./src/adal)
            as directory
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal.js doesn't exist
      looking for modules in D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules
        using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./node_modules)
          using description file: D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\package.json (relative path: ./node_modules/adal)
            as directory
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal.js doesn't exist
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal.ts]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\src\adal.js]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal.ts]
[D:\Git\SistecreditoTutoriales\SistecreditoTutoriales\src\TutorialesWeb\node_modules\adal.js]

 @ ./~/angular2-adal/services/adal.service.js 20:14-29
 @ ./~/angular2-adal/services.js
 @ ./~/angular2-adal/core.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

I have been searching for possible solutions, but the few answers has no good results.

Answer 1

Turns out that the library angular2-adal has an error that solve other guy in this library ng2-adal. Then you need to solve 2 problems namespace and can´t resolve 'adal'. And I solved it this way:

1. namespace: you need to add ///<reference path="../node_modules/ng2-adal/ts/adal/index.d.ts" /> in typings.d.ts

2. Can´t resolve 'adal': You need to modify a webpack file in this route node_modules/angular-cli/models/webpack-build-commond.js, look for something like this:

       resolve:{
          extensions: ['.ts', '.js'],
          modules: [nodeModules],
       },
   

and you need to add this:

alias: { 'adal': 'adal-angular' }

Remember that I use angular2 CLI.

If any one knows a better way to add alias to the webpack please let me know

Answer 2

try installing adal-ts:

npm install adal-ts --save

It is basically a rewrite of adal.js in typescript.