I started to learn Angular2 and I want to use ng-bootstrap in my project. However, I could not make a working project. It fails on importing ng-bootstrap. Since I am a beginner, I don't know if the problem is because of the code or something other that I made wrong.
Can you provide me a working and simple project with ng-bootstrap and Angular2 so I can try to make it work on my computer?
Edit:
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';
#NgModule({
imports: [ NgbModule, BrowserModule ],
declarations: [ NgbdAlertCloseable, AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
systemjs.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(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',
'#ng-bootstrap': 'node_modules/#ng-bootstrap'
};
// 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' },
'ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
var ngBootstrapPackageNames = [
'accordion',
'alert',
'bundles',
'buttons',
'carousel',
'collapse',
'dropdown',
'esm',
'modal',
'pagination',
'popover',
'progressbar',
'rating',
'tabset',
'timepicker',
'tooltip',
'typeahead',
'util'
];
// 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' };
}
function ngBootstrapPackIndex(pkgName) {
packages['#ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
}
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
// 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);
Error:
I changed the
'ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
line in systemjs.config.js as
'#ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
And it worked!
Related
I have been trying to add ng-bootstrap in my Angular 2 application for drop down. I am getting following error in console.
Console error
the following are my System.config.js code,
System.config.js code
Can any one please explain how should I install and use ng2-bootstrap. Thanks.
Updated my system.config.js code,
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Complete copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../../node_modules/#types/"
]
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/common': 'npm:#angular/common#2.2.1/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler#2.2.1/bundles/compiler.umd.js',
'#angular/core': 'npm:#angular/core#2.2.1/bundles/core.umd.js',
'#angular/forms': 'npm:#angular/forms#2.2.1/bundles/forms.umd.js',
'#angular/http': 'npm:#angular/http#2.2.1/bundles/http.umd.js',
'#angular/http/testing': 'npm:#angular/http#2.2.1/bundles/http-testing.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.2.1/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.2.1/bundles/platform-browser-dynamic.umd.js',
'#angular/router': 'npm:#angular/router#3.2.1/bundles/router.umd.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
// other libraries
'rxjs': 'npm:rxjs#5.0.0-rc.3',
'ts': 'npm:plugin-typescript#4.0.10/lib/plugin.js',
'typescript': 'npm:typescript#2.0.3/lib/typescript.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
},
// ng2-bootstrap
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
rxjs: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('#angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
})(this);
Looks like, there is a mistake in your packages section. You have added ng2-bootstrap inside app.
Update packages like this-
// 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',
// ng2-bootstrap
'moment': 'node_modules/moment',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
};
// 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-bootstrap
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
};
In Angular 2 RC4 how can I define base correctly in another way, because if it's defined I am not able to use the fill: url("#grad1");.
I could hack my site to run used by this blog post:
https://stacksandfoundations.com/2016/06/22/svgs-funciri-angular2-and-the-base-tag/
I rewrote the dependency js paths at the begining, but if the user wants open a link what is not index, I get this error: http://localhost:3000/foods/app/components/app.component.html 404 (Not Found)
The boot.js is initialized.
Do you have any idea, how could I fix it?
My system js look like this:
(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',
'linqts': '/node_modules/linqts'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'/app': { main: '/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: '/index.js', defaultExtension: 'js' },
'linqts': { main: '/linq.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
};
System.config(config);
})(this);
How do add new packages I just downloaded from npm to my Angular 2 components using SystemJS and using this system.config.js file. The code bellow was generated for me by a starter package.
I have tried to put links to the modules in the map and packages section of this file but it doesn't seem to work. All I want to know is how can I take a library such as underscore js located in my node_modules and input it into this file so I can easily import the file in my typescript angular components.
var isPublic = typeof window != "undefined";
(function(global) {
var map = {
'app': 'client', // 'dist',
'#angular': (isPublic)? '#angular' : 'node_modules/#angular',
'#angular/router': (isPublic)? '#angular/router' : 'node_modules/#angular/router',
'angular2-in-memory-web-api': (isPublic)? 'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api',
'rxjs': (isPublic)? 'rxjs' : 'node_modules/rxjs',
'ng-semantic': (isPublic)? 'ng-semantic' : 'node_modules/ng-semantic'
};
// 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' },
'ng2-ace': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng-semantic': { main: 'ng-semantic', defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'forms',
'platform-browser',
'platform-browser-dynamic',
'router-deprecated',
'upgrade',
'ng2-ace'
];
// Individual files (~300 requests):x
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' };
}
packages['#angular/router'] = { main: 'index.js', defaultExtension: 'js' };
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);
Just include this file into your main HTML file (index.html):
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script> <-----
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
Edit
You need to install the library using npm and configure it within the SystemJS configuration:
System.config({
(...)
map: {
underscore: 'node_modules/underscore/underscore.js'
}
});
See this question (similar but for Lodash):
Importing lodash into app.ts file
Don't forget to install typings for the Underscore library.
When working through the quickstart tutorial today at https://angular.io/docs/ts/latest/tutorial/ when I got to the step
npm start
I saw two 404 missing errors:
404 GET /node_modules/#angular/platform-browser-dynamic/platform-browser-dynamic.umd.js
404 GET /node_modules/#angular/core/core.umd.js
I have copied the systemjs.config.js and other files directly from the tutorial (see below). This is using 2.0.0-rc.2. Do any Angular experts know what is wrong with the quickstart code at the present time? Should I try a webpack tooling instead?
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(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'
};
// 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' },
};
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);
Your packUmd function should be like:
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/' + pkgName] = {
main: '/bundles/' + pkgName + '.umd.js', //bundles path
defaultExtension: 'js'
};
}
Notice /bundles/
How programatically solve this is:
function packUmd(pkgName) {
if (pkgName != 'router'){
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
}
else{
packages['#angular/' + pkgName] = {
main: 'bundles/' + pkgName + '.umd.js',
defaultExtension: 'js'
};
}
};
NOTE: (beginner-alert) May be not best approach to resolve.
I search around 2hours where is my error.
That is the reason, I try to ask my question here.
I have this error :
"angular2-cookies/core.js not found"
I have installed angular2-cookie correctly with npm.
Here is my ServiceCookies :
import { Injectable } from '#angular/core';
import {CookieService, CookieOptionsArgs} from 'angular2-cookie/core';
#Injectable()
export class CookiesService {
private option: CookieOptionsArgs;
constructor(private cookieService: CookieService) {
}
getCookie(key: string) {
return this.cookieService.get('cookieName');
}
setCookie(key: string, value: string) {
var expiresDate = new Date(new Date().getTime() + 3600 * 1000);
this.option.expires = expiresDate.toDateString();
// 10 ans pour le moment
this.cookieService.put(key, value, this.option.expires);
}
deleteCookie(key: string) {
this.cookieService.remove(key);
}
}
Here is my system.config.js where i declare paths files for the running of my app.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'js/rxjs',
'#angular': 'js/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'angular2-cookie': 'node_modules/angular2-cookies'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'angular2-cookie': { main: 'core.js', defaultExtension: 'js' }
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router-deprecated',
'#angular/router',
'#angular/testing',
'#angular/upgrade'
];
var paths = {
'node_modules': 'node_modules',
'app': 'app/',
'app/*': 'app/*'
};
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
paths: paths
}
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
One typo I've found in your system.config.js is that is should be
'angular2-cookie': 'node_modules/angular2-cookie'
and not
'angular2-cookie': 'node_modules/angular2-cookies'
in your map{}, not sure if that will fix it completely.