404 during unit tests when importing animations module

[danwulff]

I'm getting a 404 message while running unit tests when importing the NoopAnimationsModule (or, BrowserAnimationsModule) thus error-ing out the tests. The karma unit test config utilizes the demo app systemjs.config.js, but I think the error could be emerging due to the strange nature of how the the required animation files exist in @angular/animations and @angular/platform-browser (the later importing the former?), while also using some rewrite rules in systemjs-angular-loader.js.

Error message:

> karma start karma.conf.js --single-run

16 06 2017 13:21:54.214:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
16 06 2017 13:21:54.216:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 06 2017 13:21:54.225:INFO [launcher]: Starting browser Chrome
16 06 2017 13:21:55.725:INFO [Chrome 59.0.3071 (Windows 10 0.0.0)]: Connected on socket WKWg2WWEy082ElvkAAAA with id 29592409
16 06 2017 13:21:58.448:WARN [web-server]: 404: /base/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations                                             .js
Chrome 59.0.3071 (Windows 10 0.0.0) ERROR
  {
    "originalErr": {
      "__zone_symbol__currentTask": {
        "type": "microTask",
        "state": "notScheduled",
        "source": "Promise.then",
        "zone": "<root>",
        "cancelFn": null,
        "runCount": 0
      }
    },
    "__zone_symbol__currentTask": {
      "type": "microTask",
      "state": "notScheduled",
      "source": "Promise.then",
      "zone": "<root>",
      "cancelFn": null,
      "runCount": 0
    }
  }

Chrome 59.0.3071 (Windows 10 0.0.0) ERROR
  {
    "originalErr": {
      "__zone_symbol__currentTask": {
        "type": "microTask",
        "state": "notScheduled",
        "source": "Promise.then",
        "zone": "<root>",
        "cancelFn": null,
        "runCount": 0
      }
    },
    "__zone_symbol__currentTask": {
      "type": "microTask",
      "state": "notScheduled",
      "source": "Promise.then",
      "zone": "<root>",
      "cancelFn": null,
      "runCount": 0
    }
  }

Here's an example repo: https://github.com/danwulff/angular-quickstart-lib-animations-error -you can npm run start to see the animation added is working within the demo app -npm run test:once you will see the 404 error.

There's a chance I'm not doing something correctly. This has been working just fine for most @angular imports, but I have a hunch that the strangeness is particular to the @angular/animations reliance on @angular/platform-browser

I wish I had a little more experience using systemjs to create a workaround. Maybe @anjmao could give some guidance enough for me to put up a PR, since he introduced the systemjs-angular-loader.js functionality (I think).

[andrea-spotsoftware]

Have you updated karma-test-shim.js importing your new modules?

I think that you have to add animation module umd file in the map configuration: https://github.com/danwulff/angular-quickstart-lib-animations-error/blob/master/karma-test-shim.js#L57-L77

[danwulff]

@andrea-spotsoftware Thanks for the response. I was indeed missing the map in karma-test-shim.js. In hindsight, that should have been pretty obvious. Closing the issue.

For others that may stumble across this, I'll be deleting the above repo so to document my snafu... I had added the proper animations umd.js files to the systemjs.config.js map as so:

map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs': 'npm:rxjs',
},

But had failed to add them in the karma-test-shim.js map

Looking back at the README.md the "Testing libraries" section has one sentence about unit tests. Maybe we can add some more information in there to help clarify... but I also have mainly created Angular Apps in the CLI which is a bit more straightforward than the mapping required in this quickstart-lib. ¯\(ツ)/¯