Local build of mirage not displaying UI elements

[reedv]

OS: Linux mint 18.2 node version: v7.10.1 npm version: 4.2.0

Trying to build locally using current instructions. This is the output that I see:

➜  mirage git:(master) npm install

 mirage@0.7.0 postinstall /home/reedv/mirage
 typings install

typings WARN deprecated 11/21/2016: "registry:dt/node#6.0.0+20160621231320" is deprecated (updated, replaced or removed)
typings WARN deprecated 10/25/2016: "registry:dt/jasmine#2.2.0+20160621224255" is deprecated (updated, replaced or removed)
typings WARN deprecated 9/14/2016: "registry:dt/core-js#0.0.0+20160602141332" is deprecated (updated, replaced or removed)

├── core-js (global)
├── jasmine (global)
└── node (global)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN @angular/core@2.0.2 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/http@2.0.2 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN angular-in-memory-web-api@0.1.17 requires a peer of rxjs@5.0.0-rc.4 but none was installed.
npm WARN angular-in-memory-web-api@0.1.17 requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN browserify-shim@2.0.10 requires a peer of browserify@>= 2.3.0 < 4 but none was installed.
npm WARN mirage@0.7.0 No repository field.

Continuing through the installation steps I see output...

➜  mirage git:(master) bower install
bower cached        https://github.com/farhan687/urlsafe-base64.git#1.1.1
bower validate      1.1.1 against https://github.com/farhan687/urlsafe-base64.git#*
bower cached        https://github.com/twbs/bootstrap.git#3.3.7
bower validate      3.3.7 against https://github.com/twbs/bootstrap.git#~3.3.6
bower cached        https://github.com/FortAwesome/Font-Awesome.git#4.5.0
bower validate      4.5.0 against https://github.com/FortAwesome/Font-Awesome.git#~4.5.0
bower cached        https://github.com/ivaynberg/select2.git#4.0.3
bower validate      4.0.3 against https://github.com/ivaynberg/select2.git#~4.0.1
bower cached        https://github.com/components/codemirror.git#5.27.4
bower validate      5.27.4 against https://github.com/components/codemirror.git#^5.14.2
bower cached        https://github.com/moment/moment.git#2.13.0
bower validate      2.13.0 against https://github.com/moment/moment.git#2.13.0
bower cached        https://github.com/brix/crypto-js.git#3.1.9
bower validate      3.1.9 against https://github.com/brix/crypto-js.git#^3.1.6
bower cached        https://github.com/jquery/jquery-dist.git#2.2.4
bower validate      2.2.4 against https://github.com/jquery/jquery-dist.git#~2.2.4
bower cached        https://github.com/auth0/auth0.js.git#7.6.1
bower validate      7.6.1 against https://github.com/auth0/auth0.js.git#^7.3.0
bower cached        https://github.com/nmrugg/LZMA-JS.git#2.3.0
bower validate      2.3.0 against https://github.com/nmrugg/LZMA-JS.git#^2.3.0
bower cached        https://github.com/jquery/jquery-dist.git#2.2.4
bower validate      2.2.4 against https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower new           version for https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower resolve       https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower download      https://github.com/jquery/jquery-dist/archive/3.2.1.tar.gz
bower extract       jquery#1.9.1 - 3 archive.tar.gz
bower resolved      https://github.com/jquery/jquery-dist.git#3.2.1
bower install       urlsafe-base64#1.1.1
bower install       codemirror#5.27.4
bower install       font-awesome#4.5.0
bower install       select2#4.0.3
bower install       crypto-js#3.1.9
bower install       bootstrap#3.3.7
bower install       jquery#2.2.4
bower install       auth0.js#7.6.1
bower install       moment#2.13.0
bower install       lzma#2.3.0

urlsafe-base64#1.1.1 bower_components/urlsafe-base64

codemirror#5.27.4 bower_components/codemirror

font-awesome#4.5.0 bower_components/font-awesome

