How to add angular2 material to angular-cli? - javascript

Trying to add angular materials to angular-cli but angular-materials never show up in vendor files. I added materials files to system-config.ts as shown below:
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
'./button/button.js',
'./card/card.js',
'./checkbox/checkbox.js',
'./input/input.js',
'./progress-circle/progress-circle.js',
'./sidenav/sidenav.js',
'./toolbar/toolbar.js',
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
const _cliSystemConfig = {};
barrels.forEach((barrelName: string) => {
_cliSystemConfig[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
' #angular2-material':'vendor/ #angular2-material'
},
packages: _cliSystemConfig
});
// Apply the user's configuration.
System.config({ map, packages });
Also I added to vedornpmfiles array in angular-cli-build.js as shown below:
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/*.js',
'es6-shim/es6-shim.js',
'reflect-metadata/*.js',
'rxjs/**/*.js',
'#angular/**/*.js',
'#angular2-material/**/*.js'
]
I am getting error that they cant find angular materials files.
If anyone has got a clue. What I am doing wrong?

Your system-config.ts should look like this:
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'#angular2-material': 'vendor/#angular2-material',
};
/** User packages configuration. */
const packages: any = {
'#angular2-material/core': {
format: 'cjs',
defaultExtension: 'js',
main: 'core.js'
},
'#angular2-material/sidenav': {
format: 'cjs',
defaultExtension: 'js',
main: 'sidenav.js'
},
'#angular2-material/toolbar': {
format: 'cjs',
defaultExtension: 'js',
main: 'toolbar.js'
},
'#angular2-material/card': {
format: 'cjs',
defaultExtension: 'js',
main: 'card.js'
},
// add missing material elements as desired
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/http',
'#angular/router',
'#angular/router-deprecated',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/imagecard-component',
'app/search-component',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
Note the map and packages entries.
For reference, see this sample app from one the angular2-material developers.

All these solutions have too much going on. First thing you should do is remove those barells that belong to Angular2-material.
'./button/button.js',
'./card/card.js',
'./checkbox/checkbox.js',
'./input/input.js',
'./progress-circle/progress-circle.js',
'./sidenav/sidenav.js',
'./toolbar/toolbar.js',
in your system-config.ts add the angular 2 vendor path to the map object:
const map: any = {
'#angular2-material': 'vendor/#angular2-material'
};
Then here's the tricky bit, the Packages object is empty const packages: any {}; (unless you have already installed some third party packages and added them, yours will be too). So we have to declare the material packages we want to use, we do this by creating a array of the package names
const materialPkgs[]: string[]= [
'core',
'button'
];
In this case I'm only importing button and core for simplicity's sake. Core must always be imported the other modules depend on it.
Next we loop through these materialPkgs and add them to packages using a forEach function
materialPkgs.forEach((pkg) =>{
packages[`#angular2-material/${pkg}`] = {main: `${pkg}.js`}
});
we're almost done in system-config.ts, last thing we need to add the main vendor package to the map object of the system.config so it can be applied...
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'#angular2-material': 'vendor/#angular2-material'
},
packages: cliSystemConfigPackages
});
Your angular-cli-build.js file is fine, if you configured the default extension to be 'js' like i did, and probably you did too, you don't need to add it to the vendorNpmFiles. You could just as simply have '#angular2-material/**/*'
And we're done with the configuration.
import the directives in your component
import { MD_BUTTON_DIRECTIVES } from '#angular2-material/button';
add them to your directives array
directives: [ MD_BUTTON_DIRECTIVES ]
and use them in your markup
<h1>
{{title}}
</h1>
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-fab>add</button>
<button md-mini-fab>add</button>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
They should work.
Screenshot of app working:

I had the same problem with "#angular/http" . So The way I fixed the problem ,it might help you too -
Open your package.json and add this line under the dependencies -
'#angular2-material': "your version"
Then open your terminal on that folder and type -
npm install
It will update your system-config.ts with
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular2-material',
'#angular/compiler',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
'./button/button.js',
'./card/card.js',
'./checkbox/checkbox.js',
'./input/input.js',
'./progress-circle/progress-circle.js',
'./sidenav/sidenav.js',
'./toolbar/toolbar.js',
'app',
'app/shared',
/** #cli-barrel */
];

