Angular 2 not rendering dependancy links with file extensions - javascript

I am getting the following errors while running my app:
It seems to be looking for ./app.component, rather than ./app.component.js
Here is my main.ts file:
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
What have I done wrong to configure the dependencies here? NB: If I change the references to import { AppComponent } from './app.component.js';, then the error goes away and I am faced with more of the same errors for other references.
EDIT:
One of the comments has suggested that there might be an issue with my system.config(), which I think sounds very plausible, however, this is and excerpt from my index.html file, which I can't see any issues with?
...
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('client/dev/main.js')
.then(null, console.error.bind(console));
</script>
...

Your mistake is probably that you have :
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('client/dev/main.js')
.then(null, console.error.bind(console));
</script>
instead of
<script>
System.config({
packages: {
"client/dev": { // this line changed, here the directory where your generated `js` files are, has to be specified
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('client/dev/main')
.then(null, console.error.bind(console));
</script>
I had exactly the same problem as you when I started ;)
Also the zone error should disappear if you use the newest angular beta build (12).

Related

Import jquery with SystemJS doesn't work

I can't figure out how to import jQuery with SystemJS in a way that it works into my project.
index.html:
...
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('jquery').catch(function(err){ console.error(err); });
System.import('bootstrap').catch(function(err){ console.error(err); });
</script>
...
error:
(index):26 Error: (SystemJS) Bootstrap's JavaScript requires jQuery
Error: Bootstrap's JavaScript requires jQuery
at eval
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
...
'jquery': "npm:jquery/dist/jquery.min.js",
'bootstrap': "npm:bootstrap/dist/js/bootstrap.min.js",
// other libraries
'rxjs': 'npm:rxjs'
},
// 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'
}
}
});
})(this);
This is happening because bootstrap is importing first.
The imports are asynchronous. One may import before the other. To force order:
System.import('jquery')
.then(function($) {
System.import('bootstrap');
})
.catch(function(err){ console.error(err); });

How to make systemjs module loading work with .net mvc?

I grabbed the ng-book 2 as it seemed like a quality way to figure out Angular2. As a heads up, I've never used any of these module loaders or anything before and I've had very limited use of npm and node so all the terminology and assumed knowledge can be quite confusing.
ng-book 2 uses node but I figured I might as well start off using my usual .NET MVC server as that is what I'll be pairing Angular 2 with at work.
My current issue is apparently in the module loading, as I just keep getting 404 errors when systemjs is trying to load angular packages.
app.ts
/**
* A basic hello-world Angular 2 app
*/
import {
NgModule,
Component
} from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
#Component({
selector: 'hello-world',
template: `
<div>
Hello World
</div>
`
})
class HelloWorld {
}
#NgModule({
declarations: [HelloWorld],
imports: [BrowserModule],
bootstrap: [HelloWorld]
})
class HelloWorldAppModule { }
platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);
systemjs.config.js
// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app/app',
'rxjs': 'app/node_modules/rxjs',
'#angular': 'app/node_modules/#angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'rxjs': { defaultExtension: 'js' }
};
var angularPackages = [
'core',
'common',
'compiler',
'platform-browser',
'platform-browser-dynamic',
'http',
'router',
'forms',
'upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
angularPackages.forEach(function(pkgName) {
packages['#angular/' + pkgName] = {
main: 'bundles/' + pkgName + '.umd.js',
defaultExtension: 'js'
};
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
index.cshtml
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<script src="~/app/node_modules/core-js/client/shim.min.js"></script>
<script src="~/app/node_modules/zone.js/dist/zone.js"></script>
<script src="~/app/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/app/node_modules/systemjs/dist/system.src.js"></script>
<link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" />
<link rel="stylesheet" type="text/css" href="~/app/styles.css" />
</head>
<body>
<script resource="~/app/resources/systemjs.config.js"></script>
<script>
System.import('/app/app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
The layout of the project is like this
And what I end up getting with this are requests like
zone.js:101 GET http://localhost:18481/#angular/core 404 (Not Found)
The first thing I see is that probably your systemjs config is not applied, because you have
<script resource="~/app/resources/systemjs.config.js"></script>
Why do you have resource here? systemjs.config.js contains plain javascript code that should be executed like any other script.

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?

videogular 2 for angular 2 404 error

im trying to create a application with angular 2 ,i using videogular 2,and i install videogular 2 with npm and i check my node_modules and videogular2 exist in directory but when i run my application occur an error :
angular2-polyfills.js:126 GET http://localhost:3000/node_modules/videogular2/core 404 (Not Found)
angular2-polyfills.js:390 Error: Error: XHR error (404 Not Found) loading
and this is my configuration :
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'videogular2': './node_modules/videogular2'
}
});
System.import('app/main')
.then(null, console.error.bind(console));
just in case if anybody needs answer
this is what you would need to include in you system.config.js after installing via npm install videogular2
map:{
'videogular2': 'node_modules/videogular2',
},
packages:{
'videogular2':{
main: 'core.js',
defaultExtension:'js'
}
}
Happy coding......
I would add a packages block for videogular2 in the SystemJS configuration:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
videogular2: { <-------
defaultExtension: 'js'
}
},
map: {
'videogular2': './node_modules/videogular2'
}
});
System.import('app/main')
.then(null, console.error.bind(console));

Categories

Resources