Angular2 CLI 和 Angular2-adal 错误

Question

我需要实现 adal 以针对 Microsoft Windows Azure AD 进行身份验证。我正在使用 angular2 CLI 和 angular2-adal .

问题是，当我将 AdalService 添加到提供程序时会出现以下错误:

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)

这一个是:

    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

我一直在寻找可能的解决方案，但少数答案没有好的结果。

Answer 1

事实证明，Angular2-adal 库有一个错误，解决了 this library ng2-adal 中的其他人的问题。然后你需要解决命名空间的两个问题并且无法解析“adal”。我是这样解决的:

1. 命名空间:您需要添加///<reference path="../node_modules/ng2-adal/ts/adal/index.d.ts" />在typings.d.ts中

2. 无法解析'adal':您需要修改此路由node_modules/angular-cli/models/webpack-build-commond.js中的webpack文件，查找一些内容像这样:

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

您需要添加以下内容:

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

请记住，我使用的是 angular2 CLI。

如果有人知道向 webpack 添加别名的更好方法，请告诉我