select2#4.0.3 bower_components/select2

crypto-js#3.1.9 bower_components/crypto-js

bootstrap#3.3.7 bower_components/bootstrap
└── jquery#2.2.4

jquery#2.2.4 bower_components/jquery

auth0.js#7.6.1 bower_components/auth0.js

moment#2.13.0 bower_components/moment

lzma#2.3.0 bower_components/lzma
➜  mirage git:(master) npm start

> mirage@0.7.0 start /home/reedv/mirage
> tsc && concurrently "npm run tsc:w" "npm run lite" "gulp watch" 

[0] 
[0] > mirage@0.7.0 tsc:w /home/reedv/mirage
[0] > tsc -w
[0] 
[1] 
[1] > mirage@0.7.0 lite /home/reedv/mirage
[1] > lite-server
[1] 
[2] [14:34:42] 
[2] Using gulpfile ~/mirage/gulpfile.js
[2] [14:34:42] 
[2] Starting 'sass'...
[2] [14:34:42] 
[2] Starting 'vendorcss'...
[2] [14:34:42] 
[2] Starting 'vendorjs'...
[2] [14:34:42] 
[2] Starting 'customjs'...
[2] [14:34:42] 
[2] Starting 'movefonts'...
[2] [14:34:42] 
[2] Starting 'move_js_depends'...
[2] [14:34:42] 
[2] Starting 'watchfiles'...
[2] [14:34:42] 
[2] Finished 'watchfiles' after 45 ms
[2] [14:34:43] 
[2] Finished 'customjs' after 314 ms
[2] [14:34:43] 
[2] Finished 'move_js_depends' after 311 ms
[2] [14:34:43] 
[2] Finished 'vendorcss' after 432 ms
[2] [14:34:43] Finished 'movefonts' after 372 ms
[2] [14:34:43] Finished 'sass' after 562 ms
[2] [14:34:43] Starting 'customcss'...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ '*', '*/*.js', '**/*.js' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] },
[1]   port: 3030,
[1]   ui: { port: 3031 } }
[1] [Browsersync] Access URLs:
[1]  ----------------------------------
[1]        Local: http://localhost:3030
[1]     External: http://10.0.2.15:3030
[1]  ----------------------------------
[1]           UI: http://localhost:3031
[1]  UI External: http://10.0.2.15:3031
[1]  ----------------------------------
[1] [Browsersync] Serving files from: ./
[1] [Browsersync] Watching files...

When the mirage tab opens in my default browser (chrome) I see this:

which is missing most of the UI elements.

Here is a copy/paste of the console output:

