ASP.NET Boilerplate Angular Project Error when npm start

Question

I use ASP.NET Boilerplate Framework that is based on .Net Core and Angular. I follow directives in this page step by step but when I run npm start I get the following error message:

ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'web-animations-js' in'D:\Project_Net\MyProjSPA\angular\src'
resolve 'web-animations-js' in 'D:\Project_Net\MyProjSPA\angular\src'
  Parsed request is a module
  using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
    resolve as module
      D:\Project_Net\MyProjSPA\angular\src\node_modules doesn't exist or is not a directory
      D:\Project_Net\MyProjSPA\node_modules doesn't exist or is not a directory
      D:\Project_Net\node_modules doesn't exist or is not a directory
      looking for modules in D:\Project_Net\MyProjSPA\angular\node_modules
        using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules)
          using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules/web-animations-js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.js doesn't exist
            as directory
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js doesn't exist
      looking for modules in D:\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\node_modules\web-animations-js doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\node_modules\web-animations-js.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\node_modules\web-animations-js.js doesn't exist
        as directory
          D:\node_modules\web-animations-js doesn't exist
      looking for modules in D:\Project_Net\MyProjSPA\angular\node_modules
        using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules)
          using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./node_modules/web-animations-js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.js doesn't exist
            as directory
              D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js doesn't exist
      looking for modules in D:\Project_Net\MyProjSPA\angular\src
        using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
          using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src/web-animations-js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js.js doesn't exist
            as directory
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js doesn't exist
      looking for modules in D:\Project_Net\MyProjSPA\angular\src
        using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src)
          using description file: D:\Project_Net\MyProjSPA\angular\package.json (relative path: ./src/web-animations-js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js.js doesn't exist
            as directory
              D:\Project_Net\MyProjSPA\angular\src\web-animations-js doesn't exist
[D:\Project_Net\MyProjSPA\angular\src\node_modules]
[D:\Project_Net\MyProjSPA\node_modules]
[D:\Project_Net\node_modules]
[D:\node_modules\package.json]
[D:\node_modules\web-animations-js\package.json]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js]
[D:\node_modules\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.ts]
[D:\node_modules\web-animations-js.ts]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.js]
[D:\node_modules\web-animations-js.js]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js]
[D:\node_modules\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.ts]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js.js]
[D:\Project_Net\MyProjSPA\angular\node_modules\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js.ts]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js.js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js.ts]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js.js]
[D:\Project_Net\MyProjSPA\angular\src\web-animations-js]
 @ ./src/polyfills.ts 36:0-27
 @ multi ./src/polyfills.ts

Here are my framework versions:

npm -v // 3.10.10
node -v // 6.11.3
tsc -v //2.5.3
ng -v // @angular/core 4.4.4
angular-cli version in `package.json` : //@angular/cli": "^1.3.2"

I think it's related to angular version or typescript version.Am I right? What should I do to resolve this problem?

aaron · Accepted Answer · 2017-10-09 12:41:28Z

2

Add this in angular/package.json:

"web-animations-js": "^2.3.1"

Uncomment this in angular/src/polyfills.ts:

import 'web-animations-js';

answered Oct 9, 2017 at 12:41

aaron

43.4k6 gold badges55 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mohammad Over a year ago

I have two web-animations-js in polyfills.ts one for IE and another for Firefox. I Uncomment web-animations-js for firefox but I still have the same error. But when I run npm install --save web-animations-js and then nmp-install the project successfully compiled. Can explain more about that

Alper Ebicoglu · Accepted Answer · 2017-10-11 06:37:21Z

1

this issue has been fixed in v3.2 release. get the latest version.

https://github.com/aspnetboilerplate/module-zero-core-template/pull/122

https://github.com/aspnetboilerplate/module-zero-core-template/releases/tag/v3.2

answered Oct 11, 2017 at 6:37

Alper Ebicoglu

9,9021 gold badge56 silver badges60 bronze badges

Collectives™ on Stack Overflow

ASP.NET Boilerplate Angular Project Error when npm start

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related