Update at the bottom: I am currently facing a massive challenge in converting my extensive Angular 1.6 app to Angular 4.0. The process has turned into quite a formidable task, and I seem to be stuck at a specific point. We have a shared set of utilities that are used across two distinct apps. While attempting to compile this as a module for import through "npm link," I encountered an error upon importing it into my application.
My setup involves webpack 3.
compiler.es5.js:1690 Uncaught Error: Unexpected value 'TestModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.es5.js:1690)
at compiler.es5.js:15382
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
at JitCompiler._loadModules (compiler.es5.js:26795)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26768)
at JitCompiler.compileModuleAsync (compiler.es5.js:26697)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
at PlatformRef_.bootstrapModule (core.es5.js:4522)
at Object.<anonymous> (main.ts:26)
I've created a test case that demonstrates the issue in a minimal way. Although it may seem somewhat complex due to similarities with my actual webpack.config and package.json files, rest assured that the code is stripped down to its essence.
To explore the issue thoroughly, you can view the code here along with steps on how to reproduce it precisely.
Within my application, the main.ts file appears like this...
import './polyfills';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {UpgradeModule} from '@angular/upgrade/static';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {TestModule} from 'ng-module-test';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
UpgradeModule,
TestModule
]
})
export class AppModule {
// Prevent Angular bootstrap action
ngDoBootstrap() {
}
}
// Bootstrapping using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['au.website']);
});
... whereas my module resembles...
import {NgModule} from '@angular/core';
import {Utils} from './utils/module';
@NgModule({
imports: [
Utils
]
})
export class TestModule {};
Your assistance is much appreciated.
Additional update:
In a recent revision, I altered the TestModule import to use a relative path instead of relying on the linked npm module:
// import {TestModule} from 'ng-module-test';
import {TestModule} from '../../ng-module-test/src/main';
However, the result remained consistent. This implies that the issue doesn't pertain to 'npm link,' but rather the segregation of code itself. Can anyone offer insight into this matter?
The aforementioned change has been committed to the repository provided above.
Further update:
This recent development baffles me completely. When I adjust the import statement to read as follows...
import {TestModule} from './ng-module-test/main';
and create a directory named ng-module-test within ng-app-test/src, copying the contents of the ng-module-test/src folder into it, the functionality works—as highlighted by @Hosar's observation in the comments. However, if I attempt to create a symbolic link using ln -s ../../ng-module-test/src ng-module-test so that, essentially, from the OS perspective it remains identical, IT DOES NOT FUNCTION.