npm link breaks server side pre-rendering

[jmezach]

I have setup a new project using the Yeoman generator and using Angular 2 as my SPA framework. Everything seems to be working just fine. Now I'm trying to fix an issue in a module I'm using (angular2-moment) and I want to link my application to the locally build version of that module that I have on my system. So I used npm link to do that. This creates a symbolic link inside node_modules for my application to the physical location of that module on my system.

Unfortunately once I did that I'm getting the following error message:

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Unexpected value 'MomentModule' imported by the module 'AppModule'
at /Users/jmezach/Projects/blog-engine/node_modules/@angular/compiler/bundles/compiler.umd.js:14126:37
at Array.forEach (native)
at Object.Call (/Users/jmezach/Projects/blog-engine/node_modules/es6-shim/es6-shim.js:289:14)
at Array.forEach (/Users/jmezach/Projects/blog-engine/node_modules/es6-shim/es6-shim.js:1295:17)
at CompileMetadataResolver.getNgModuleMetadata (/Users/jmezach/Projects/blog-engine/node_modules/@angular/compiler/bundles/compiler.umd.js:14111:46)
at RuntimeCompiler._compileComponents (/Users/jmezach/Projects/blog-engine/node_modules/@angular/compiler/bundles/compiler.umd.js:16803:49)
at RuntimeCompiler._compileModuleAndComponents (/Users/jmezach/Projects/blog-engine/node_modules/@angular/compiler/bundles/compiler.umd.js:16741:39)
at RuntimeCompiler.compileModuleAsync (/Users/jmezach/Projects/blog-engine/node_modules/@angular/compiler/bundles/compiler.umd.js:16732:23)
at NodePlatform.bootstrapModule (/Users/jmezach/Projects/blog-engine/node_modules/angular2-platform-node/node-platform.js:436:25)
at NodePlatform.serializeModule (/Users/jmezach/Projects/blog-engine/node_modules/angular2-platform-node/node-platform.js:108:22)
MoveNext

This seems to indicate that it can no longer find the module, but I'm not quite sure why. The structure inside the module folder is exactly the same as when I just npm install the module directly. It looks almost like its not following symlinks. Not sure if this is the right place for this issue but right now I don't know of any other place to look. Any thoughts on this?

[SteveSandersonMS]

Sorry, I couldn't repro a problem with this. Here's what I tried:

1. In a clean new Angular2Spa project, I installed Moment.js (npm install moment). Then I made use of it from from inside home.component.ts:

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
    selector: 'home',
    template: require('./home.component.html')
})
export class HomeComponent {
    public message: string;

    constructor() {
        this.message = moment.version;
    }
}

... and rendered the string from home.component.html:

<h1>Hello, world! Moment version is: {{ message }} </h1>

1. I checked this correctly renders both server-side and client-side
2. Now I deleted the local copy of Moment.js (rm -rf node_modules/moment), and checked that it broke the app as expected (Cannot find module 'moment').
3. In a completely unrelated empty directory elsewhere on the machine, I installed a copy of Moment.js (npm install moment) then ran npm link there
4. Now, back in the Angular 2 app directory, I ran npm link moment. Then I rebuilt the app (webpack --config webpack.config.vendor.js and webpack), then restarted the app (dotnet watch run). It worked.
5. To check for certain it was really loading Moment.js from the external directory, I edited the file moment.js in the external directory, changing the utils_hooks__hooks.version string to some other string. Then I restarted my ASP.NET Core app and saw that my updated (fake) version string did appear correctly.

So I'm not sure what's going wrong in your case. Maybe you forgot to re-run webpack. Or maybe it's some issue in TypeScript like this. If you manage to track this down and can confirm there's a specific issue we could fix, please reopen with details!