How does typescript know about the systemJS config

Question

I am building and Angular2 application in a ASP.Net core project. I have systemJS configured to map third party modules but I am getting compile errors.

My index.html references the systemJS.config.js file and I think it's correct. However, index.html is a runtime file and I don't think the typescript compiler knows about it.

How does typescript know about systemjs (and it's config) at compile time?

One of the third party modules is ng2-file-upload.

systemjs.config.js has this:

    var map = {
        'app': 'lib/spa', // 'dist',
        'rxjs': 'lib/js/rxjs',
        'angular2-in-memory-web-api': 'lib/js/angular2-in-memory-web-api',
        '@angular': 'lib/js/@angular',
        'ng2-file-upload': 'lib/js/ng2-file-upload/ng2-file-upload'
    };
    var config = {
        defaultJSExtensions: true,
        map: map,
        packages: packages
    }
    System.config(config);

This is referenced from index.html as:

<script>
   System.import('app').catch(function(err){ console.error(err);  });
</script>

In my component I use import like this:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

I get this compiler error:

error TS2307: Cannot find module 'ng2-file-upload'.

My thought is that typescript does not know about the ng2-file-upload alias setup in the map for systemJS. How does typescript know about this?

Madhu Ranjan Madhu Ranjan · Accepted Answer · 2016-05-11T15:13:42

Here you go.

How does typescript know about systemjs (and it's config) at compile time?

you may have a typings folder inside your project which should be consisting definitions for systemjs which gets you intellisense. and for compilation Typescript follows a convention for Module Resolution - Typescript.

For the 3rd Party library ng2-file-upload

I see there is a configuration like below in your system config file, I guess while building you are putting file for this module from node_modules to lib/js folder.

   'ng2-file-upload': 'lib/js/ng2-file-upload/ng2-file-upload'

Ideally if you have node_modules in your project Typescript will resolve it using the Module Resolution convention.

If you do not have a conventional folder structure typescript may not be able to resolve module,

However you may include --noResolve

Using --noResolve

Normally the compiler will attempt to resolve all module imports before it starts the compilation process. Every time it successfully resolves an import to a file, the file is added to the set of files the compiler will process later on.

The --noResolve compiler options instructs the compiler not to “add” any files to the compilation that were not passed on the command line. It will still try to resolve the module to files, but if the file as not specified, it will not be included.

Not sure on above approach you may have to try and see.

How does typescript know about the systemJS config

1 Answers