Related

angular2 - just installed ng2-bootstrap. how do I use this package without manually including it within <script>?

I am using angular 2 CLI for my application.
I installed ng2-bootstrap, and I am wondering how I can use the systemJS tool to automatically include that in my application instead of having to manually put in:
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
Does this go into the system-config.ts? If so, what do I have to do? I tried putting ng2-bootstrap into the third party barrels section, but it didn't seem to do anything.
I ask because I see this in the index.html for the app:
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
Thanks
my system-config.js
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'ng2-bootstrap': 'vendor/ng2-bootstrap'
};
/** User packages configuration. */
const packages: any = {
'ng2-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ng2-bootstrap.js'
}
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/browse',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });

Import Underscore to Angular 2 CLI project

I've started a new project with the Angular CLI tool. After that I follow this official guide to import Underscore and I do exactly as it says.
But still my project crashes in the browser when I try to use Underscore in my app.component with the error message:
ORIGINAL EXCEPTION: ReferenceError: _ is not defined
Underscore is added to the dist/vendor folder so my guess would be that the problem is in the Systemjs configuration.
Here is my angular-cli-build:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
sassCompiler: {
includePaths: [
'src/styles'
]
},
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'underscore/underscore.js',
'#angular/**/*.+(js|js.map)'
]
});
};
Here is my system-config:
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'underscore': 'vendor/underscore/',
};
/** User packages configuration. */
const packages: any = {
'underscore': { main: 'underscore.js', format: 'cjs' },
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
My app.component:
/// <reference path="../../typings/globals/underscore/index.d.ts" />
import { Component } from '#angular/core';
declare var _;
#Component({
moduleId: module.id,
selector: 'app-root',
template: `<h1>{{title}}</h1>`
})
export class AppComponent {
title = _.version;
}
Where do I go wrong?
And WHY is this so complicated? Will the community accept it being this cumbersome to just add a simple third party library?
Your configuration basically sets up underscore so SystemJS can find it when needed.
When you changed system-config.ts, you told SystemJS: if anyone asks for underscore, it is a file underscore.js that can be found at the vendor/underscore/ folder -- and its module format is CommonJS (cjs).
The changes at angular-cli-build.js are for telling angular-cli what files it should pick and throw into the vendor folder. (So, if you told SystemJS it'd find underscore there, this is what makes it be there.)
But that alone does not import/add underscore into the global scope of your app.
You have to import it at each .ts file so SystemJS adds it to the transpiled .js of that module.
Instead of these two lines:
/// <reference path="../../typings/globals/underscore/index.d.ts" />
declare var _;
Add this to your file:
import * as _ from 'underscore';
If you have problems, try to inspect the generated .js source being executed at the browser. In your case, you'll probably find that there is no require() method importing the underscore.
The doco adding 3rd party lib is misleading.
I have been banging my head for over an hour!
declare var _; // this won't work.
What you need is
/// <reference path="../../../typings/globals/underscore/index.d.ts" />
import * as _ from 'underscore';

ng2-translate (404 not found) I've added it in system.js

I've installed ng2-translate to my proj and console error keep showing 404 of the bundle and xhr error. I've added ng2-translate to my system.config.js that comes with the standard angular2 quickstart but still showing 404 and xhr error.
It's either giving me 404 error or annotation of undefined error :/
github: thread regarding the issue using systemconfig.js
https://github.com/ocombe/ng2-translate/issues/167
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'ng2-translate': 'node_modules/ng2-translate',
'rxjs': 'node_modules/rxjs'
};
Edit:
var packages = {
'ng2-translate': { main: 'ng2-translate.js', defaultExtension: 'js' },
};
I faced to the same issue today
solution is this:
put 'ng2-translate': 'node_modules/ng2-translate/bundles' in system.config.js in the map and 'ng2-translate' : { defaultExtension: 'js' } in packages
I had to map it like this, in the systemjs config to make it work:
'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js'
install the npm module:
npm install ng2-translate --save
update your config like this:
System.config({
packages: {
"ng2-translate": {main: 'ng2-translate.js', "defaultExtension": "js"}
},
map: {
'ng2-translate': 'node_modules/ng2-translate'
}
});
Use ng2-translate like this in .ts file-
import {TranslateService, TranslatePipe} from 'ng2-translate';
See if this helps.
Probably by doing:
'ng2-translate': 'node_modules/ng2-translate',
you are referring index.js
however you might need to point some else .js file such as
'ng2-translate': 'node_modules/ng2-translate/somefile.js',
for example you can do:
System.config({
//... some other stuff
map: {
'ng2-translate': 'node_modules/ng2-translate/ng2-translate.js',
},
packages: {
//... some other stuff, do not put your ng2-translate here
}
});
ng2-translate uses the CommonJS module format as configured in its tsconfig.json:
compilerOptions": {
...
"module": "commonjs",
"target": "es5",
...
}
I successfully added ng2-translate by explicitly specifying this format in the packages section of my SystemJS config.
System.config({
map: {
'ng2-translate': 'node_modules/ng2-translate'
// ... more mappings
},
packages: {
'ng2-bootstrap': {
defaultExtension: 'js',
format: 'cjs'
}
// ... more package definitions
}
});
Refer to the list of supported module formats in the SystemJS documentation for more details.
If like me, you've spent hours trying to fix the ng2-translate (404 not found) issue. Here's is a systemjs.config.js which worked for me. Compliment of Sam Verschueren #github
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
var paths = {
'underscore': 'node_modules/underscore/underscore.js',
'ng2-translate': 'node_modules/ng2-translate/bundles/ng2-translate.umd.js'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages,
paths: paths
};
System.config(config);
})(this);
you need to have a i18n folder in your app with en.json (its the default setting) or whatever file you call from the constructor, looks like:
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}

