I don't know why, but I have a problem with a little Yeoman project with Bower and Gulp.
Little question:
I installed a component with this command.
bower install angular-bootstrap-show-errors -S
That's works great.
But if I look in the gulpfile.js of my project it looks like.
vendor: {
js: [
'./bower_components/angular/angular.js',
'./bower_components/angular-route/angular-route.js',
'./bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js'
],
fonts: [
'./bower_components/font-awesome/fonts/fontawesome-webfont.*'
]
},
But the installed component is missing.
I've tried to search with google but I can't find any solution.
If I try to add config.vendor.js.push('.bower_components/angular-bootstrap-show-errors/src/showErrors.js'); to config.js it wouldn't work, too. (After bower install and gulp build)
How I can add a installed bower component to gulp?
Thanks in advance for any idea!
Bower's only responsibility is to update the bower.json file. You can just add it to your gulpfile
vendor: {
js: [
'./bower_components/angular/angular.js',
'./bower_components/angular-route/angular-route.js',
'./bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js',
'./bower_components/angular-bootstrap-show-errors/src/showErrors.js'
],
fonts: [
'./bower_components/font-awesome/fonts/fontawesome-webfont.*'
]
},
Edit:
For angular-mobile-ui, instead of altering the gulpfile, add
config.js:
config.vendor.js.push('.bower_components/angular-bootstrap-show-errors/src/showErrors.js');
and 'ui.bootstrap.showErrors' to your app's dependencies:
/src/js/app.js:
angular.module('MyApp', [
'ngRoute',
'mobile-angular-ui',
'ui.bootstrap.showErrors',
'MyApp.controllers.Main'
])
This works because in the gulpfile the settings in config.js are loaded by:
if (require('fs').existsSync('./config.js')) {
var configFn = require('./config');
configFn(config);
}
Related
I just create my application from npm command, when i run the start script the application throws me that error.
Please provide more context. If you're using typescript on your react project. You need to upgrade both react and react-dom declaration. npm install #types/react#latest and npm install #types/react-dom#latest
If you've recently updated past npm 8.5+ and using workspaces, you have two options.
Option A) If possible, just remove your package.json declaring your "workspaces" (and the package-lock.json). I had only 1 workspace so that was the easiest fix.
Option B) Update Jest so it can find your modules. I've observed NPM 8.11 will create a node_modules in the workspaces folder and in each project.
Specifically look at the moduleDirectories key below.
{
verbose: true,
testEnvironment: "jsdom",
moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
moduleDirectories: [
// Look in current directory node_modules
path.resolve(__dirname, "node_modules"),
// Look in parent workspace node_modules
path.resolve(__dirname, "../node_modules"),
],
moduleNameMapper: {
...moduleNameMapper,
"\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
'\\.svg$': '<rootDir>/__mocks__/svgrMock.tsx',
"\\.(css)$": "identity-obj-proxy"
},
transform: {
"^.+\\.tsx?$": "ts-jest"
},
};
some component like button and panel is working right but some other like rating and fielset not showing completely
i think it's because of missing font-awsome
you can see some rectangle insted of star icon:
npm install primeng --save
npm install primeicons --save
npm install #angular/animations --save
already added BrowserAnimationsModule to app.module
and this lines of code to angular.json
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
//...
],
added to import section of target page module:
import {PanelModule} from 'primeng/panel';
finlay in page.html:
<p-rating [(ngModel)]="val"></p-rating>
finlay i found the problem
first stop running ionic project. and then add primeng css after variable.scss and global.scss block like this:
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
I am about to move angular 1 + typescript project build setup from gulp to webpack, the only part I am stuck with is, how to bundle node_modules js file in proper sequence.
I was till now using bower for client side dependencies, and gulp has wiredep plugin which will look into bower dependencies section + main section to build the dependency order and get it to bundle it properly.
Now I understand that webpack philosophy is different, we should depend upload whatever is imported rather than any dependencies section as such.
so to get it to work I will need to do: move all dependencies from bower.json to package.json
currently as I am using typings, tsc considers the typings and gives me the output, I really don't need to write imports for bower packages as such.
So if i understand correctly, to get it work with webpack,
a) I should get away with typings and then directly import the js
files inside all my ts files??
As I understand, all the js modules from npm do work with modules, so does webpack really needs typings files?
OR
b) I should write a separate vendor.ts, where I should maintain the
sequence of imports (for js and css) myself,
but then that would be little painful to do (given I am used to wiredep handling it for me).
But then this will allow me bundle the vendor files separately using chunks-plugin
OR
c) is there any other standard way to handle this.
This is kinda pain point to move angular 1 from gulp to webpack.
When you import a module from a TypeScript file that's going to be loaded by webpack, it'll get it's content from node_modules and bundle it into the output file.
index.ts
import * as angular from "angular";
const myApp = angular.module("myApp", []);
myApp.controller("MyController", function PhoneListController($scope) {
$scope.phones = [
{
name: "Nexus S",
snippet: "Fast just got faster with Nexus S."
}, {
name: "Motorola XOOM™ with Wi-Fi",
snippet: "The Next, Next Generation tablet."
}, {
name: "MOTOROLA XOOM™",
snippet: "The Next, Next Generation tablet."
}
];
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
...
<script src="bundle.js"></script>
</head>
<body ng-controller="MyController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
webpack.config.js
module.exports = {
entry: "./index.ts",
output: {
filename: "./bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" }
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
}
};
Add angular, #types/angular, ts-loader, source-map-loader, typescript to your packages.json and run webpack.
It'll bundle everything inside a single file named bundle.js which will be used by your index.html.
I have a project which uses Angular. It does not use a task manager nor dependency manager and all libs are stored in repo and included using plain old <script> tag like <script src="libs/angular/angular.min.js"></script>.
I want to modernize the application by introducing a module bundler and automating the build process. The original idea was gulp + bower, but I see that webpack + npm3 are a trend now.
There is no issue with gulp + bower because of things like gulp-inject, but I can’t find anything similar which works with webpack.
Are there any tools which would allow me to use the existing code as it is and write only new modules using webpack?
Here's the solution i've got so far. Since the webpack requires a single entry point per bundle, i still have to import all those legacy js in a single file. So i decided to use ES6 import (or webpack's require) in that entrypoint called index.js
here's the how webpack config looks like
var webpack = require('webpack');
var path = require('path');
var basePath = __dirname + "/target/app";
module.exports = {
context: basePath,
entry: {
app: './index.js',
vendor: './vendor.js'
},
output: {
path: basePath + "/build",
filename: '[name].js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/},
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery",
"_": "lodash"
}),
],
};
and so in index.js i did following
import './app/component1.js'
import './app/component2.js'
//all the rest imports from index.html
as for the third part libraries like jquery, angular, etc... i decided to describe that imports in separate bundle and so there's another bundle called vendor.js
import './libs/lodash.js'
import './libs/jquery.js'
//and all the rest libraries
//note that here we can use now libs from npm node_modules like
import 'angular' //will take angular from node_modules/angular
Important thing which i faced while doing this, is that legacy modules are not really compatible with webpack because of using global variables like $, _, etc... ProvidePlugin helps here and add require({module}) to the modules where the provided {variable} met as it's described in config 'variable': 'module'
Note that i used CommonsChunkPlugin to avoid having dependent modules in both bundlers, like angular is required in index.js and vendor.js but with this plugin webpack will handle that and add js code only in vendor.js
I have a grunt task configured (I am working existing project). I am not sure where to find particular task. I have an "index.html" file getting created and added to the "dist" folder after every compile and build. But in the index.html i manually have to add the following every time:
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
and also the -
<base href="/">
For AJS.
What might be the possible issue?
I don't want to edit bower.json instead do it using grunt task. so how do i do it?
I have the following:
var buildConfig = module.exports = {
// Wiredep options
wiredepOptions: {
//
// devDependencies: true, // <-- injects bower devDependencies
//
// exclude: [ // <-- List of patterns to exclude
//
// /bootstrap\.js/
// ]
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
}
},
This gives me error. how do i resolve it?
This is because the main object in Bootstrap's bower.json mention a reference to the less file not the css
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
Wiredep is the grunt task that is responsible for injecting those assets so it have no idea where the CSS file is. You can do it by providing an override in wiredep task in your gruntfile.js as follow:
wiredep: {
...,
overrides: {
'bootstrap': {
'main': [
'dist/js/bootstrap.js',
'dist/css/bootstrap.css' // Note this
]
}
}
}
},
Running grunt wiredep again will inject the CSS file to your HTML as expected.
Note: This won't work unless your HTML have this HTML comment
<!-- bower:css -->
The styles will be injected here
<!-- endbower -->
I could not resolve it with editing Gruntfile but added this in bower.json :
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
}