CODEWITHSUNDEEP
typescriptangularsystemjs
CharlyDelta
CharlyDelta

Reputation: 938

Rename Angular2 import module

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?

Upvotes: 0

Views: 3036

Answers (3)

Madhu Ranjan
Madhu Ranjan

Reputation: 17934

If you have so much problem with @angular dont use it.. Kidding.. you may try below,

create a new file with name angular2 with below,

export * from "@angular/core";

and when you refer you may use

import { Component } from 'path to angular2 module';

Now it is not exactly what you might want because you have to use reference path rather than module name. Also you have to include all the modules from angular you might want to use. You may also filter and expose only what you may want to by using names of export like Component etc, also you have opportunity to add your modules along with angular one's.

If you want to know more about How Module resolution works in Typescript you may look at Typescript Module Resolution

Update : you may have a folder structure like below (excerpts from Typescript Module Resolution),

   /root/src/angular2/package.json (if it specifies a "typings" property)
   /root/src/angular2/index.ts
   /root/src/angular2/index.d.ts

then you may use

   import { Component } from 'angular2';

Upvotes: 1

David Sherret
David Sherret

Reputation: 106740

You can specify a path mapping for this in tsconfig.json:

"compilerOptions": {
    // ...omitted other options...
    "baseUrl": "",
    "paths": {
        "angular2/*": [
            "node_modules/@angular/*"
        ]
    }
}

This feature is coming in TypeScript 2.0, but you can use it today: npm install typescript@next

Upvotes: 1

Thierry Templier
Thierry Templier

Reputation: 202256

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.

Upvotes: 2

Related Questions