Angular RC5 app updated from CLI beta 10 to webpack 2 giving issues.

[hassanasad]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   El Capitan
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.2
   node: 4.4.7
   os: darwin x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   The app was created using angular-cli.beta.10 and now trying to upgrade it to 11-webpack-2

The app compiles just fine without any issues.

However the http://localhost:4200 just shows loading.... text.

In Browser console it spits out:

url_resolver.js:238 Uncaught TypeError: uri.match is not a function_split @ url_resolver.js:238 getUrlScheme @ url_resolver.js:80 componentModuleUrl @ metadata_resolver.js:750 CompileMetadataResolver.getDirectiveMetadata @ metadata_resolver.js:155(anonymous function) @ metadata_resolver.js:267 CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:260(anonymous function) @ metadata_resolver.js:252 CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:239 RuntimeCompiler._compileComponents @ runtime_compiler.js:150 RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:72 RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:49 PlatformRef_._bootstrapModuleWithZone @ application_ref.js:368 PlatformRef_.bootstrapModule @ application_ref.js:361(anonymous function) @ main.ts:9__webpack_require__ @ bootstrap 7dca594…:52(anonymous function) @ environment.dev.ts:6__webpack_require__ @ bootstrap 7dca594…:52webpackJsonpCallback @ bootstrap 7dca594…:23(anonymous function) @ main.bundle.js:1

Am not fully sure where or how to start debugging this issue. Please kindly help me.

P.S: It was a working app before the update to webpack version.

[vapits]

Remove module.id from all components.
This will solve your issues.

[hassanasad]

Wow thanks @vapits - It really did clear out those errors. I believe this should be mentioned on the update guide as well.

I now hit another issue if you be kind enough to shine some light on it :)

Error: Uncaught (in promise): TypeError: Cannot read property 'import' of undefined

Also i noticed that if i change the most of the files CLI re-bundles the app but for some reason the it doesn't notice any changes for one of the modules which is really weird. Any ideas what might be wrong?

[vapits]

Well without your code in this can't be sure.
Open a SO question is my proposal with your code and close this issue.

[antonyRoberts]

hassan the solution for your problem is not to delete moduleId from everything, that will lead to errors importing if you don't change all of your paths.

The answer to the issue is this pull request.

angular/angular@f54f9ef

For you to apply it yourself all you need to do is change metadata_resolver.js in your build

You'll have to go back and undo all of your module.id deletes, or update paths on all of the files you removed moudleId from

[vapits]

@antonyRoberts
module.id from components should be removed. Directives also.

[hassanasad]

So basically i found out that the routes which contain loadChildren property do not detect saved changes for that module.

For example:

const routes: Routes = [
    { path: 'catalog', loadChildren: './catalog/catalog.module' },
    { path: 'login', loadChildren: './login/login.module' },
    { path: 'profile', component: ProfileComponent},
    { path: '', redirectTo: '/catalog', terminal: true },
    { path: '**', component: PageNotFoundComponent },   
];

export const routing = RouterModule.forRoot(routes);

In the above code - /login and /catalog modules do not push saved changes for webpack to rebundle. Perhaps its intentional? (because thats a separate NgModule)

[hassanasad]

Update: This is actually an issue with webpack version of Angular. Here is a solution that should work while angular-cli is being updated: https://gist.github.com/brandonroberts/02cc07face25886fe142c4dbd8da1340

[filipesilva]

module.id removal is mentioned on the upgrade procedure: https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md

./src/app/app.component.ts (and all other components) - removed module.id, sass/less/stylus preprocessing now uses the real extension in styleUrls instead of .css.

The loadChildren issues are addressed by #1632

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}