Coder Social home page Coder Social logo

fountainjs / generator-fountain-angular1 Goto Github PK

View Code? Open in Web Editor NEW
95.0 9.0 34.0 505 KB

Yeoman 'fountain' generator to start a webapp with Angular 1

Home Page: http://fountainjs.io

License: MIT License

JavaScript 52.64% CSS 7.23% HTML 5.55% TypeScript 34.59%
yeoman yeoman-generator fountain angular gulp

generator-fountain-angular1's People

Contributors

delapouite avatar micaelmbagira avatar profitwarning avatar slashgear avatar swiip avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

generator-fountain-angular1's Issues

Get 404 error in index.css

Description

I installed yo and was using the cli I to creating the hello world project. When I run the npm run serve it runs on port 3000 but the index.css is not delivered. I havegulp installed globally on version CLI version 3.9.1 and Local version 4.0.0-alpha.2

Error Message & Stack Trace

when a change the index.scss to index.css I have this error

λ npm run serve

> @ serve C:\Users\ronai\Desktop\getting-start-Angular-1-5
> gulp serve

[11:12:30] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\browsersync.js
[11:12:30] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\build.js
[11:12:50] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\inject.js
[11:12:50] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\karma.js
[11:12:52] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\misc.js
[11:12:52] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\partials.js
[11:12:52] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\scripts.js
[11:12:55] Loading C:\Users\ronai\Desktop\getting-start-Angular-1-5\gulp_tasks\styles.js
[11:12:55] Using gulpfile ~\Desktop\getting-start-Angular-1-5\gulpfile.js
[11:12:55] Starting 'serve'...
[11:12:55] Starting 'inject'...
[11:12:55] Starting 'styles'...
[11:12:55] Starting 'scripts'...
[11:12:56] 'styles' errored after 558 ms
[11:12:56] Error: File not found with singular glob: C:\Users\ronai\Desktop\getting-start-Angular-1-5\src\index.scss
    at Glob.<anonymous> (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\index.js:41:11)
    at Glob.g (events.js:291:16)
    at emitOne (events.js:96:13)
    at Glob.emit (events.js:188:7)
    at Glob._finish (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:172:8)
    at done (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:159:12)
    at Glob._processSimple2 (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:652:12)
    at C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:640:10
    at Glob._stat2 (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:736:12)
    at lstatcb_ (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\glob-stream\node_modules\glob\glob.js:728:12)
    at RES (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\inflight\inflight.js:31:16)
    at f (C:\Users\ronai\Desktop\getting-start-Angular-1-5\node_modules\once\once.js:25:25)
    at FSReqWrap.oncomplete (fs.js:123:15)
