fountainjs / generator-fountain-angular1 Goto Github PK
View Code? Open in Web Editor NEWYeoman 'fountain' generator to start a webapp with Angular 1
Home Page: http://fountainjs.io
License: MIT License
Yeoman 'fountain' generator to start a webapp with Angular 1
Home Page: http://fountainjs.io
License: MIT License
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
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.
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...
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.
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
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
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
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
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"
}
}
}
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
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 :
vendor-36190f5b7d.js.map:1 Uncaught SyntaxError: Unexpected token :
app-4ecee42442.js.map:1 Uncaught SyntaxError: Unexpected token :
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"
}
}
}
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)
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!
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 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
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
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
};
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
};
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)
{
"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"
}
}
}
Node.js v6.7.0
win32 10.0.14393
yo v1.8.5
npm v3.10.3
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">
I've created a new project (angular1, webpack, typescript, css, routeUI, jenkins) and i've tried the command gulp build (or gulp serve:build)
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
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"
}
}
}
(My project is not yet commited because it's for the initialization)
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.
https://github.com/Swiip/generator-gulp-angular
had assets/images ,
when you are not using any module loader and using only bower
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
Surprisly I haven't html partials of project in dist folder.
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
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
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"
}
}
}
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"
}
}
}
nothing special about it but i've uploaded the repo - https://github.com/IdanCo/test-browsersync
Node.js v4.2.4
darwin 16.3.0
yo 1.8.5
npm 4.1.1
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??
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.
Having the same issue as this one from Swiip/generator-gulp-angular repo
When installing bootstrap to 3.3.4 it gets injected, for 3.3.5+ it doesn't.
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.
[...]
[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
[...]
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"
}
}
}
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'
]
},
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
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
"gulp-hub" is not working in windows, due to which error is coming "gulp registry is not a function" !!
Please help !!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.