Skip to content

Commit 0b9a567

Browse files
TheLarkInnTheLarkInn
authored
Added support to resolve modules using ts. path mapping strategy (#3)
1 parent ed1c7fa commit 0b9a567

File tree

4 files changed

+85
-54
lines changed

4 files changed

+85
-54
lines changed

‎addon/ng2/models/webpack-build-common.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const getWebpackCommonConfig = function(projectRoot: string) {
1717
devtool: 'inline-source-map',
1818
resolve: {
1919
extensions: ['', '.ts', '.js'],
20+
root: path.resolve(projectRoot, './src'),
2021
plugins: [
2122
new PathsPlugin(awesomeTypescriptLoaderConfig)
2223
]

‎addon/ng2/models/webpack-build-material2.ts‎

Lines changed: 77 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,65 @@
66
// Do a find and replace on the src directory
77
// .css'] => .scss']
88
// This allows for angular2-template-loader to transpile the sass correctly.
9-
109
import * as webpack from 'webpack';
10+
import {PathsPlugin, LoaderConfig} from '../utilities/ts-path-mappings-webpack-plugin';
1111

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

1717

18-
var components = [
19-
'button',
20-
'card',
21-
'checkbox',
22-
'grid-list',
23-
'icon',
24-
'input',
25-
'list',
26-
'progress-bar',
27-
'progress-circle',
28-
'radio',
29-
'sidenav',
30-
'slide-toggle',
31-
'button-toggle',
32-
'tabs',
33-
'toolbar'
34-
];
18+
// var components = [
19+
// 'button',
20+
// 'card',
21+
// 'checkbox',
22+
// 'grid-list',
23+
// 'icon',
24+
// 'input',
25+
// 'list',
26+
// 'progress-bar',
27+
// 'progress-circle',
28+
// 'radio',
29+
// 'sidenav',
30+
// 'slide-toggle',
31+
// 'button-toggle',
32+
// 'tabs',
33+
// 'toolbar'
34+
// ];
3535

3636
export const getWebpackMaterialConfig = function(projectRoot: string) {
37+
const awesomeTypescriptLoaderConfig: LoaderConfig | any = {
38+
useWebpackText: true,
39+
useForkChecker: true,
40+
tsconfig: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
41+
}
3742
/** Map relative paths to URLs. */
38-
var aliasMap: any = {
39-
'@angular2-material/core': path.resolve(projectRoot, './src/core'),
40-
};
43+
// var aliasMap: any = {
44+
// '@angular2-material/core': path.resolve(projectRoot, './src/core'),
45+
// };
4146

42-
components.forEach(function (name) {
43-
aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
44-
return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
45-
});
47+
// components.forEach(function (name) {
48+
// aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
49+
// return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
50+
// });
4651

4752
return {
4853
devtool: 'inline-source-map',
4954
resolve: {
5055
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
51-
root: path.resolve(projectRoot, './'),
52-
alias: aliasMap
56+
57+
plugins: [
58+
new PathsPlugin(awesomeTypescriptLoaderConfig)
59+
]
60+
// alias: aliasMap
5361
},
5462
sassLoader: {
5563
includePaths: [
5664
// This allows for automatic resolving of @import's for sass for variables.
5765
path.resolve(projectRoot, './src/core/style')
5866
]
5967
},
60-
debug: true,
6168
context: path.resolve(__dirname, './'),
6269
entry: {
6370
main: [path.resolve(projectRoot, './src/demo-app/main.ts')],
@@ -78,14 +85,20 @@ export const getWebpackMaterialConfig = function(projectRoot: string) {
7885
]
7986
}
8087
],
81-
ts: {
82-
configFileName: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
83-
},
88+
// ts: {
89+
// configFileName: path.resolve(projectRoot, './src/demo-app/tsconfig.json')
90+
// },
8491
loaders: [
8592
{
8693
test: /\.ts$/,
8794
loaders: [
88-
'ts-loader', 'angular2-template-loader'
95+
{
96+
loader: 'awesome-typescript-loader',
97+
query: awesomeTypescriptLoaderConfig
98+
},
99+
{
100+
loader: 'angular2-template-loader'
101+
}
89102
],
90103
exclude: [/\.(spec|e2e)\.ts$/]
91104
},
@@ -115,23 +128,32 @@ export const getWebpackMaterialConfig = function(projectRoot: string) {
115128
}
116129
};
117130
}
118-
export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
131+
132+
export const getWebpackMaterialE2EConfig = function(projectRoot: string) {
133+
const awesomeTypescriptLoaderConfig: LoaderConfig | any = {
134+
useWebpackText: true,
135+
useForkChecker: true,
136+
tsconfig: path.resolve(projectRoot, './src/e2e-app/tsconfig.json')
137+
}
119138
/** Map relative paths to URLs. */
120-
var aliasMap: any = {
121-
'@angular2-material/core': path.resolve(projectRoot, './src/core'),
122-
};
139+
// var aliasMap: any = {
140+
// '@angular2-material/core': path.resolve(projectRoot, './src/core'),
141+
// };
123142

124-
components.forEach(function (name) {
125-
aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
126-
return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
127-
});
143+
// components.forEach(function (name) {
144+
// aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
145+
// return aliasMap[("@angular2-material/" + name)] = path.resolve(projectRoot, "./src/components/" + name);
146+
// });
128147

129148
return {
130149
devtool: 'inline-source-map',
131150
resolve: {
132151
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
133-
root: path.resolve(projectRoot, './'),
134-
alias: aliasMap
152+
153+
plugins: [
154+
new PathsPlugin(awesomeTypescriptLoaderConfig)
155+
]
156+
// alias: aliasMap
135157
},
136158
sassLoader: {
137159
includePaths: [
@@ -142,8 +164,8 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
142164
debug: true,
143165
context: path.resolve(__dirname, './'),
144166
entry: {
145-
main: [path.resolve(projectRoot, './src/e2e/main.ts')],
146-
vendor: path.resolve(projectRoot, './src/e2e/vendor.ts')
167+
main: [path.resolve(projectRoot, './src/e2e-app/main.ts')],
168+
vendor: path.resolve(projectRoot, './src/e2e-app/vendor.ts')
147169
},
148170
output: {
149171
path: './dist',
@@ -160,14 +182,20 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
160182
]
161183
}
162184
],
163-
ts: {
164-
configFileName: path.resolve(projectRoot, './src/e2e/tsconfig.json')
165-
},
185+
// ts: {
186+
// configFileName: path.resolve(projectRoot, './src/e2e-app/tsconfig.json')
187+
// },
166188
loaders: [
167189
{
168190
test: /\.ts$/,
169191
loaders: [
170-
'ts-loader', 'angular2-template-loader'
192+
{
193+
loader: 'awesome-typescript-loader',
194+
query: awesomeTypescriptLoaderConfig
195+
},
196+
{
197+
loader: 'angular2-template-loader'
198+
}
171199
],
172200
exclude: [/\.(spec|e2e)\.ts$/]
173201
},
@@ -184,7 +212,7 @@ export const getWebpackMaterialE2EConfig = function(projectRoot: Function) {
184212
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
185213
new ForkCheckerPlugin(),
186214
new HtmlWebpackPlugin({
187-
template: path.resolve(projectRoot, './src/e2e/index.html'),
215+
template: path.resolve(projectRoot, './src/e2e-app/index.html'),
188216
chunksSortMode: 'dependency'
189217
}),
190218
],

‎addon/ng2/models/webpack-config.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,13 @@ export class NgCliWebpackConfig {
2525
private webpackMobileProdConfigPartial: any;
2626

2727
constructor(public ngCliProject: any, public environment: string) {
28-
this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root);
29-
this.webpackMaterialConfig = getWebpackMaterialConfig(this.ngCliProject.root);
30-
this.webpackMaterialE2EConfig = getWebpackMaterialE2EConfig(this.ngCliProject.root);
28+
if (ngCliProject.pkg.name === 'material2') {
29+
this.webpackMaterialConfig = getWebpackMaterialConfig(this.ngCliProject.root);
30+
this.webpackMaterialE2EConfig = getWebpackMaterialE2EConfig(this.ngCliProject.root);
31+
} else {
32+
this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root);
33+
}
34+
3135
this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root);
3236
this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root);
3337

‎addon/ng2/tasks/build-webpack.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@ module.exports = Task.extend({
1717
var project = this.cliProject;
1818

1919
rimraf.sync(path.resolve(project.root, runTaskOptions.outputPath));
20-
2120
var config = new NgCliWebpackConfig(project, runTaskOptions.environment).config;
2221
const webpackCompiler = webpack(config);
2322

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

26-
2725
webpackCompiler.apply(new ProgressPlugin({
2826
profile: true
2927
}));

0 commit comments

Comments
 (0)