[11:12:56] 'inject' errored after 568 ms
[11:12:56] 'serve' errored after 574 ms
[11:12:56] The following tasks did not complete: scripts
[11:12:56] Did you forget to signal async completion?

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ serve: `gulp serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ serve script 'gulp serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\ronai\Desktop\getting-start-Angular-1-5\npm-debug.log

but when I leave it the default way I have no error on cmd but on page dont appear nothing and the console says tha the index.css are not delivered

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "resolved": "C:\\Users\\ronai\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "framework": "angular1",
      "modules": "inject",
      "css": "scss",
      "js": "js",
      "ci": [],
      "sample": "hello",
      "router": "uirouter"
    }
  }
}

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

Node.js v6.9.1

win32 10.0.14393

yo --version
1.8.5

npm --version
3.10.8

Missing Code Coverage

Tests are running, coverage is built, but no files show in the coverage report.

Node.js v6.2.1
win32 10.0.14936
yo 1.8.5
npm 3.9.0

.yo-rc.json
{
"generator-fountain-angular1": {
"version": "1.0.0-rc1",
"props": {
"resolved": "C:\Users\adstep\AppData\Roaming\npm\node_modules\generator-fountain-angular1\generators\app\index.js",
"namespace": "fountain-angular1:app",
"argv": {
"remain": [],
"cooked": [],
"original": []
},
"framework": "angular1",
"modules": "webpack",
"css": "scss",
"js": "typescript",
"ci": [],
"sample": "hello",
"router": "uirouter"
}
}
}

Fountain-Angular1 Gulp tasks add an extra /src/ directory during build, breaking local copy of the app

Hi everyone,

Didn't see anyone on Slack so I'll open a issue here. I'm having a problem with Gulp-inject I believe. I just grabbed a brand new install of this generator, and during

npm run serve

The files get copied to .tmp as intended, but then another "src" directory is added before the app's code.

fountain-angular1/.tmp/src/index.html

instead of

fountain-angular1/.tmp/index.html

Upgrading and downgrading gulp versions appear to have no affect. Changing the gulp tasks, I can get one or two files in the correct directory, but the structure gets flattened. That issue is mostly my inexperience with gulp task writing, but out of the box the issue remains.

This issue is affecting an Angular app in active development as well as a brand new Yo. This leads me to believe some dependency got updated, and now needs a new "Base" attribute to SOME gulp task or pipe. Oddly, a prototype app from a few months ago builds just fine. Copy the whole project to another folder on my machine, install and build it - and the new "/src" issue appears. No changes to package.json.

Here's my .yo-rc.json as requested.

{
  "generator-fountain-angular1": {
    "version": "0.6.0",
    "props": {
      "resolved": "C:\\Users\\Mechau\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "skip-cache": false,
      "skip-install": false,
      "framework": "angular1",
      "modules": "inject",
      "css": "scss",
      "js": "babel",
      "sample": "hello",
      "router": "uirouter"
    }
  }
}

Node,js v5.11.0 and win32 10.0.14393, yo version 1.8.5, npm version 3.10.9

Thanks everyone!

Problem on 404 techs.json on a new project ( dist/src )

Description

I've created a new project (angular1, webpack, typescript, css, routeUI, jenkins) and i've tried the command gulp build (or gulp serve:build)

Error Message & Stack Trace

When i run the dist webapp i've a 404 on techs.json. It try to GET /app/techs/techs.json, but the techs.json is into folder /src/app/techs/techs.json

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "0.7.2",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "typescript",
      "ci": [
        "jenkins"
      ],
      "css": "css",
      "resolved": "C:\\Users\\Chklang\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-webapp\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Relevant Links

(My project is not yet commited because it's for the initialization)

Environment

Node.js v4.4.6
win32 6.1.7601
yo --version : 1.8.5
npm --version : 
{ npm: '4.0.5',
  ares: '1.10.1-DEV',
  http_parser: '2.5.2',
  icu: '56.1',
  modules: '46',
  node: '4.4.6',
  openssl: '1.0.2h',
  uv: '1.8.0',
  v8: '4.5.103.36',
  zlib: '1.2.8' }

I use npm3, and i've done "npm3 install -g yo generator-fountain-webapp" before the creation of the application.

component subgenerator breaks production build with webpack

Prerequisites

The fountain-angular1:component subgenerator creates something like this:

class MainWrapperController {
  constructor() {
    this.text = 'MainWrapper!';
  }
}

export const mainWrapper = {
  templateUrl: 'app/containers/MainWrapper.html',
  controller: MainWrapperController
};

Description

Webpack doesnt parse the templateUrl in above code sample and it doesn't bundle the template file thus serve:dist doesn't work properly (errors below).
The correct code should look like this:

import tpl from './MainWrapper.html';

class MainWrapperController {
  constructor() {
    this.text = 'MainWrapper!';
  }
}

export const mainWrapper = {
  template: tpl,
  controller: MainWrapperController
};

Error Message & Stack Trace

GET http://localhost:3000/app/containers/MainWrapper.html 404 (Not Found)
Error: [$compile:tpload] Failed to load template: app/containers/MainWrapper.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.8/$compile/tpload?p0=app%2Fcontainers%2FMainWrapper.html&p1=404&p2=Not%20Found
    at vendor-80bbc66….js:21
    at handleError (vendor-80bbc66….js:25)
    at processQueue (vendor-80bbc66….js:25)
    at vendor-80bbc66….js:25
    at Scope.$eval (vendor-80bbc66….js:25)
    at Scope.$digest (vendor-80bbc66….js:25)
    at Scope.$apply (vendor-80bbc66….js:25)
    at done (vendor-80bbc66….js:24)
    at completeRequest (vendor-80bbc66….js:24)
    at XMLHttpRequest.xhr.onload (vendor-80bbc66….js:24)

Config

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "resolved": "...",
      "namespace": "fountain-angular1:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "framework": "angular1",
      "modules": "webpack",
      "css": "scss",
      "js": "babel",
      "ci": [],
      "sample": "hello",
      "router": "uirouter"
    }
  }
}

Environment

Node.js v6.7.0
win32 10.0.14393
yo v1.8.5
npm v3.10.3

gulp-hub

"gulp-hub" is not working in windows, due to which error is coming "gulp registry is not a function" !!
Please help !!

Browsersync doesn't detect new HTML

I've created a new project and add a new component using the generator -

yo fountain-angular1:component --name myComponent --dir components/game

I've added references to the new component and successfully used it in the code:

import angular from 'angular';

import {hello} from './app/hello';
import 'angular-ui-router';
import routesConfig from './routes';

// here is the new component
import {myComponent} from './app/components/game/myComponent';

import './index.scss';

export const app = 'app';

angular
  .module(app, ['ui.router'])
  .config(routesConfig)
  .component('myComponent', myComponent) // <---- here as well
  .component('app', hello);

changing the js file of the new componenet triggers a browsersync reload.
BUT - changing the html file of the new component doesn't trigger a reload.

Any idea why?

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc2",
    "props": {
      "css": "scss",
      "resolved": "/Users/idancohen/.nvm/versions/node/v4.2.4/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "framework": "angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "js": "babel",
      "modules": "webpack",
      "ci": [],
      "namespace": "fountain-angular1",
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Relevant Links

nothing special about it but i've uploaded the repo - https://github.com/IdanCo/test-browsersync

Environment

Node.js v4.2.4
darwin 16.3.0
yo 1.8.5
npm 4.1.1

Different generated templateUrl between component.js and component.spec.js

Suppose I generate a component using command yo fountain-angular1:component --name myComponent --dir components/myComponent

The result will create:
templateUrl: 'app/components/myComponent/myComponent.html' in myComponent.js
but will create
templateUrl: 'app/myComponent.html' in myComponent.spec.js

Issue with SCSS loaders

Description

I used the index.scss in /src importing other scss from ../node_modules/ without issue but today had to write some custom scss myself.

Apparently, no matter how simple I write it, i get and error about the symbol $ not being recognized.

Error Message & Stack Trace

[...]
[12:48:52] Starting 'serve'...
[12:48:52] Starting 'webpack:watch'...
[12:48:58] Time: 5497ms
       Asset     Size  Chunks  Chunk Names
    index.js  3.63 MB       0  main
index.js.map  4.34 MB       0  main

ERROR in ./~/css-loader?importLoaders=1!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: Unknown word (20:11)

  18 |   @each $side in $sides {
  19 |     @if $side == '' {
> 20 |       .m#{$space} {
     |           ^
  21 |         margin: #{$space}px;
  22 |       }

 @ ./src/index.scss 4:14-173
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  3.14 kB       0
[12:48:58] Finished 'webpack:watch' after 5.59 s
[...]

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": "",
      "css": "scss",
      "resolved": "C:\\Users\\[myusername]\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-webapp\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "todoMVC",
      "router": "uirouter"
    }
  }
}

Relevant Links

I don't have relevant links but I've a fix. In the ./conf/webpack.conf.js, this section:

{
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
      },

The order is wrong. It should be:

{
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

Node.js v9.3.0
win32 6.1.7601
yo 2.0.0
npm 5.6.0

gulp build injects .map files into index.html and browser errors on their json

Description

There is a major issue with source maps and I can not do a gulp build for production. After gulp build, the actual .map files will be injected instead of the concatenated .js files.

For instance, with the fountain default landing page for angular 1... when I try to load the dist/index.html, in chrome console I get:

vendor-36190f5b7d.js.map:1 Uncaught SyntaxError: Unexpected token :
app-4ecee42442.js.map:1 Uncaught SyntaxError: Unexpected token :

* This is even for the default landing page generated by the generator.

Error Message & Stack Trace

vendor-36190f5b7d.js.map:1 Uncaught SyntaxError: Unexpected token :
app-4ecee42442.js.map:1 Uncaught SyntaxError: Unexpected token :

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular1",
      "modules": "inject",
      "js": "js",
      "ci": [],
      "css": "scss",
      "resolved": "/home/one/.nvm/versions/node/v7.0.0/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "techs",
      "router": "none"
    }
  }
}

Relevant Links

  • If your project is public, link to the repo so we can investigate directly.
  • BONUS POINTS: Create a minimal reproduction and upload it to GitHub. This will get you the fastest support.

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

one@localhost ~/github/ugh $ uname -a
Linux localhost 4.0.5-gentoo #10 SMP Wed Feb 24 23:15:29 CST 2016 x86_64 Intel(R) Core(TM) i3 CPU M 350 @ 2.27GHz GenuineIntel GNU/Linux
one@localhost ~/github/ugh $

one@localhost ~/github/ugh $ node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v7.0.0
linux 4.0.5-gentoo



one@localhost ~/github/ugh $ yo --version
1.8.5
one@localhost ~/github/ugh $ npm --version
3.10.8
one@localhost ~/github/ugh $ nvm list
->       v7.0.0
         system
default -> node (-> v7.0.0)
node -> stable (-> v7.0.0) (default)
stable -> 7.0 (-> v7.0.0) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> N/A)
lts/argon -> v4.6.1 (-> N/A)
lts/boron -> v6.9.1 (-> N/A)

webpack not copy partials html to dist folder

Description

After some hard work finally I decide distribute code to client.
But first I want to try distribution:
npm run serve:dist

Open browser and nothing apperas. I look console to see error

Error Message & Stack Trace

Surprisly I haven't html partials of project in dist folder.
screen shot 2017-07-17 at 00 43 12

vendor-3d79264….js:55858 Error: [$compile:tpload] Failed to load template: ./login/login.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.6.5/$compile/tpload?p0=.%2Flogin%2Flogin.html&p1=404&p2=Not%20Found

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": "",
      "css": "scss",
      "resolved": "/Users/victor/.nvm/versions/node/v7.5.0/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "techs",
      "router": "none"
    }
  }
}```

## Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

Node.js v7.5.0
darwin 16.6.0
yo: 2.0.0
npm: 5.0.3

Hello world example end of line ';' missing

In the file : generator-fountain-angular1/generators/hello/modules/templates/src/app/hello.js

the end of line is missing on line 8 : this.hello = 'Hello World!'

This results in a non-working example. To reproduce: generate with Webpack as module management and 'hello world' as sample app.

Add Support For CSS

HOW is there is no css at all in this project. When I create a new css or scss file webpack completely ignores it. How can I use css in this project??

Folder assets isn't being injected in .tmp and dist folders

I've created a folder "assets" where I put some images to get inside head html tag (like favicon, etc...).
When I run "gulp serve" or "gulp serve:dist", this folder and his children's folders and files isn't being injected to the .tmp or dist folders.

What should I have to do?

I'm new at your ng1 generator.

Configurations:
No preprocessors
Pure old JS
CSS
Bower
Hello World Application

hello component should render hello world FAILED

I installed the current version and when I tried npm run serve
I got this error on console

Error: [$compile:multidir] Multiple directives [app, app] asking for template on: <app class="ng-scope">

When I run the 'npm run test' this is what I got on terminal

PhantomJS 2.1.1 (Linux 0.0.0): Executed 22 of 29 SUCCESS (0 secs / 0.173PhantomJS 2.1.1 (Linux 0.0.0) hello component should render hello world FAILED
	Error: [$compile:multidir] Multiple directives [app, app] asking for template on: <app class="ng-scope">

Build fails if there is no html files to compile

I wanted to test this generator with just one simple thing, load angular module without anything, and build task failed because there are no html files to compile.

[00:14:58] Starting 'build'...
(node:15108) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: File not found with singular glob: F:\<dir>\.tmp\templateCacheHtml.js
(node:15108) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)
[00:14:58] 'build' errored after 9.6 ms
[00:14:58] Error: File not found with singular glob: F:<dir>\.tmp\templateCacheHtml.js