How do I include a javascript library with angular 2?

How do I use a javascript library with angular 2? I always get an error saying it's not a module.
If I add a script tag to my index.html file pointing to the javascript file, then add it under paths under System.config, then import it, I get an error stating that it's not a module.
I've already tried this and I've also tried this. Neither of them work despite the fact they seem to like to point out that it's easy, and that you can use any of hundreds of libraries.
Here is a javascript library: sheetjs
How do I make this work in angular 2?
index.html
<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script>
system-config.ts
System.config({
...
path: {
xlsx: '../node_modules/xlsx/xlsx.js'
}
});
something.ts
import * as xlsx from 'xlsx';
Error message:
Error: Typescript found the following errors:
C:/___/tmp/broccoli_type_script_compiler-input_base_path-o4TZ9PSC.tmp/0/src/app/something/something.component.ts (9, 23): Cannot find module 'xlsx'.
my systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'src': 'src', // 'dist',
'bin': 'bin',
'#angular': '/node_modules/#angular',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'rxjs': '/node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'src': { defaultExtension: 'js' },
'bin': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
include it in the map variable in this.
add 'xlsx': { defaultExtension: 'js' }, to packages variable. then in your index.html add after the
Maybe this helps:
I noticed, that you are trying to implement the sheetjs/xlsx library. There is a working XLSX library for typescript available here, which works with angular2!
If you are looking for a working demo, have a look here.
You dont included your index.html content, but I assume that the
<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script> tag is imported before your base component . If that is true then try to import the script after the base component and on typescript use: declare var xlsx:any;

AngularJS 2 seed + System.JS - New .ts file doesn't compile

I pulled the latest angularjs2 seed application from github (https://github.com/angular/angular2-seed) and got it running in webstorm.
Now I wanted to add a simple load.ts file which preloads some components:
declare var System: any;
declare var esriSystem: any;
esriSystem.register([
'esri/geometry/Point',
'esri/geometry/geometryEngineAsync',
'esri/Map'
], function() {
// bootstrap the app
System.import('../app')
.then(null, console.error.bind(console));
}, {
outModuleName: 'esri-mods'
});
I would like to use this module inside a new map.service.ts: import { Map } from 'esri-mods'; it tells me that it cannot resolve file 'esri-mods'
The overall structure looks like this:
And the system.config.js as follows:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
app: 'src',
typescript: 'node_modules/typescript/lib/typescript.js',
angular2: 'node_modules/angular2',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'ts',
main: 'app.ts'
},
angular2: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
What is missing for the module to be usable within the application?

Categories

Resources