@ngtools/webpack breaks when project has # character on path

[dealloc]

Versions

$ node --version
v8.7.0
$ npm --version
5.4.2
$ yarn --version
1.3.2

Running Windows 10 Pro x64
Shell: Git bash

Repro steps

• Clone https://github.com/dealloc/ngtools-webpack-reproduction
• Install dependencies using yarn install
• Start application using yarn start

Observed behavior

You will get a blank page with "Loading..." and in the console the following error:

Uncaught Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.NgModuleResolver.resolve (compiler.js:20233)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15186)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34255)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34216)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:34110)
    at CompilerImpl.webpackJsonp../node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.webpackJsonp../node_modules/@angular/core/esm5/core.js.PlatformRef.bootstrapModule (core.js:5568)
    at Object../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap 1550deb7735f43aaf874:712)
    at fn (bootstrap 1550deb7735f43aaf874:117)
    at Object.2 (main.ts:11)
    at __webpack_require__ (bootstrap 1550deb7735f43aaf874:712)
    at webpackJsonpCallback (bootstrap 1550deb7735f43aaf874:25)
    at app.js:1

Desired behavior

The application should run properly and display the text "Hello world!" in a <h1> tag.

Mention any other details that might be useful (optional)

I have discovered that when running the application from my desktop (or any folder with a short pathname) the application runs properly (showing Hello world!) but when placed in a folder with a longer pathname the application compiles but the produced code is broken and will not run (resulting in the stacktrace given above).

Interestingly, the build sizes are wildly different too differing about ~400kb (invalid code being larger)

[clydin]

Can you provide an example of what would be considered a long path? (Character count, directory depth, etc.)

[dealloc]

Apologies, I thought I had included that in the issue (must've slipped out in editing it).
A short path with which I got it working would be: C:\Users\wannes\Desktop\Frontend (28 characters)
A long path with which the build produces broken code would be: E:\C#46\trunk\DataRouting\Customer\AAA\TruckRegistration\Frontend (58 characters)

I first considered the error might occur because it's on a different drive (E vs C) but placing the project in E:\Frontend yields working code as well.

[filipesilva]

Can you try removing the # from the path? I think there were cases where that broke.

[dealloc]

Removing the # seems to fix the problem indeed.
Any pointers as to where exactly the problem lies? I wouldn't mind creating a PR if it's possible to fix this

[filipesilva]

I think it's in the entry module logic:

angular-cli/packages/@ngtools/webpack/src/angular_compiler_plugin.ts

Lines 133 to 141 in 9b85c07

	get entryModule() {
	if (!this._entryModule) {
	return undefined;
	}
	const splitted = this._entryModule.split('#');
	const path = splitted[0];
	const className = splitted[1] || 'default';
	return { path, className };
	}

It's meant to split something like /path/to/file.ts#ClassName, but can fail to do it properly. It probably needs to be adjusted to try and get the class name only as the last bit. A PR would be most welcome. I'll adjust the issue title accordingly.

[dealloc]

I created a pull request (the second one, I kind of botched the first one) that should hopefully fix this.