How To Turn Off Linting?

Gulp serve doesn't reload the page unless all linting passes. This is outrageous. What's even worse, there is nothing in the webpack gulp task to turn off linting...

new scss files not injected to index.scss

i've created a new .scss file inside a component but this is not injected in index.scss or index.html, is this right?

The user guide says that any .scss should be injected automatically in index.scss.

Looking at all gulp task i see that all .scss files are watched(i can confirm this because my application reloads every time i save) but in the style.js task it doesn't seem to watch for any other .scss file rather then index.scss.

Errors in gulp serve:dist / npm run serve:dist mode

I have installed latest generator-fountain-angular1 and created a project.
Its working in gulp serve/ npm run serve mode but not in gulp serve:dist mode

Error Message & Stack Trace

ERROR in ./~/node-sass/lib/extensions.js
Module not found: Error: Can't resolve 'fs' in '/Users/mallikarjuna/Desktop/fountain/node_modules/node-sass/lib'
 @ ./~/node-sass/lib/extensions.js 6:7-20
 @ ./~/node-sass/lib/index.js
 @ multi vendor

ERROR in ./~/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/mallikarjuna/Desktop/fountain/node_modules/mkdirp'
 @ ./~/mkdirp/index.js 2:9-22
 @ ./~/node-sass/lib/extensions.js
 @ ./~/node-sass/lib/index.js
 @ multi vendor

