Mac OSX El capitan | angular-cli: 0.1.0 | node: 5.4.0 | os: darwin x64
I try to install a 3rd party npm module according to the angular-cli wiki: https://github.com/angular/angular-cli/wiki/3rd-party-libs but fail. I've been struggling with this for days now and would greatly appreciate any help.
Steps to get the error:
ng new lodashtest3
cd lodashtest3
npm install lodash --save
typings install lodash --ambient --save
angular-cli-build.json:
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'lodash/**/*.js'
]
});
};
ng build
(lodash gets correctly added in dist/vendor)
system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const packages: any = {
'lodash': {
format: 'cjs'
}
};
(all according to spec in
https://github.com/angular/angular-cli/wiki/3rd-party-libs)
Note - I've tried all config settings I can think of here, all giving the same result.
lodashtest3.component.ts:
import * as _ from 'lodash';
ng build
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
/Users/danielmattsson/git/lodashtest3/tmp/broccoli_type_script_compiler-input_base_path-g2lDIaq6.tmp/0/src/app/lodashtest3.component.ts (2, 20): Cannot find module 'lodash'.
at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
at BroccoliTypeScriptCompiler.build (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:456:9)
at process._tickCallback (node.js:385:13)
The broccoli plugin was instantiated at:
at BroccoliTypeScriptCompiler.Plugin (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
at BroccoliTypeScriptCompiler (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
at Angular2App._getTsTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:280:18)
at Angular2App._buildTree (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:101:23)
at new Angular2App (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/lib/broccoli/angular2-app.js:42:23)
at module.exports (/Users/danielmattsson/git/lodashtest3/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/danielmattsson/git/lodashtest3/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
EDIT: more information according to comments below
dist/index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lodashtest3</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Service worker support is disabled by default.
Install the worker script and uncomment to enable.
Only enable service workers in production.
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/worker.js').catch(function(err) {
console.log('Error installing service worker: ', err);
});
}
</script>
-->
</head>
<body>
<lodashtest3-app>Loading...</lodashtest3-app>
<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
With the stable release and current angular-cli (1.0.0-beta.15), it's simply adding the npm package plus type definitions
npm install lodash --save
npm install #types/lodash --save-dev
For early versions such as 1.0.0-beta.15, the next is necessary. It should not be required for current versions:
Add the library to the angular-cli.json to list of global scripts (add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).
See https://github.com/angular/angular-cli#global-library-installation
FWIW, as of today (1.0.0-beta.26), adding the scripts entry is not necessary anymore.
Simply add the proper entries to package.json using:
npm i --save lodash
npm i --save-dev #types/lodash
Then, in your TypeScript code, use:
import * as _ from 'lodash';
The code will run just fine.
In my case, actually adding the scripts entry was causing issues.
[updated answer] After the new version of angular-cli (1.0.0-beta.15):
just add
npm install lodash --save
npm install #types/lodash --save-dev
then add the library to the angular-cli.json to list of global scripts(add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).
and in your component where you want to use , try this way
declare var _:any;
#Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
before : angular-cli (1.0.0-beta.15):
add this line in src/index.html
<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
and in your component where you want to use , try this way
declare var _:any;
#Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
I tried straight away , it worked for me
In order to support 3rd party libraries in Angular CLI and System.js, you have to specify them manually on system.config.ts and angular-cli-build.js.
I've answered it here with example for lodash and also other dependencies.
As of 4/15/2017 with #angular/cli 1.0.0:
You need to be very specific about which versions you install otherwise the TypeScript bindings will give all sorts of failures. What I did is update my devDependencies as follows in package.json:
"#types/lodash": "ts2.0"
Related
I'm trying to get bootstrap.css and Google fonts CDNs working in my Gatsby project.
There is no HTML file; just JavaScript files.
For bootstrap, I can npm install bootstrap and then import the min.css from that.
Trying to figure out how to get Amatic SC font from Google fonts; I have npm installed google-fonts-webpack-plugin.
I am using gatsby-node.js by adding:
const GoogleFontsPlugin = require("google-fonts-webpack-plugin")
exports.modifyWebpackConfig = ({ config, stage }) => {
config.plugin("google-fonts-webpack-plugin",new GoogleFontsPlugin(
{
fonts: [
{ family: "Amatic SC" }
]
}
),null)
};
However, I get the error below;
Invalid 'constructor' parameter. You must provide either a function or null
What am I doing wrong and how can I fix it?
Is there a way of referencing a CDN directly so rather than npm installing bootstrap, I could just reference its latest version?
You can include the font using typeface-amatic-sm from NPM, and in your JS do:
import 'typeface-amatic-sc'
Otherwise, can include scripts it in your </head> using helmet like:
<Helmet>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</Helmet>
After click:
I try to test Material-UI components.
My steps:
I installed nwb globally: sudo npm install -g nwb
I created a new React application: nwb new react-app myapp
I look inside: cd myapp
I edited nwb.config.js (since Webpack creates absolute path with "/"):
module.exports = {
webpack: {
publicPath: ''
}
}
I installed requested plugin: npm i --save react-tap-event-plugin
I added font Roboto in index.html:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
I added links to icons (because Material-UI didn't show icons by default):
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
I installed and started a server: npm start --auto-install
After starting I see an error
Invariant Violation: addComponentAsRefTo(...)
Only first button reacts on a click but it's not animation! And other buttons don't react on any clicks.
In the package.json I inserted ammendments in version of a plugin:
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-tap-event-plugin": "^2.0.1"
},
based on information from:
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Due to update in React, react-tap-event-plugin breaks
Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.
Sorry, I don't have anymore any ideas how to fix it!
It's not working in Safari and in Chrome as well.
Thank you for any help!
All examples from official site Material-UI/Components
I'm creating a bower package named X who depends to angular-local-storage.
I saved angular-local-storage in my bower.json.
My module is declared as :
angular.module('X', ['LocalStorageModule']);
The service as :
angular
.module('X')
.service('XService', XService);
function XService($resource, $q, $window, LocalStorageService) {...}
When I install the package X with bower in another project, LocalStorageModule is not found.
How can I manage this dependencies ?
EDIT : the error is:
Unknown provider: LocalStorageServiceProvider <- LocalStorageService <- XService
Add 'LocalStorageModule' to your main module's list of dependencies.
Include angular-local-storage.js (or angular-local-storage.min.js) from the dist directory in your index.html, after including Angular itself.
More
I would suggest you layout your factory or service this way:
.service('ServiceName', ['$log','OtherService', function($log, OtherService){
var serviceInstance = {};
//stuff
return serviceInstance;
}]);
This has more boilerplate than you absolutely need, but it is minification safe and keeps your namespaces clean.
In order to build a bower package, you need to make sure you follow these steps:
bower package: X
prepare a bower.json with this following (minimal) configuration:
{
"name": "your-package-x",
"version": "1.0.0",
"main": "dist/your-package-x.min.js",
"dependencies": {
"angular": "1.5.0",
"angular-local-storage": "2.0.7"
...
}
}
build all the package's files into dist/your-package-x.min.js (using your favorite build tool)
if the package has HTML templates, you should build a templateCache file and append it to the built file (using your build tool):
a. exemple with grunt: https://www.npmjs.com/package/grunt-angular-templates
b. exemple with gulp: https://www.npmjs.com/package/gulp-angular-templatecache
publish to bower
External project
add your-package-x dependency to your bower.json:
{
"name": "main-project",
"version": "1.0.0",
"dependencies": {
"your-package-x": "path to repo or version"
...
}
}
install bower deps
Inject the package-x and its dependencies:
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/dist/your-package-x/dist/your-package-x.min.js"></script>
==> or use a build tool to do it for you (look for wiredep)
I hope this quick guide would help.
$ grunt connect:development:keepalive
ERROR:
Running "connect:development:keepalive" (connect) task
Warning: undefined is not a function Use --force to continue.
Aborted due to warnings.
I am presently learning AngularJS from the book Professional AngularJS (wrox) and here's a basic code from the book:
app/index.html
<!DOCTYPE HTML>
<html ng-app="Workflow">
<head>
<title>Chapter Two</title>
<link rel="stylesheet" href="main.css" />
</head>
<body ng-controller="ToolsCtrl">
<h1>Workflow tools from this chapter:</h1>
<ul>
<li ng-repeat="tool in tools">{{tool}}</li>
</ul>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
app/main.less
html,
body {
h1 {
color: steelblue;
}
app/app.js
'use strict';
angular.module('Workflow', [])
.controller('ToolsCtrl', function($scope) {
$scope.tools = [
'Bower',
'Grunt',
'Yeoman'
];
});
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
hostname: 'localhost'
},
development: {
options: {
middleware: function(connect) {
return [
connect.static('app')
];
}
}
}
},
less: {
development: {
files: {
'app/main.css': 'app/main.less'
}
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', []);
};
.bowerrc
{
"directory": "app/bower_components"
}
These are all the codes provided by the book as is, for this application. Also, as the book asked, I ran these commands on the root folder from the terminal:
sudo npm install -g bower
sudo npm install -g grunt-cli
sudo npm install --save-dev grunt
sudo npm install --save-dev load-grunt-tasks
sudo npm install --save-dev grunt-contrib-connect
sudo npm install --save-dev grunt-contrib-jshint
sudo npm install --save-dev grunt-contrib-less
sudo npm install --save-dev grunt-contrib-watch
sudo npm install -g less
lessc app/main.less > app/main.css
grunt less
I had to use sudo because, otherwise it was throwing error:
Please try running this command again as root/Administrator.
According to the book, if I run grunt connect:development:keepalive from my terminal, then, my browser should fire up with the application running. But is giving me the error as I mentioned above.
Please help me with the situation as I have no idea what wrong am I doing. This is why I included all the code. I am very new to these tools and technologies, and I am not even sure if I should follow this book to learn AngularJS.
Thank you.
EDIT:
Since I am using the WebStorm IDE, it is showing me a problem in the Gruntfile.js in the line connect.static('app'). It says Unresolved function or method static() when I hover the mouse over it.
it is correct that the problem is in the Gruntfile.js in the line connect.static('app')
According to the forum from the website for the book "static" is no longer a part of Connect module and you will need to run npm install serve-static. after that declare a variable above your grunt.intConfig line in your Gruntfile.js like so...
var serveStatic = require('serve-static');
then change your middleware function to look like this
middleware: function(connect) {
return [
serveStatic('app')
hope this helps. It helped me solve it
I copied a ReactJS project to a new folder, made some changes, and it's not finding the react NPM module. I stripped the app down to 1 simple file, took out all the major code. This is driving me nuts, I deleted the node_modules folder, and ran NPM install.
I'm using watchify:
watchify --debug -t reactify app3.jsx -o ./build/app-brow.js
I Restarted my Terminal console in case that was out of sync, still can't find react.
I copied the original project to another folder, and it works OK from that copy, there's something about the code/files below that I'm missing.
It shows Uncaught TypeError: undefined is not a function, here which is the JS return code in my render:
React.createElement("div", null,
"Test, TEST TEST."
)
FILES:
app.jsx
/** #jsx React.DOM */
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>
Test, TEST TEST.
</div>
);
}
});
React.renderComponent((
<App />
), document.body);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test 3</title>
</head>
<body>
HAH... If you see this there is an error, make sure JavaScript is enabled in your browser.
<script type="text/javascript" src="build/app-brow.js"></script>
</body>
</html>
package.json
{
"name": "Test3",
"dependencies": {
"react": "0.11.x",
"reactify": "0.14.0"
}
}
Reactify is compiling your JSX in the React 0.12 style, but you are using React 0.11. Either upgrade React to 0.12.x or downgrade Reactify to a version that uses react-tools 0.11.