[@ngtools/webpack] Webpack cannot distinguish on context and would fail to load the proper one.

[evgeniyefimov]

Versions

node: v8.11.0
npm: 5.7.1
Windows 10

"@angular/animations": "5.2.9",
"@angular/cdk": "5.2.4",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/core": "5.2.9",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@angular/router": "5.2.9",
"@angular/compiler-cli": "5.2.9",
"@ngtools/webpack": "1.10.2",
"typescript": "2.7.2",
"webpack": "3.11.0",

Repro steps

app-routing.module.ts

export const ROUTES: Routes = [
    {
        loadChildren: "./student/student.module#StudentModule",
        path: "student",
    },
];

student-routing.module.ts

export const ROUTES: Routes = [
     {
         loadChildren: "./question/question.module#QuestionModule",
         path: "question",
     },
     {
         loadChildren: "./settings/settings.module#SettingsModule",
         path: "settings",
     },
];

question-routing.module.ts

export const ROUTES: Routes = [
     {
         loadChildren: "./settings/settings.module#SettingsModule",
         path: "settings",
     },
];

Observed behavior

ERROR in NaNbut they point to different modules "(C:/Projects/Web/App/src/student/settings/settings.module.ts and "C:/Projects/Web/App/src/student/questions/settings/settings.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.

Desired behavior

We have a lot of modules with the same names (settings, instructions, etc.), but they are belong to different parents with different urls, they are not exported outside of the parent's scope. It works fine with awesome-typescript-loader, angular-router-loader and angular2-template-loader. We expected the same behavior with @ngtools/webpack.

Mention any other details that might be useful (optional)

I removed all other lazy modules from the project to check and this issue was still there.
Tried to use absolute paths as described here #8722 (comment), but had another issue
ERROR in Could not resolve module App/src/student/student.module relative to C:/Projects/Web/App/src/app-routing.module.ts

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config

const srcPath = path.resolve(__dirname, "App/src");

module.exports = {
    entry: {
        app: srcPath + "/main.ts",
        polyfills: srcPath + "/polyfills.ts",
        vendor: srcPath + "/vendor.ts",
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    module: {
        loaders: [
            {
                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                    loader: "@ngtools/webpack",
            },
        ]
    },
    plugins: [
            new AngularCompilerPlugin({
                tsConfigPath: "./tsconfig.json",
                entryModule: "./App/src/app.module#AppModule",
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
            new HardSourceWebpackPlugin(),
    ]
};

[tobihagemann]

I also had trouble with this. Didn't understand why absolute paths wouldn't work. The solution is that you have to be aware where your baseUrl is. See this comment on Stack Overflow: https://stackoverflow.com/questions/47601637/angular-4-could-not-resolve-submodule-for-for-routing#comment88223393_48028980

E.g., if you have "baseUrl": "./" in your root tsconfig.json, your absolute path probably begins with src/app/….

E.g., if you have "baseUrl": "./" in your src tsconfig.app.json, your absolute path probably begins with app/….

It all depends on how you set up your project structure and named your directories. In my case, I had to prepend a src/ to my absolute paths.

[mgechev]

Are you still able to reproduce this issue with the latest version?

[socialbi]

I'm still getting the issue. If I use the absolute path, the issue goes away. I have multiple modules with the same name but different paths. Any suggestions as to how to resolve this error? thanks
Angular: 7.1.3
webpack 4.23.1

[eggp]

@mgechev
Hello,
I also have this problem right now
I made a sample code: https://github.com/eggp/ng-7-lazy-build-error

my test build command: ng build --configuration=production
result:

master branch ng cli version: 7.1.3
cli7.2.1 branch is actual cli version

[jvoigt]

same here

[mgechev]

We'll look at this during the weekly triage meeting.

[mgechev]

Currently this is working as intended. Here's a workaround:

// student-routing.module.ts

export function _lc() {
  return import("./settings/settings.module").then(m => m.SettingsModule);
}

export const ROUTES: Routes = [
     {
         loadChildren: "./question/question.module#QuestionModule",
         path: "question",
     },
     {
         loadChildren: _lc,
         path: "settings",
     },
];

// question-routing.module.ts

export function _lc() {
  return import("./settings/settings.module").then(m => m.SettingsModule);
}

export const ROUTES: Routes = [
     {
         loadChildren: _lc,
         path: "settings",
     },
];

This is bad DX, so I'd suggest to keep the issue open until we figure out how to improve.

[jvoigt]

When i use @mgechev s Workaround tsLint will complain:

[ts] Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'. [1323]

with my tsconfig.json like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    // "module": "es2015",  // just Changed that
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

in JIT it will work regardless but fail in AOT.

my package.json deps:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },