Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with setting system.config.js in angular-cli project

See original GitHub issue

Hi,

Could someone help me in using systemJs for an angular-cli project.

I have normally taken angular-cli project with ng new <proj-name> and trying to add system.config.js file in this.

My project structure looks like this

my index,html

<html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <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="https://code.angularjs.org/tools/system.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head> <body> <my-app>Loading...</my-app> </body> </html>

angular-cli.json

{ “project”: { “version”: “1.0.0-beta.17”, “name”: “pack-first-app” }, “apps”: [ { “root”: “src”, “outDir”: “dist”, “assets”: “assets”, “index”: “index.html”, “main”: “main.ts”, “test”: “test.ts”, “tsconfig”: “tsconfig.json”, “prefix”: “app”, “mobile”: false, “styles”: [ “styles.css” ], “scripts”: [], “environments”: { “source”: “environments/environment.ts”, “dev”: “environments/environment.ts”, “prod”: “environments/environment.prod.ts” } } ], “addons”: [], “packages”: [], “e2e”: { “protractor”: { “config”: “./protractor.conf.js” } }, “test”: { “karma”: { “config”: “./karma.conf.js” } }, “defaults”: { “styleExt”: “css”, “prefixInterfaces”: false } }

systemjs.config.js

/**

System configuration for Angular samples
Adjust as necessary for your application needs. */ (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: ‘src’, // 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’
```
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
    app: {
        main: './main.ts',
        defaultExtension: 'ts'
    },
    rxjs: {
        defaultExtension: 'ts'
    }
}
```
}); })(this);

I am seeing the following errors in the console

Please help me in doing a proper setup.

Any help appreciated.

thanks

Issue Analytics

State:
Created 7 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

7reactions

Sumei1009commented, Mar 20, 2017

@filipesilva May I ask where to set the paths and map as in System config if I want to use an external library?

3reactions

vasuneetcommented, Mar 31, 2017

I have the same question. If we need to add the reference of external library which we installed using npm install . How can we refer this in our project.

Top Results From Across the Web

How to set SystemJS config in angular-cli project

I want to use angular2-recaptcha (Angular2-recaptcha) in my project. In documentation I see that I need to config SystemJS. Problem is that ...

Building and serving Angular apps

This page discusses build-specific configuration options for Angular projects. Configuring application environmentslink. You can define different named ...

Package need to be mapped in systemjs.config.js ... - Syncfusion

I'm trying to create a datePicker component from Syncfusion in a project I'm working on. The problem is that Syncfusion ej2-angular-calendars ...

Setting Up Angular from Scratch. No CLI - Medium

No CLI — Learn how your Angular App is put together ... Let's create a configuration file named systemjs.config.js and add with the ......

Using with SystemJS - Kendo UI for Angular - Telerik

The configuration file, which SystemJS uses, is located in the project template under src/systemjs.config.js . The complete list of entry points for all...