Rollup Angular 2 with typescript 2 path alias

Question

I'm trying to rollup an Angular 2 app but I have:

Could not resolve 'app/components/xxx/xxxxx.component' from xxxx\wwwroot\angular\app\app.module.js

The app.module have a reference to xxxxx.component like this:

import { xxxxx } from 'app/components/xxx/xxxxx.component'

so the tsconfig.js has:

"compilerOptions": {
  ...
  "paths": {
    "app/*": [ "./app/*" ],
    ...
  },
  "outDir": "wwwroot", 
  ...
},

How can I resolve path aliases like typescript in rollup?

I tried with

1) https://github.com/frostney/rollup-plugin-alias

rollup-config.js:

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      alias({
            'app': '.' // asuming "wwwroot/angular/app/" is the working dir
      }),
      uglify()
  ]
}

2) https://github.com/dot-build/rollup-plugin-includepaths

rollup-config.js:

let includePathOptions = {
    include: {},
    paths: ['../'], // asuming "wwwroot/angular/app/" is the working dir
    external: [],
    extensions: ['.js']
};

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      includePaths(includePathOptions),
      uglify()
  ]
}

But none of those works. Any idea? Thanks in advance!!!

Answer 1

I am using Angular 4 in an ASP.NET MVC environment and ran into the same problem when using "paths" in my tsconfig.json file.

I also tried using rollup-plugin-alias, rollup-plugin-paths, and rollup-plugin-typescript. None of those worked. However, I found that rollup-plugin-import-alias worked for me.

My AOT tsconfig.json file:

{
    "compilerOptions": {
        // ...
        "baseUrl": "./",
        "paths": {
            "myCommon/*": ["./tmp/myCommonFolder/*"]
        }
        // ...
    }
}

My rollup-config.js file:

import nodeResolve      from 'rollup-plugin-node-resolve';
import commonjs         from 'rollup-plugin-commonjs';
import importAlias      from 'rollup-plugin-import-alias';

export default {
    // ...
    plugins: [
        nodeResolve({jsnext: true, module: true})
        , commonjs({
            include: 'node_modules/rxjs/**'
        })
        , importAlias({
            Paths: {
                // `__dirname` is built into rollup and was needed for me to get the right path
                myCommon: __dirname + '/tmp/myCommonFolder'
            }
            , Extentions: ['js']
        })
    ]
    // ...
};

Side note: when using JIT, my path to the common files can be in some other folder structure outside the root...

"paths": {
    "myCommon/*": ["./../../../Scripts/myCommonFolder/*"]
}

However, AOT and Rollup don't seem to be able to go outside the app root. So, in my gulp task that does the AOT and Rollup build process, I copy everything into a temp folder within the root of my app.

gulp.task('tmp:copy', function () {
    gulp.src(['Scripts/myCommonFolder/**'])
    .pipe(gulp.dest('Areas/Services/Scripts/MyAppRoot/tmp/myCommonFolder'));
});

Answer 2

have you tried using the typescript plugin for rollup?

https://github.com/rollup/rollup-plugin-typescript

install with npm install --save-dev rollup-plugin-typescript

import in your rollup-config.js import typescript from 'rollup-plugin-typescript';

and be sure to add it into the plugins section like

plugins: [ typescript() ]

depending on your project setup u might need to change dependency to use local typescript installation like

    plugins: [
    typescript({
            typescript: require('typescript')
        })
]