Rename Angular2 import module

Question

I wanted to rename the @angular module to angular2, since I find it better readable and wanted to understand how imports work.

So before my attempt to change this, the systemjs.config.js looked like this:

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        '@angular/common': { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

And the imports in app-Typescript-files looked like this:

import { Component } from '@angular/core';

This works as expected. Now I changed the systemjs.config.js to this:

(function(global)
{
    var map =
    {
        'app': 'app', // 'dist',
        'angular2': 'node_modules/@angular',
        /*...*/
    };

    var packages =
    {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'angular2/common', { main: 'index.js', defaultExtension: 'js' };
        /*...*/
    };

    var config =
    {
        map: map,
        packages: packages
    };

    if (global.filterSystemConfig)
    {
        global.filterSystemConfig(config);
    }

    System.config(config);
})(this);

So that I could import Angular2 modules like this:

import { Component } from 'angular2/core';

When I try to run npm start, I get the following errow now:

file-where-i-import.component.ts(1,32): error TS2307: Cannot find module 'angular2/core'.

Why does it not work like that? What am I missing?

Answer 1

The problem is that the SystemJS configuration is only for runtime.

TypeScript compilation relies on d.ts files for modules, types, ... and on this configuration. The compiler will look into the @angular folder under node_modules for this to resolve modules so module names for Angular2 will necessary start with the @angular/ prefix.