I want to build a web application and I have started building this by using the angular fullstack generator. This generator uses webpack and this is the first time I am using webpack.
I have been trying to add the ngMaterial dependency by installing it with:
npm install angular-material --save
I have added the dependency in the config.entry.vendor from the webpack.make.js file but when I tried to import the ngMaterial i received the following error:
ERROR in ./client/app/app.js
Module not found: Error: Cannot resolve module 'ngMaterial' in path\client\app
# ./client/app/app.js 21:18-39
How can I inject a dependency with webpack?
I assume you pointed incorrect dependency name in webpack configuration: ngMaterial instead of angular-material.
ngMaterial is angularjs module name, you point it as a dependency in your angular app module, like this:
angular.module('app', ['ngMaterial'])
But in webpack dependencies you have to point node.js module name, which is angular-material (it is located in node_modules folder after you install it via npm install command)
EDIT:
If needed in your app.js you also have to import that module via import 'angular-material' or require('angular-material'). But if you include this dependency in separate vendor.js file (via webpack), than you shouldn't ever include this module in your app.js, cause it will upload to the page in vendor.js. You'll include it 2 times in your project if you do so.
Related
I am new to Webpack and node. Need help in configuring ui-grid.
I wanted to bundle angular using webpack, So I installed angular using npm and after installing I could see index.js file inside angular folder in node_modules, which actually export angular module. To include angular module I include following line in entry file of webpack.
const angular = require('angular');
And it works fine. Now I am trying to do same thing for ui-grid but I could not find index.js file there which actually imports ui-grid module.
Please provide pointers about how to include ui-grid and what is the concept of index.js.
I'm using angular-cli, typescript, trying to downgrade angular2 component, so it will work inside angular 1.5 project but the module is not recognize. What I'm missing?
// Angular 1 Vendor Import
import * as angular from 'angular';
This was solved by:
npm install #types/angular
I'm using a yeoman generator called "gulp-angular", I'm trying to add a dependency that is not an angular module, this dependency is a jquery plugin. I include this dependecy with: bower install depdency_name --save" but when I try to use it, I get an error, this error is a 404.
For a concrete example: I'm trying to include this dependency: blurry-image-load
So, when I want to include something dependency that is not an angular module, what I need to do, to make it work?
Thanks for your time
This is probably happening because the module you are trying to get isn't available in Bower.
You can however specify a full URL in Bower instead of a Bower package name. The URL should point to the main JavaScript file in their GitHub repo.
PS don't forget to add the script tag in the head of your HTML file.
I'm using the yeoman generator-gulp-angular to scaffold my app. I installed ng-18next with bower, and the package and it's dependency were both correctly installed in the bower_components directory. However, when I run gulp serve and view the source the components aren't being injected into page, so I get a module instantiation error. If I hard code the deps into the page there are no errors. I also tried bower install --save and the deps are inserted into the bower.json file correctly. Any ideas?
Thanks.
I had hard-coded script references in index.html. Even though they were commented, this caused them not to be injected with wiredep.
I've been trying to user browserify with Foundation for apps, which was recently added on npm (version 1.02). Since the npm package from foundation-apps is not commonjs compatible I've decided to use "browserify-shim"
The difference between the bower component and npm package of foundation for apps, is that the former comes with all the dependencies included (angular, ui.router, angular-animate etc), while the npm version comes only with the absolutely necessary stuff (foundation core, components and services).
I installed angular and angular-animate from npm, and shimmed them (npm versions of angular/angular-animate are also not in the commonjs format). As for ui.router, the npm package supports commonJS, so no need for shiming.
This is my package.json
and this is my main.js (app entry point)
Browserify successfully creates a bundle.js file, that includes everything (foundation.core, components, services as well as angular, angular-ui-router and angular-animate)
But my app instantiation fails with this message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:modulerr] Failed to instantiate module foundation.dynamicRouting due to:
Error: [$injector:nomod] Module 'foundation.dynamicRouting' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.8/$injector/nomod?p0=foundation.dynamicRouting
Any ideas what might be the case? I'm suspecting there's a dependency somewhere that didn't catch my attention, or perhaps something I messed up in package.json