ERROR in ./~/postcss/lib/previous-map.js
Module not found: Error: Can't resolve 'fs' in '/Users/mallikarjuna/Desktop/fountain/node_modules/postcss/lib'
 @ ./~/postcss/lib/previous-map.js 17:10-23
 @ ./~/postcss/lib/input.js
 @ ./~/postcss/lib/parse.js
 @ ./~/postcss/lib/postcss.js
 @ ./~/postcss-loader/index.js
 @ multi vendor

ERROR in ./~/browserslist/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/mallikarjuna/Desktop/fountain/node_modules/browserslist'
 @ ./~/browserslist/index.js 3:11-24
 @ ./~/postcss-merge-rules/dist/index.js
 @ ./~/cssnano/dist/index.js
 @ ./~/css-loader/lib/processCss.js
 @ ./~/css-loader/lib/loader.js
 @ ./~/css-loader/index.js
 @ multi vendor

ERROR in ./~/svgo/lib/svgo/config.js
Module not found: Error: Can't resolve 'fs' in '/Users/mallikarjuna/Desktop/fountain/node_modules/svgo/lib/svgo'
 @ ./~/svgo/lib/svgo/config.js 3:9-22
 @ ./~/svgo/lib/svgo.js
 @ ./~/postcss-svgo/dist/index.js
 @ ./~/cssnano/dist/index.js
 @ ./~/css-loader/lib/processCss.js
 @ ./~/css-loader/lib/loader.js
 @ ./~/css-loader/index.js
 @ multi vendor

ERROR in ./src/index.scss
Module build failed: ModuleBuildError: Module build failed: Error: Cannot find module '/Users/mallikarjuna/Desktop/fountain/node_modules/css-loader/index.js?minimize'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at loadLoader (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/mallikarjuna/Desktop/fountain/node_modules/tapable/lib/Tapable.js:196:70)
    at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:143:35
    at /Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:170:18
    at loadLoader (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/loadLoader.js:27:11)
    at iteratePitchingLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/mallikarjuna/Desktop/fountain/node_modules/tapable/lib/Tapable.js:196:70)
    at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/node_modules/async/dist/async.js:3694:9