:3030/node_modules/@angular/core//bundles/core.umd.js:3370 EXCEPTION: App name is not present in options.
ErrorHandler.handleError @ :3030/node_modules/@angular/core//bundles/core.umd.js:3370
:3030/node_modules/@angular/core//bundles/core.umd.js:3375 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ :3030/node_modules/@angular/core//bundles/core.umd.js:3375
:3030/node_modules/@angular/core//bundles/core.umd.js:3376 Error: App name is not present in options.
    at new y (http://localhost:3030/dist/js/vendor.min.js:6:17236)
    at AppbaseService.setAppbase (http://localhost:3030/app/shared/appbase.service.js:38:27)
    at AppbaseService.getIndices (http://localhost:3030/app/shared/appbase.service.js:131:14)
    at AppComponent.getIndices (http://localhost:3030/app/app.component.js:136:46)
    at AppComponent.EsSpecific (http://localhost:3030/app/app.component.js:131:14)
    at AppComponent.configCb (http://localhost:3030/app/app.component.js:87:22)
    at AppComponent.detectConfig (http://localhost:3030/app/app.component.js:115:20)
    at AppComponent.ngOnInit (http://localhost:3030/app/app.component.js:81:14)
    at _View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:41:81)
    at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:3030/node_modules/@angular/core//bundles/core.umd.js:9470:18)
ErrorHandler.handleError @ :3030/node_modules/@angular/core//bundles/core.umd.js:3376
vendor.min.js:3 Unhandled Promise rejection: App name is not present in options. ; Zone: <root> ; Task: Promise.then ; Value: Error: App name is not present in options.
    at new y (http://localhost:3030/dist/js/vendor.min.js:6:17236)
    at AppbaseService.setAppbase (http://localhost:3030/app/shared/appbase.service.js:38:27)
    at AppbaseService.getIndices (http://localhost:3030/app/shared/appbase.service.js:131:14)
    at AppComponent.getIndices (http://localhost:3030/app/app.component.js:136:46)
    at AppComponent.EsSpecific (http://localhost:3030/app/app.component.js:131:14)
    at AppComponent.configCb (http://localhost:3030/app/app.component.js:87:22)
    at AppComponent.detectConfig (http://localhost:3030/app/app.component.js:115:20)
    at AppComponent.ngOnInit (http://localhost:3030/app/app.component.js:81:14)
    at _View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:41:81)
    at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:3030/node_modules/@angular/core//bundles/core.umd.js:9470:18) Error: App name is not present in options.
    at new y (http://localhost:3030/dist/js/vendor.min.js:6:17236)
    at AppbaseService.setAppbase (http://localhost:3030/app/shared/appbase.service.js:38:27)
    at AppbaseService.getIndices (http://localhost:3030/app/shared/appbase.service.js:131:14)
    at AppComponent.getIndices (http://localhost:3030/app/app.component.js:136:46)
    at AppComponent.EsSpecific (http://localhost:3030/app/app.component.js:131:14)
    at AppComponent.configCb (http://localhost:3030/app/app.component.js:87:22)
    at AppComponent.detectConfig (http://localhost:3030/app/app.component.js:115:20)
    at AppComponent.ngOnInit (http://localhost:3030/app/app.component.js:81:14)
    at _View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:41:81)
    at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:3030/node_modules/@angular/core//bundles/core.umd.js:9470:18)
r @ vendor.min.js:3
vendor.min.js:3 Error: Uncaught (in promise): Error: App name is not present in options.
Error: App name is not present in options.
    at new y (http://localhost:3030/dist/js/vendor.min.js:6:17236)
    at AppbaseService.setAppbase (http://localhost:3030/app/shared/appbase.service.js:38:27)
    at AppbaseService.getIndices (http://localhost:3030/app/shared/appbase.service.js:131:14)
    at AppComponent.getIndices (http://localhost:3030/app/app.component.js:136:46)
    at AppComponent.EsSpecific (http://localhost:3030/app/app.component.js:131:14)
    at AppComponent.configCb (http://localhost:3030/app/app.component.js:87:22)
    at AppComponent.detectConfig (http://localhost:3030/app/app.component.js:115:20)
    at AppComponent.ngOnInit (http://localhost:3030/app/app.component.js:81:14)
    at _View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:41:81)
    at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:3030/node_modules/@angular/core//bundles/core.umd.js:9470:18)
    at new y (http://localhost:3030/dist/js/vendor.min.js:6:17236)
    at AppbaseService.setAppbase (http://localhost:3030/app/shared/appbase.service.js:38:27)
    at AppbaseService.getIndices (http://localhost:3030/app/shared/appbase.service.js:131:14)
    at AppComponent.getIndices (http://localhost:3030/app/app.component.js:136:46)
    at AppComponent.EsSpecific (http://localhost:3030/app/app.component.js:131:14)
    at AppComponent.configCb (http://localhost:3030/app/app.component.js:87:22)
    at AppComponent.detectConfig (http://localhost:3030/app/app.component.js:115:20)
    at AppComponent.ngOnInit (http://localhost:3030/app/app.component.js:81:14)
    at _View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:41:81)
    at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:3030/node_modules/@angular/core//bundles/core.umd.js:9470:18)
    at c (http://localhost:3030/dist/js/vendor.min.js:3:26602)
    at http://localhost:3030/dist/js/vendor.min.js:3:26352
    at e.invoke (http://localhost:3030/dist/js/vendor.min.js:3:31485)
    at n.run (http://localhost:3030/dist/js/vendor.min.js:3:28872)
    at http://localhost:3030/dist/js/vendor.min.js:3:26974
    at e.invokeTask (http://localhost:3030/dist/js/vendor.min.js:4:110)
    at n.runTask (http://localhost:3030/dist/js/vendor.min.js:3:29474)
    at o (http://localhost:3030/dist/js/vendor.min.js:3:26062)
    at XMLHttpRequest.invoke (http://localhost:3030/dist/js/vendor.min.js:4:1263)
r @ vendor.min.js:3
185000306?title=0&byline=0&portrait=0:1 Refused to load the script 'data:application/javascript;base64,KGZ1bmN0aW9uKCkgewoJdmFyIG5vb3BmbiA9IGZ1bmN0aW9uKCkgewoJCTsKCX07CgkvLwoJdmFyIEdhcSA9IGZ1bmN0aW9uKCkgewoJCTsKCX07CglHYXEucHJvdG90eXBlLk5hID0gbm9vcGZuOwoJR2FxLnByb3RvdHlwZS5PID0gbm9vcGZuOwoJR2FxLnByb3RvdHlwZS5TYSA9IG5vb3BmbjsKCUdhcS5wcm90b3R5cGUuVGEgPSBub29wZm47CglHYXEucHJvdG90eXBlLlZhID0gbm9vcGZuOwoJR2FxLnByb3RvdHlwZS5fY3JlYXRlQXN5bmNUcmFja2VyID0gbm9vcGZuOwoJR2FxLnByb3RvdHlwZS5fZ2V0QXN5bmNUcmFja2VyID0gbm9vcGZuOwoJR2FxLnByb3RvdHlwZS5fZ2V0UGx1Z2luID0gbm9vcGZuOwoJR2FxLnByb3Rv...ZuOwoJR2F0LnByb3RvdHlwZS5oYiA9IG5vb3BmbjsKCUdhdC5wcm90b3R5cGUubGEgPSBub29wZm47CglHYXQucHJvdG90eXBlLm9hID0gbm9vcGZuOwoJR2F0LnByb3RvdHlwZS5wYSA9IG5vb3BmbjsKCUdhdC5wcm90b3R5cGUudSA9IG5vb3BmbjsKCXZhciBnYXQgPSBuZXcgR2F0KCk7Cgl3aW5kb3cuX2dhdCA9IGdhdDsKCS8vCgl2YXIgZ2FxID0gbmV3IEdhcSgpOwoJKGZ1bmN0aW9uKCkgewoJCXZhciBhYSA9IHdpbmRvdy5fZ2FxIHx8IFtdOwoJCWlmICggQXJyYXkuaXNBcnJheShhYSkgKSB7CgkJCXdoaWxlICggYWFbMF0gKSB7CgkJCQlnYXEucHVzaChhYS5zaGlmdCgpKTsKCQkJfQoJCX0KCX0pKCk7Cgl3aW5kb3cuX2dhcSA9IGdhcS5xZiA9IGdhcTsKfSkoKTs=' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".

[svanschalkwyk]

I'm seeing the same thing. Not rendering on Opera, Chrome. Any developments on this?

[MehdiFal]

@reedv @svanschalkwyk I was facing the same thing. then I run the following steps and it started working:

npm cache clean
rm -rf node_modules
npm install
npm -g install bower
bower install
npm start

[svanschalkwyk]

Thanks! Will try it again, although I built it from source initially. S

[siddharthlatest]

@MehdiFal Thanks, I can confirm that the local build works fine on OS X and Node v7.5.0.

[siddharthlatest]

With the yarn.lock file, this should be resolved now. Also, I encourage using the Docker image instead unless you are looking to contribute to the project. :-)