stukh / generator-angular-webpack-es6 Goto Github PK
View Code? Open in Web Editor NEWYeoman generator for Angular projects using Webpack, ES6, SASS with some cool optional features. Feel free to contribute!
Yeoman generator for Angular projects using Webpack, ES6, SASS with some cool optional features. Feel free to contribute!
Hi,
thanks for this generator, makes things easy.
But i noticed that i cant use any async -await feature, i thought this would be supported since, ES2017 is supported.
Pls whats the easiest way to add async-await to this?
When I create a new project with only default options, when running npm run dev
I get the following error in the Chrome console and nothing is displayed.
Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.5.8/$injector/strictdi?p0=function(%24provide)
at http://localhost:8080/vendor.js:13298:13
at Function.annotate as $$annotate
at injectionArgs (http://localhost:8080/vendor.js:17909:37)
at Object.invoke (http://localhost:8080/vendor.js:17940:19)
at runInvokeQueue (http://localhost:8080/vendor.js:17841:36)
at http://localhost:8080/vendor.js:17850:12
at forEach (http://localhost:8080/vendor.js:13551:21)
at loadModules (http://localhost:8080/vendor.js:17831:6)
at createInjector (http://localhost:8080/vendor.js:17753:20)
at doBootstrap (http://localhost:8080/vendor.js:14988:21)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=ng&p1=Error%3A%20%5β¦at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2Fvendor.js%3A14988%3A21)
what is the correct path for images?
The application server starts with localhost:8080, this port is currently used by wamp server and need to change it
Hi,
I have used this yeomen generator and am naive to Webpack and trying to use image in /assets/images folder (logo.png).
I see configuration of webpack -
// resolves modules
resolve: {
extensions: ['.js', '.es6', '.jsx', '.scss', '.css'],
alias: {
_appRoot: path.join(_path, 'src', 'app'),
_images: path.join(_path, 'src', 'app', 'assets', 'images'),
_stylesheets: path.join(_path, 'src', 'app', 'assets', 'styles'),
_scripts: path.join(_path, 'src', 'app', 'assets', 'js')
}
},`
So I have below code in my controller -
const logo = require('../../assets/images/logo.png');
But webpack is unable to find logo.png module. I don't understand alias defined in webpack.config file and how we use it in our source code?
I have below states in my app
login (from /pages/login/login.route.js)
app (abstract) (from /components/header/header.route.js)
app.upload(abstract) (from /pages/upload/upload.route.js)
app.upload.products (from /pages/upload/products/products.route.js)
And my index.module.js includes the all the page modules
const App = angular.module(
"CMS", [
require('angular-ui-router'),
require('angular-ui-bootstrap'),
// core
require("./core/core.module").name,
// components
require("./index.components").name,
// routes
require("./index.routes").name,
// pages
require("./pages/login/login.module").name,
require("./pages/upload/upload.module").name,
require("./pages/upload/products/products.module").name
]
);
In LoginController I am redirecting to app.upload.products
on successful login to api call.
$state.go('app.upload.products');
But I get an error saying
Could not resolve 'app.upload.products' from state 'login'
Why is this state getting resolved? What did I miss?
Are there any reasonable reasons to use jQuery together with AngularJS?
My app is structured like this,
I am calling below function from src.controller.js on ng-click of a button.
vm.updateSourceAndVisibility = function(skus) {
$log.info("In updateSourceAndVisibility");
var modal = $uibModal.open({
animation: true,
templateUrl: require('./source-selection/source.selection.html'),
controller: require('./source-selection/source.selection.controller.js'),
controllerAs: 'sourceSelectCtrl',
backdrop : 'static',
size: 'md'
});
};
But I get 404 Not Found
error for http://localhost:8080/src/app/pages/src/selection/selection.html
.
How do I show my UI from source.selection.html on the modal?
I have tried using template
as well instead of templateUrl
.
template: require('./selection/selection.html'),
In this case, modal gets opened with below text,
/src/app/pages/src/selection/selection.html
Hello, while running your great generator, I got this message:
WARNING! this npm package
"angular-ui-router"
has been renamed to"@uirouter/angularjs"
. Please update your package.json
See https://ui-router.github.io/blog/uirouter-scoped-packages/ for details.
I am not sure if it is an issue with my environment or it could be related with the default generator settings.
Thank you for your time and efforts
I have created index.test.js
var testsContext = require.context(".", true, /\.spec.js$/);
testsContext.keys().forEach(testsContext);
and configured it in karma.config.js
files: [
'src/app/index.test.js'
],
preprocessors: {
'src/app/index.test.js': ['webpack']
},
The sample test that I created
import app from 'src/app/index.module.js';
describe('app', () => {
describe('MainController', () => {
let ctrl;
beforeEach(() => {
angular.mock.module(app);
angular.mock.inject(($controller) => {
ctrl = $controller('MainController', {});
});
});
it('should contain the starter url', () => {
expect(ctrl.test).toBe('test');
});
});
});
But when I run it with
npm run test --verbose
It says
echo 'Error: no test specified'
and when I runt it with
node_modules/karma-cli/bin/karma start karma.conf.js --single-run
It says
Chrome 52.0.2743 (Linux 0.0.0) ERROR
Uncaught SyntaxError: Unexpected token import
How do I go about doing unit testing here? Please help.
Hi Alex, just showing some appreciation!
We used your project as the base to migrate now 2 of our open sites at KPN, the biggest telecommunications company in The Netherlands!
Keep on rocking! And if you're interested, take a look at our careers site or drop me a mail ;)
Cheers!
Was wondering how would you support using this with a node backend server
I am using the genetator but it is not creating all files.
It is not creating the folders related to protractor, karma.conf file end much more
It just create a simple boilerplate
Hi,
managed to get this working and it seems the sourcemaps are working as I see the scss files in chrome dev tools but I was trying to enable the workspaces feature of chrome dev tools so that i am able to edit in chrome dev tools and its persisted on disk. But no success.
Has anyone managed to get this working ?
I have mapped the directory to the web space but the file never saves or is updated.
Anyone able to help ?
We have upgraded to Angular 6 last week. We are not able to see Source Map in Debug Console. Our Build gets stuck at 92% UglifyJSPlugin. Please let me know if anyone else is having this issue. Is this a bug in Angular6? How to fix this issue? I would really appreciate any guidance.
Regards
Anu
Neither development nor dist version is not working in internet explorer.
I managed make it partially work by injecting ng-app
to <html>
tag, which loads source, but page doesn't render.
I setup the generator globally and then created the project using yo angular-webpack-es6
. I chose to install oclazyload module but skipped Jquery. When starting the dev server via npm run dev
webpack bundling was stuck at 26% and there were errors of missing module jquery which was supposedly a dependency of oclazyload (because the paths in error message indicate that).
If oclazyloading does indeed require Jquery then it should be installed by default as due to this the project fails to kickoff.
I installed jquery using npm install jquery --save and the error went away and bundle was built successfully.
Great starter, I'm loving it.
Would you let me know is it possible to have let's say _variables.scss file, which will be available from components .scss files?
For example,
_variables.scss contains
$blue:'blue';
which can be imported in footer.scss like a:
a {color:$blue}
Thanks in advance!
Update:
I have switched loader to sass-resources-loader, so my global.js rule looks like this one:
Is that correct?
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// Provide path to the file with resources
resources: './src/assets/styles/_vars.scss'
},
},
],
}
I am moving from gulp
to webpack
. I have followed all the steps to generate the boilerplate using yo
.
How do I go about adding a new dependency for the angular and start using it? For e.g. I want to use angualar-bootstrap-ui
.
It's not documented anywhere.
Hey, I have been using generator-angular-webpack-es6
for a week now.
I really like how it's structured in a context of separation of concerns.
I have one problem. My api.config.json
{
"production": {
"APIConfig": {
"ProductService": "jjjjjjjjj",
"CartService": "kkkkkkk"
}
},
"development": {
"APIConfig": {
"ProductService": "lllllllll",
"CartService": "mmmmm"
}
}
}
I want webpack to create angular config for the enviornment specific build.
In gulp I had a task for this
gulp.task('configure-environment', configure);
function configure() {
return gulp.src('conf/app.env.config.json')
.pipe(gulpNgConfig('MyMD.config', {
environment: process.env.NODE_ENV || "development"
}))
.pipe(gulp.dest(path.join(conf.paths.src)));
}
How do I do this with Webpack?
hi, i am new web developer.
I am so grateful for the angular generator. thank you.
by any change get sub generator?
for example,
yo angular:component navbar
yo angular:service auth
Uncaught ReferenceError: exports is not defined
I put some images into src/assets/images, did npm run dev and can't got them through /assets/images/image.gif
I would like to deploy my app on heroku, but getting:
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Anyone can help with proper configuration?
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.