ERROR in /Users/mallikarjuna/Desktop/fountain/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/Users/mallikarjuna/Desktop/fountain/node_modules/style-loader/index.js!/Users/mallikarjuna/Desktop/fountain/node_modules/css-loader/index.js?minimize!/Users/mallikarjuna/Desktop/fountain/node_modules/sass-loader/index.js!/Users/mallikarjuna/Desktop/fountain/node_modules/postcss-loader/index.js!/Users/mallikarjuna/Desktop/fountain/src/index.scss doesn't export content
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  2.9 kB       0       
Child extract-text-webpack-plugin:
    
    ERROR in ./~/css-loader?minimize!./~/sass-loader!./~/postcss-loader!./src/index.scss
    Module build failed: Error: Cannot find module '/Users/mallikarjuna/Desktop/fountain/node_modules/css-loader/index.js?minimize'
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at loadLoader (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/loadLoader.js:13:17)
        at iteratePitchingLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
        at runLoaders (/Users/mallikarjuna/Desktop/fountain/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
        at NormalModule.doBuild (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:131:2)
        at NormalModule.build (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModule.js:179:15)
        at Compilation.buildModule (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:127:9)
        at Compilation.<anonymous> (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/Compilation.js:404:8)
        at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:74:13
        at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/mallikarjuna/Desktop/fountain/node_modules/tapable/lib/Tapable.js:196:70)
        at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
        at onDoneResolving (/Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
        at /Users/mallikarjuna/Desktop/fountain/node_modules/webpack/lib/NormalModuleFactory.js:161:6

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc2",
    "props": {
      "resolved": "/usr/local/lib/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "framework": "angular1",
      "modules": "webpack",
      "css": "scss",
      "js": "babel",
      "ci": [
        "jenkins"
      ],
      "sample": "techs",
      "router": "uirouter"
    }
  }
}
Node.js v6.9.2
darwin 16.1.0
yo 1.8.5
npm 3.10.9

Browser Sync throwing a syntax error

I'm sure if this is a browser sync issue or a config issue with the generator, but seen as this happens by doing a default generated build and then calling npm run serve I'm assuming it's a config issue.

But in short, when I try to view the app in the browser I get this in the console:
:3001/browser-sync/browser-sync-client.js?v=2.23.2:89 Uncaught SyntaxError: Unexpected token }.
Which means that the Angular app fails to run... Any ideas what's happening? Or how to fix it.

Including custom fonts via webpack

Has anyone been able to bundle custom fonts with this?

I'm struggling to get my custom fonts served up in the .tmp folder, and eventually the dist, also.

webpack.conf.js

 const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|jpeg|jpg|svg)$/,
        loader: 'url-loader'
      },
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style',
          'css',
          'sass?sourceMap',
          'postcss?sourceMap'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'video.js': 'video.js/dist/alt/video.novtt'
    }
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    })
  ],
  postcss: () => [autoprefixer],
  debug: true,
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js',
    publicPath: '/'
  },
  entry: `./${conf.path.src('index')}`
};

_typography.scss

@font-face {
  font-family: 'Betty-headings';
  src: url('./app/assets/fonts/MuseoSlab-500.eot?#iefix') format('embedded-opentype'),  url('./app/assets/fonts/MuseoSlab-500.otf')  format('opentype'),
       url('./app/assets/fonts/MuseoSlab-500.woff') format('woff'), url('./app/assets/fonts/MuseoSlab-500.ttf')  format('truetype'), url('./app/assets/fonts/MuseoSlab-500.svg#MuseoSlab-500') format('svg');
  font-weight: normal;
  font-style: normal;
}

Directory architecture:
package.json
conf/
^--webpack.conf.js
dist/
gulp_tasks/
gulpfile.js
src/
^--app/
^---assets/
^----fonts/
^-----MuseoSlab-500.eot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.