CODEWITHSUNDEEP
typescriptangularsystemjs
karns
karns

Reputation: 5867

Default Extension Not Working - SystemJS

So I'm working on an NG2 + Typescript + SystemJS project - I've followed the official angular quick start and my project works fine... until I use Gulp to compile the TS and move the source to a dist directory. Here is the directory structure:

enter image description here

By default, the TS compiler output the JS files right alongside the src files in app and the site worked fine. However, I configured it to output into dist as shown above and now it does not work. It appears that it can find main.js in dist but it cannot find the other files such as dist/services/* and it looks like the cause is SystemJS does not add the default extension of "js".

enter image description here

index.html 

<base href="/">

<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">   

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> 
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

<link rel="stylesheet" href="styles/structure.css">

<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/skins/minimal.css">
<link rel="stylesheet" href="styles/skins/usb.css">

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {        
      dist: {
        format: 'register',
        defaultExtension: 'js',
        defaultJSExtension: true
      }
    }
  });

  System.import('dist/main')
        .then(null, console.error.bind(console));
</script>

Loading...

Note that when I put:

  System.import('app/main')
        .then(null, console.error.bind(console));

And set the compiler to output alongside the source files, it all works great. But when I switch the import to dist/main, it fails as mentioned above.

Q How do I get SystemJS to add the default JS extension in this situation?

Upvotes: 0

Views: 2086

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86740

Seems you project structure same as mine project i have configured my project setup like this - 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true,
                 map: {
                    rxjs: 'node_modules/rxjs'
                },
                packages: {
                    rxjs: {
                    defaultExtension: 'js'
                }
                }
            });
</script>

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script>
    System.import('dist/app');
</script>

please refer to this repo hope this may help you-

https://github.com/MrPardeep/Angular2-DatePicker

Upvotes: 3

Related Questions