Skip to content

Commit

Permalink
Added support to resolve modules using ts. path mapping strategy (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheLarkInn
TheLarkInn authored Jul 7, 2016
1 parent ed1c7fa commit 0b9a567
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 54 deletions.
1 change: 1 addition & 0 deletions addon/ng2/models/webpack-build-common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const getWebpackCommonConfig = function(projectRoot: string) {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.ts', '.js'],
root: path.resolve(projectRoot, './src'),
plugins: [
new PathsPlugin(awesomeTypescriptLoaderConfig)
]
Expand Down
126 changes: 77 additions & 49 deletions addon/ng2/models/webpack-build-material2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,65 @@
// Do a find and replace on the src directory
// .css'] => .scss']
// This allows for angular2-template-loader to transpile the sass correctly.

import * as webpack from 'webpack';
import {PathsPlugin, LoaderConfig} from '../utilities/ts-path-mappings-webpack-plugin';

const path = require('path');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


var components = [
'button',
'card',
'checkbox',
'grid-list',
'icon',
'input',
'list',
'progress-bar',
'progress-circle',
'radio',
'sidenav',
'slide-toggle',
'button-toggle',
'tabs',
'toolbar'
];
// var components = [
// 'button',
// 'card',
// 'checkbox',
// 'grid-list',
// 'icon',
// 'input',
// 'list',
// 'progress-bar',
// 'progress-circle',
// 'radio',
// 'sidenav',
// 'slide-toggle',
// 'button-toggle',
// 'tabs',
// 'toolbar'
// ];

export const getWebpackMaterialConfig = function(projectRoot: string) {
const awesomeTypescriptLoaderConfig: LoaderConfig | any = {
useWebpackText: true,
useForkChecker: true,
tsconfig: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
}
/** Map relative paths to URLs. */
var aliasMap: any = {
'@angular2-material/core': path.resolve(projectRoot, './src/core'),
};
// var aliasMap: any = {
// '@angular2-material/core': path.resolve(projectRoot, './src/core'),
// };

components.forEach(function (name) {
aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
});
// components.forEach(function (name) {
// aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
// return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
// });

return {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
root: path.resolve(projectRoot, './'),
alias: aliasMap

plugins: [
new PathsPlugin(awesomeTypescriptLoaderConfig)
]
// alias: aliasMap
},
sassLoader: {
includePaths: [
// This allows for automatic resolving of @import's for sass for variables.
path.resolve(projectRoot, './src/core/style')
]
},
debug: true,
context: path.resolve(__dirname, './'),
entry: {
main: [path.resolve(projectRoot, './src/demo-app/main.ts')],
Expand All @@ -78,14 +85,20 @@ export const getWebpackMaterialConfig = function(projectRoot: string) {
]
}
],
ts: {
configFileName: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
},
// ts: {
// configFileName: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
// },
loaders: [
{
test: /\.ts$/,
loaders: [
'ts-loader', 'angular2-template-loader'
{
loader: 'awesome-typescript-loader',
query: awesomeTypescriptLoaderConfig
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.(spec|e2e)\.ts$/]
},
Expand Down Expand Up @@ -115,23 +128,32 @@ export const getWebpackMaterialConfig = function(projectRoot: string) {
}
};
}
export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {

export const getWebpackMaterialE2EConfig = function(projectRoot: string) {
const awesomeTypescriptLoaderConfig: LoaderConfig | any = {
useWebpackText: true,
useForkChecker: true,
tsconfig: path.resolve(projectRoot, './src/e2e-app/tsconfig.json')
}
/** Map relative paths to URLs. */
var aliasMap: any = {
'@angular2-material/core': path.resolve(projectRoot, './src/core'),
};
// var aliasMap: any = {
// '@angular2-material/core': path.resolve(projectRoot, './src/core'),
// };

components.forEach(function (name) {
aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
});
// components.forEach(function (name) {
// aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
// return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
// });

return {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
root: path.resolve(projectRoot, './'),
alias: aliasMap

plugins: [
new PathsPlugin(awesomeTypescriptLoaderConfig)
]
// alias: aliasMap
},
sassLoader: {
includePaths: [
Expand All @@ -142,8 +164,8 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
debug: true,
context: path.resolve(__dirname, './'),
entry: {
main: [path.resolve(projectRoot, './src/e2e/main.ts')],
vendor: path.resolve(projectRoot, './src/e2e/vendor.ts')
main: [path.resolve(projectRoot, './src/e2e-app/main.ts')],
vendor: path.resolve(projectRoot, './src/e2e-app/vendor.ts')
},
output: {
path: './dist',
Expand All @@ -160,14 +182,20 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
]
}
],
ts: {
configFileName: path.resolve(projectRoot, './src/e2e/tsconfig.json')
},
// ts: {
// configFileName: path.resolve(projectRoot, './src/e2e-app/tsconfig.json')
// },
loaders: [
{
test: /\.ts$/,
loaders: [
'ts-loader', 'angular2-template-loader'
{
loader: 'awesome-typescript-loader',
query: awesomeTypescriptLoaderConfig
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.(spec|e2e)\.ts$/]
},
Expand All @@ -184,7 +212,7 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
new ForkCheckerPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(projectRoot, './src/e2e/index.html'),
template: path.resolve(projectRoot, './src/e2e-app/index.html'),
chunksSortMode: 'dependency'
}),
],
Expand Down
10 changes: 7 additions & 3 deletions addon/ng2/models/webpack-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,13 @@ export class NgCliWebpackConfig {
private webpackMobileProdConfigPartial: any;

constructor(public ngCliProject: any, public environment: string) {
this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root);
this.webpackMaterialConfig = getWebpackMaterialConfig(this.ngCliProject.root);
this.webpackMaterialE2EConfig = getWebpackMaterialE2EConfig(this.ngCliProject.root);
if (ngCliProject.pkg.name === 'material2') {
this.webpackMaterialConfig = getWebpackMaterialConfig(this.ngCliProject.root);
this.webpackMaterialE2EConfig = getWebpackMaterialE2EConfig(this.ngCliProject.root);
} else {
this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root);
}

this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root);
this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root);

Expand Down
2 changes: 0 additions & 2 deletions addon/ng2/tasks/build-webpack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,11 @@ module.exports = Task.extend({
var project = this.cliProject;

rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath));

var config = new NgCliWebpackConfig(project, runTaskOptions.environment).config;
const webpackCompiler = webpack(config);

const ProgressPlugin = require('webpack/lib/ProgressPlugin');


webpackCompiler.apply(new ProgressPlugin({
profile: true
}));
Expand Down

0 comments on commit 0b9a567

Please sign in to comment.