U4-7763 - Missing AngularJS module: ngMockE2E when running local development server with Grunt

Created by Chris Perks 17 Jan 2016, 18:22:32 Updated by Shannon Deminick 10 Feb 2016, 14:55:11

What did you do?

  1. Download latest source (commit 2aa5dfb3ec50f4ddbd23c1fef24d00a6281b3fe9)
  2. Run 'grunt dev' in folder /Umbraco-CMS/src/Umbraco.Web.UI.Client/

What did you expect to happen?

Local development server should open in new browser window

What actually happened?

Browser loads blank page, on console inspection, we see error: '''angular.min.js:18 Uncaught Error: No module: ngMockE2E'''


I believe we need to reference '''lib/angular/1.1.5/angular-mocks.js'''' from '''loader.dev.js'''. I am preparing a fix and PR for this, but wanted to raise the issue here first.

Comments

Sebastiaan Janssen 18 Jan 2016, 07:16:28

Not sure why you're trying to build from source but please note that you should never build a site by building Umbraco from source. To solve this, make sure to run build.bat in the ~/build directory.


Chris Perks 18 Jan 2016, 11:17:01

Hi @sebastiaan,

Thanks for getting back to me!

I'm trying to run / debug the UI without a backend server, using the AngularJS mocks. This is for development purposes only.

It seems that everything mostly works fine, with the exception of a few dependencies missing from the dev-loader (angular-mocks, angular-mobile, bootstrap-tabdrop, underscore).

There's a dependency which hasn't been mocked - externalLoginInfo - which is generated server-side and embedded in the page during rendering.

I'm happy to contribute my time completing this mocking work, but obviously would like to know that you would welcome this contribution.

Thanks, Chris.


Arnoud de Vries 18 Jan 2016, 13:13:46

I am currently playing with the Grunt build too as I wanted to fix a CSS bug in Umbraco 7.4. I followed the docs and ran build.bat first. I too got the error about missing ngMockE2E. Then I added the following lines to loader.dev.js

'lib/angular/1.1.5/angular-mocks.js', 'lib/angular/1.1.5/angular-mobile.js', 'lib/underscore/underscore-min.js',

This at least showed the page in Chrome (still errors in Firefox, I guess because it might be loading scripts differently). But I then got the error: Unknown provider: externalLoginInfoProvider <- externalLoginInfo


Chris Perks 18 Jan 2016, 13:20:39

@arnoud

As a workaround, put this code at the bottom of '''util.mocks.js''', which will get bundled up by Grunt:

angular.module("umbraco.mocks").factory('externalLoginInfo', function () { return { errors: [], providers: [] }; } );

I'm going to mock this dependency out properly, but am waiting to hear back from the Core guys.


Arnoud de Vries 18 Jan 2016, 13:37:59

@christofur Thanks, after adding this I can browse the backoffice. It is weird though that the Grunt dev build is so broken. It appears "grunt dev" isn't used much then, which is a shame as it is probably the most optimal workflow for developing the Angular backoffice.


Chris Perks 18 Jan 2016, 13:41:23

@arnoud Agreed, it seems pretty crucial to backoffice customisation / development to me. I'm going to submit a PR with a few things fixed up and see if anyone wants to accept.


Chris Perks 18 Jan 2016, 14:50:14

Submitted [PR 1026|https://github.com/umbraco/Umbraco-CMS/pull/1026/]


Sebastiaan Janssen 18 Jan 2016, 15:10:59

I think it's because we use grunt vs instead of grunt dev, we'll have a look at the PR when we have some time!


Priority: Minor

Type: Bug

State: Fixed

Assignee:

Difficulty: Easy

Category:

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions:

Due in version: 7.4.0

Sprint: Sprint 8

Story Points:

Cycle: