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' },
};
Related
I have a javascript bundle that's made available without a '.js' extension, so when SystemJS tries to import bundles/main.js it throws a 404.
I've tried to establish that these bundles have no extension by adding a defaultExtension: '', but to no avail.
Here's the System.import line
System.import("bundles/main")
and my config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
packages: {
'bundles/main': {
format: 'js',
defaultExtension: ''
}
},
meta: {
"Scripts/vendor/*": {
"format": "global"
},
...
EDIT
Note that the issue is that SystemJS is looking for bundles/main.js ... NOT bundles/main as it should be
I am a newbie to Typescript and Angular2.I have an app folder where I am creating ts files and I am trying to generate transpiled 'js' files to another folder built. 'Js' files are being generated successfully but when I try to import the files to html using System.import('built'), scripts are not being refernced and throwing 404. Both 'app' and 'built' folders are added to the root.
Here is my tsconfig.json :
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "built"
}
}
And here I am importing the scripts to index.html :
System.import('built').catch(function(err){ console.error(err); });
Any help.
Edit : Here I have added the systemjs.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
You need to change mapping of app to built as shown,
map: {
// our app is within the app folder
app: 'built', //<-----changed 'app' to 'built'...
...
...
}
I've used Angular's ahead-of-time compilation before successfully. Now I've added routing and lazy loading to my app, and I can't get this to work anymore.
I have updated my code to use the 2.0 (latest) release, and it runs fine when I compile just-in-time. But when compiling ahead-of-time I get the following error:
(index):52 Error: (SystemJS) XHR error (404 Not Found) loading
https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found)
loading https://127.0.0.1:3443/traceur.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29)
at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37)
at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47)
at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33)
Error loading https://127.0.0.1:3443/traceur.js Error loading
https://127.0.0.1:3443/node_modules/#angular/core/src/linker/ng_module_factory.js
as "#angular/core/src/linker/ng_module_factory" from
https://127.0.0.1:3443/dist/app/app.module.ngfactory.js
Looking at app.module.ngfactory.js, there are a bunch of imports similar to the following:
...
var import0 = require('#angular/core/src/linker/ng_module_factory');
var import1 = require('./app.module');
var import2 = require('#angular/common/src/common_module');
var import3 = require('#angular/core/src/application_module');
var import4 = require('#angular/platform-browser/src/browser');
var import5 = require('#angular/forms/src/directives');
var import6 = require('#angular/forms/src/form_providers');
...
I've noticed that if I change
var import0 = require('#angular/core/src/linker/ng_module_factory');
to
import * as import0 from '#angular/core/src/linker/ng_module_factory';
SystemJS accepts this line and the same error is triggered for the next line, i.e.
var import1 = require('./app.module');
So I've been trying to get SystemJS to recognize this CommonJS style format, but this just results in other errors, none of which are any clearer than the one above.
Edit:
When I switch to using es2015 modules in tsconfig and run the app, I get the (dreaded) traceur.js error:
https://127.0.0.1:3443/traceur.js Failed to load resource: the server
responded with a status of 404 (Not Found) 2016-09-26 10:11:19.842
127.0.0.1/:52 Error: (SystemJS) XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found)
loading https://127.0.0.1:3443/traceur.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29)
at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37)
at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47)
at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33)
Error loading https://127.0.0.1:3443/traceur.js Error loading
https://127.0.0.1:3443/dist/app/main.js
I've encountered this before and resolved it by removing commented out code that contained an import statement. On this occasion I don't have any lines in my code like this.
Here is my systemjs.config.js:
(function(global) {
System.defaultJSExtensions = true;
System.defaultExtension = 'js';
// map tells the System loader where to look for things
// N.B. the dots at the start of the paths are very important!
var map = {
'app': './dist/app',
'#angular': './node_modules/#angular',
'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' }
};
var ngPackageNames = [
'common',
'compiler',
'compiler-cli',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'tsc-wrapped',
'upgrade'
];
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
console.log("SystemJS packages:", packages);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
Edit 2:
When I set the format of 'app' to 'cjs' in systemjs.config.js, i.e.
'app': { main: 'main.js', defaultExtension: 'js', format: 'cjs' },
I no longer get the error in app.module.ngfactory.js mentioned above when the code is compiled using commonjs.
However, when running in a browser, I then get the following error (after installing traceur; without traceur I just get the above traceur error):
(index):52 Error: (SystemJS) No provider for NgZone! Error: No
provider for NgZone!
at NoProviderError.Error (native)
at NoProviderError.BaseError [as constructor] (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:1255:38)
at NoProviderError.AbstractProviderError [as constructor] (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:1739:20)
at new NoProviderError (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:1770:20)
at ReflectiveInjector_._throwOrNull (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:3366:23)
at ReflectiveInjector_._getByKeyDefault (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:3394:29)
at ReflectiveInjector_._getByKey (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:3357:29)
at ReflectiveInjector_.get (https://147.252.67.223:3443/node_modules/#angular/core/bundles/core.umd.js:3166:25)
at AppModuleInjector.createInternal (https://147.252.67.223:3443/dist/app/app.module.ngfactory.js:610:69)
at AppModuleInjector.NgModuleInjector.create (https://147.252.67.223:3443/node_modules/#angular/core/src/linker/ng_module_factory.js!transpiled:96:32)
Evaluating https://147.252.67.223:3443/dist/app/main.js Error
loading https://147.252.67.223:3443/dist/app/main.js
My tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"rootDir":"./src",
"outDir":"./dist"
},
"angularCompilerOptions": {
"genDir": ".",
"debug": true,
"skipMetadataEmit": true
}
}
Any help is much appreciated.
I ran into similar issue when I switch from Angular RC6 to 2.0.0, due to systemjs.config.js.
I end up re-do the whole systemjs.config.js base on the latest quick start guide: https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files with some modification.
One issue I see in your systemjs.config.js is missing reference to following packages:
es6-shim (or core-js)
reflect-metadata
zone.js
Following is my systemjs.config.js
(function (global) {
System.config({
paths: {
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'es6-shim': 'npm:es6-shim',
'reflect-metadata': 'npm:reflect-metadata',
'rxjs': 'npm:rxjs',
'zone.js': 'npm:zone.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'app': { main: 'main.js', defaultExtension: 'js' },
'es6-shim': { main: 'es6-shim.min.js', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect.js', defaultExtension: 'js' },
'rxjs': { main: 'bundles/Rx.min.js', defaultExtension: 'js' },
'zone.js': { main: 'dist/zone.min.js', defaultExtension: 'js' }
}
});
})(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.
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.